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 {
  EsaFundingFaqEditor,
  EsaFundingQuickReferenceEditor,
  EsaFundingResourcesEditor,
  EsaFundingSchoolImpactEditor,
  EsaFundingStaffRoleEditor,
} from '@/components/esa-funding/EsaFundingEditor';
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';
import {
  ESA_FUNDING_STATIC_APPROVED_USES,
  ESA_FUNDING_STATIC_KEY_POINTS,
  ESA_FUNDING_STATIC_STATE_CHECKLIST,
} from '@/shared/constants/esaFunding';

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 items={ESA_FUNDING_STATIC_STATE_CHECKLIST} />
          <EsaFundingKeyPoints items={ESA_FUNDING_STATIC_KEY_POINTS} />
          <EsaFundingApprovedUses items={ESA_FUNDING_STATIC_APPROVED_USES} />
          <EsaFundingImpactRoles
            schoolImpactItems={page.content.schoolImpactItems}
            staffRoleItems={page.content.staffRoleItems}
            schoolImpactEditor={page.canManage ? (
              <EsaFundingSchoolImpactEditor
                content={page.content}
                isSaving={page.isSaving}
                onSave={page.saveContent}
              />
            ) : undefined}
            staffRoleEditor={page.canManage ? (
              <EsaFundingStaffRoleEditor
                content={page.content}
                isSaving={page.isSaving}
                onSave={page.saveContent}
              />
            ) : undefined}
          />
          <EsaFundingFaq
            items={page.faqs}
            expandedFAQ={page.expandedFAQ}
            onToggleFAQ={page.toggleFAQ}
            editor={page.canManage ? (
              <EsaFundingFaqEditor
                content={page.content}
                isSaving={page.isSaving}
                onSave={page.saveContent}
              />
            ) : undefined}
          />
          <EsaFundingQuickReference
            content={page.content}
            editor={page.canManage ? (
              <EsaFundingQuickReferenceEditor
                content={page.content}
                isSaving={page.isSaving}
                onSave={page.saveContent}
              />
            ) : undefined}
          />
          <EsaFundingResources
            resources={page.content.resources}
            editor={page.canManage ? (
              <EsaFundingResourcesEditor
                content={page.content}
                isSaving={page.isSaving}
                onSave={page.saveContent}
              />
            ) : undefined}
          />
        </>
      )}

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