import { AlertTriangle, Wallet } from 'lucide-react';

import type { EsaFundingPage } from '@/business/esa-funding/types';
import { EsaFundingAcknowledgement } from '@/components/esa-funding/EsaFundingAcknowledgement';
import { EsaFundingApprovedUses } from '@/components/esa-funding/EsaFundingApprovedUses';
import { EsaFundingFaq } from '@/components/esa-funding/EsaFundingFaq';
import { EsaFundingHeader } from '@/components/esa-funding/EsaFundingHeader';
import { EsaFundingHero } from '@/components/esa-funding/EsaFundingHero';
import { EsaFundingImpactRoles } from '@/components/esa-funding/EsaFundingImpactRoles';
import { EsaFundingKeyPoints } from '@/components/esa-funding/EsaFundingKeyPoints';
import { EsaFundingQuickReference } from '@/components/esa-funding/EsaFundingQuickReference';
import { EsaFundingResources } from '@/components/esa-funding/EsaFundingResources';
import { EsaFundingStateNotice } from '@/components/esa-funding/EsaFundingStateNotice';
import { StatePanel } from '@/components/ui/state-panel';

interface EsaFundingViewProps {
  readonly page: EsaFundingPage;
}

export function EsaFundingView({ page }: EsaFundingViewProps) {
  return (
    <div className="space-y-6">
      <EsaFundingHeader />

      <EsaFundingHero />

      {page.isLoading && (
        <StatePanel
          title="Loading ESA funding content"
          icon={Wallet}
          tone="cyan"
          alignment="center"
          loading
        >
          Loading current ESA funding information.
        </StatePanel>
      )}

      {page.error && (
        <StatePanel
          title="ESA funding content could not be loaded"
          icon={AlertTriangle}
          tone="red"
          alignment="center"
          role="alert"
        >
          Please try again.
        </StatePanel>
      )}

      {!page.isLoading && !page.error && (
        <>
          <EsaFundingStateNotice content={page.content} />
          <EsaFundingKeyPoints items={page.content.keyPoints} />
          <EsaFundingApprovedUses items={page.content.approvedUses} />
          <EsaFundingImpactRoles
            schoolImpactItems={page.content.schoolImpactItems}
            staffRoleItems={page.content.staffRoleItems}
          />
          <EsaFundingFaq
            items={page.faqs}
            expandedFAQ={page.expandedFAQ}
            onToggleFAQ={page.toggleFAQ}
          />
          <EsaFundingQuickReference content={page.content} />
          <EsaFundingResources resources={page.content.resources} />
        </>
      )}

      <EsaFundingAcknowledgement
        acknowledged={page.acknowledged}
        onToggle={page.toggleAcknowledged}
      />
    </div>
  );
}
