import { useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
import {
  Calculator,
  Download,
  Eye,
  FileText,
  Loader2,
  Lock,
  Settings,
  Upload,
  Users,
} from 'lucide-react';
import { useNavigate, useParams } from 'react-router-dom';
import { useQuery } from 'urql';
import { AnnualAuditStepsStatusDocument } from '@/gql/graphql.js';
import { ROUTES } from '@/router/routes.js';
import { FiltersContext } from '../../../../providers/filters-context.js';
import { UserContext } from '../../../../providers/user-provider.js';
import { PageLayout } from '../../../layout/page-layout.js';
import { Button } from '../../../ui/button.js';
import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card.js';
import { Progress } from '../../../ui/progress.js';
// Import step components
import { Step01ValidateCharges } from './step-01-validate-charges/index.js';
import { Step02LedgerChanges } from './step-02-ledger-changes/index.js';
import { Step03OpeningBalance } from './step-03-opening-balance/index.js';
import { Step04FinancialCharges } from './step-04-financial-charges/index.js';
import { Step05MainProcess } from './step-05-main-process/index.js';
import { Step08LedgerLock } from './step-08-ledger-lock/index.js';
import { Step09SaveTemplate } from './step-09-save-template/index.js';
import { Step10ExportTrialBalance } from './step-10-export-trial-balance/index.js';
import { Step11DepreciationReport } from './step-11-depreciation-report/index.js';
import { Step13TaxReport } from './step-13-tax-report/index.js';
import { Step14TaxComplianceReport } from './step-14-tax-compliance-report/index.js';
import type { StepStatus } from './step-base.js';
import { SimpleStep } from './step-simple.js';
import { YearPicker } from './year-picker.js';

// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
/* GraphQL */ `
  query AnnualAuditStepsStatus($ownerId: UUID!, $year: Int!) {
    annualAuditStepStatuses(ownerId: $ownerId, year: $year) {
      id
      stepId
      status
      notes
    }
  }
`;

export const AnnualAuditFlow = (): ReactNode => {
  const { setFiltersContext } = useContext(FiltersContext);
  const { userContext } = useContext(UserContext);
  const adminBusinessId = userContext?.context.adminBusinessId;

  const { year: yearFromUrl } = useParams<{ year: string }>();
  const navigate = useNavigate();
  const currentFullYear = new Date().getFullYear();
  const defaultYear = currentFullYear - 1;
  const parsedYear = yearFromUrl ? Number(yearFromUrl) : defaultYear;
  const isValidYear =
    !Number.isNaN(parsedYear) && parsedYear >= 2000 && parsedYear <= currentFullYear;
  const year = isValidYear ? parsedYear : defaultYear;
  useEffect(() => {
    if (!isValidYear) {
      navigate(ROUTES.WORKFLOWS.ANNUAL_AUDIT(defaultYear), { replace: true });
    }
  }, [isValidYear, navigate, defaultYear]);

  const changeYear = useCallback(
    (newYear: number) => {
      if (newYear !== year) {
        navigate(ROUTES.WORKFLOWS.ANNUAL_AUDIT(newYear));
      }
    },
    [year, navigate],
  );

  useEffect(() => {
    setFiltersContext(
      <div className="flex flex-row gap-x-5">
        <YearPicker value={year} onChange={changeYear} />
      </div>,
    );
  }, [year, setFiltersContext, changeYear]);

  const [{ data, fetching }] = useQuery({
    query: AnnualAuditStepsStatusDocument,
    variables: { ownerId: adminBusinessId!, year },
    pause: !adminBusinessId,
  });
  const isLoadingStepStatuses: boolean = !!(adminBusinessId && fetching);

  const totalSteps = 21;

  // Track step statuses to avoid double counting
  const stepStatusesRef = useRef<Map<string, StepStatus>>(new Map());
  const [completedSteps, setCompletedSteps] = useState(0);
  const [step7Status, setStep7Status] = useState<StepStatus>('pending');

  const calculateStep7Status = useCallback(() => {
    const step1Status = stepStatusesRef.current.get('1');
    const step2Status = stepStatusesRef.current.get('2');
    const step7NewStatus =
      step1Status === 'completed' && step2Status === 'completed' ? 'completed' : 'pending';
    const step7CurrentStatus = stepStatusesRef.current.get('7');
    if (step7CurrentStatus === step7NewStatus) {
      // No change in status, do nothing
      return;
    }
    stepStatusesRef.current.set('7', step7NewStatus);
    setStep7Status(step7NewStatus);
  }, []);

  const handleStatusChange = useCallback(
    (stepId: string, status: StepStatus) => {
      const previousStatus = stepStatusesRef.current.get(stepId);

      // Only update if status actually changed
      if (previousStatus !== status) {
        stepStatusesRef.current.set(stepId, status);

        // Recalculate completed steps count
        const completedCount = Array.from(stepStatusesRef.current.values()).filter(
          s => s === 'completed',
        ).length;

        setCompletedSteps(completedCount);
      }

      if (stepId === '1' || stepId === '2') {
        calculateStep7Status();
      }
    },
    [calculateStep7Status],
  );

  const progressPercentage = (completedSteps / totalSteps) * 100;

  const step1Ref = useRef<HTMLDivElement>(null);
  const step2Ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    calculateStep7Status();
  }, [calculateStep7Status]);

  if (!isValidYear) {
    return null;
  }

  return (
    <PageLayout
      title={`Annual Audit Flow - ${year}`}
      description="Complete audit process for annual financial reporting and compliance"
    >
      <div className="container mx-auto p-6 max-w-6xl">
        <div className="mb-8">
          <Card className="mb-6">
            <CardHeader>
              <CardTitle className="text-lg">Progress Overview</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span>Completed Steps</span>
                  <span>
                    {completedSteps} of {totalSteps}
                  </span>
                </div>
                <Progress value={progressPercentage} className="h-2" />
                <div className="text-xs text-muted-foreground">
                  {progressPercentage.toFixed(1)}% Complete
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {isLoadingStepStatuses ? (
          <Card>
            <CardContent className="flex flex-col items-center justify-center gap-3 py-10">
              <Loader2 className="h-10 w-10 animate-spin text-muted-foreground" />
              <p className="text-sm text-muted-foreground">Loading annual audit step statuses...</p>
            </CardContent>
          </Card>
        ) : (
          <div className="space-y-4">
            {/* Step 1 - Charges Validation */}
            <Step01ValidateCharges
              id="1"
              ref={step1Ref}
              year={year}
              adminBusinessId={adminBusinessId}
              title="Validate All Charges"
              description="Ensure all charges of the year were reviewed, handle pending charges"
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
            />

            {/* Step 2 - Pending Ledger Changes */}
            <Step02LedgerChanges
              id="2"
              ref={step2Ref}
              year={year}
              adminBusinessId={adminBusinessId}
              title="Check Pending Ledger Changes"
              description="Ensure no pending ledger changes exist"
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
            />

            {/* Step 3 - Opening Balance Verification */}
            <Step03OpeningBalance
              id="3"
              year={year}
              adminBusinessId={adminBusinessId}
              title="Verify Opening Balance"
              description="Handle opening balance verification based on user type"
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
            />

            {/* Step 4 - Financial Charges */}
            <Step04FinancialCharges
              id="4"
              title="Generate Financial Charges"
              description="Create various financial charges and reserves"
              icon={<Calculator className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              year={year}
              adminBusinessId={adminBusinessId}
            />

            {/* Step 5 - Audit Main Process */}
            <Step05MainProcess
              id="5"
              title="Audit Main Process"
              description="Task management system for comprehensive audit checks"
              icon={<FileText className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              year={year}
              adminBusinessId={adminBusinessId}
            />

            {/* Steps 6 - Shareholders Data */}
            <SimpleStep
              id="6"
              title="Add Shareholders Data (1214)"
              description="For 1214 report preparation"
              icon={<Users className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              actions={[
                { label: 'Manage Shareholders', href: '/shareholders/manage' },
                { label: 'Import Data', href: '/shareholders/import' },
              ]}
            />

            {/* Steps 7 - Revalidate Charges And Ledger */}
            <SimpleStep
              id="7"
              title="Revalidate Pending Items"
              description="Ensure no charges approval or ledger regeneration pending"
              icon={<Eye className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              defaultStatus={step7Status}
              actions={[
                {
                  label: 'Check Pending Approvals',
                  onClick: () => {
                    step1Ref.current?.scrollIntoView({
                      behavior: 'smooth',
                      block: 'start',
                    });
                  },
                },
                {
                  label: 'Ledger Status',
                  onClick: () => {
                    step2Ref.current?.scrollIntoView({
                      behavior: 'smooth',
                      block: 'start',
                    });
                  },
                },
              ]}
            />

            {/* Steps 8 - Ledger Lock */}
            <Step08LedgerLock
              id="8"
              title="Lock Ledger"
              description="Lock ledger by records and by date"
              year={year}
              icon={<Lock className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
            />

            <Step09SaveTemplate
              id="9"
              title="Save Final Dynamic Report Template"
              icon={<FileText className="h-4 w-4" />}
              year={year}
              adminBusinessId={adminBusinessId}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
            />

            <Step10ExportTrialBalance
              id="10"
              title="Export Year-end Trial Balance"
              icon={<Download className="h-4 w-4" />}
              year={year}
              adminBusinessId={adminBusinessId}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
            />

            <Step11DepreciationReport
              id="11"
              title="Generate Final Depreciation Report"
              icon={<FileText className="h-4 w-4" />}
              year={year}
              adminBusinessId={adminBusinessId}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
            />

            <SimpleStep
              id="12"
              title="Generate Financial Reports"
              description="With comparison numbers from last year"
              icon={<FileText className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              actions={[{ label: 'Generate Reports', href: '/reports/financial' }]}
            />

            <Step13TaxReport
              id="13"
              title="Generate Tax Report"
              icon={<FileText className="h-4 w-4" />}
              year={year}
              adminBusinessId={adminBusinessId}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
            />

            <Step14TaxComplianceReport
              id="14"
              title="Generate Tax Compliance Reports"
              icon={<FileText className="h-4 w-4" />}
              year={year}
              adminBusinessId={adminBusinessId}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
            />

            <SimpleStep
              id="15"
              title="Generate Tax Compliance Report"
              icon={<FileText className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              actions={[
                { label: 'Generate 973', href: '/reports/973' },
                { label: 'Generate 901א', href: '/reports/901a' },
              ]}
            />

            <SimpleStep
              id="16"
              title="Generate 6111 Report"
              icon={<FileText className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              actions={[{ label: 'Generate 6111', href: ROUTES.REPORTS.SHAAM_6111 }]}
            />

            <SimpleStep
              id="17"
              title="Generate Dividend Report 1214ב"
              icon={<FileText className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              actions={[{ label: 'Generate Dividend Report', href: '/reports/dividend-1214b' }]}
            />

            <SimpleStep
              id="18"
              title="Generate 1214 Report"
              icon={<FileText className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              actions={[{ label: 'Generate 1214', href: '/reports/1214' }]}
            />

            <SimpleStep
              id="19"
              title="Compare Tax Expenses"
              description="Compare 1214 tax expenses with ledger tax expenses"
              icon={<Calculator className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              actions={[{ label: 'Compare Expenses', href: '/tax/compare-expenses' }]}
            />

            <SimpleStep
              id="20"
              title="Signing Process"
              description="Handle signing process and accompanying documents"
              icon={<FileText className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              actions={[
                { label: 'Prepare Documents', href: '/signing/prepare' },
                { label: 'Digital Signing', href: '/signing/digital' },
              ]}
            />

            <SimpleStep
              id="21"
              title="File Annual Report"
              description="Submit annual report to companies government office"
              icon={<Upload className="h-4 w-4" />}
              onStatusChange={handleStatusChange}
              manualData={data?.annualAuditStepStatuses}
              actions={[
                { label: 'Prepare Filing', href: '/filing/prepare' },
                { label: 'Submit Report', href: '/filing/submit' },
              ]}
            />
          </div>
        )}

        <div className="mt-8 p-4 bg-muted rounded-lg">
          <h3 className="font-semibold mb-2">Quick Actions</h3>
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              Export Progress Report
            </Button>
            <Button variant="outline" size="sm">
              <Settings className="h-4 w-4 mr-2" />
              Configure Workflow
            </Button>
            <Button variant="outline" size="sm">
              <Eye className="h-4 w-4 mr-2" />
              View All Reports
            </Button>
          </div>
        </div>
      </div>
    </PageLayout>
  );
};