import { useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
import { Calculator, Download, Eye, FileText, Lock, Settings, Upload, Users } from 'lucide-react';
import { useNavigate, useParams } from 'react-router-dom';
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 { Step08LedgerLock } from './step-08-ledger-lock/index.js';
import type { StepStatus } from './step-base.js';
import SimpleStep from './step-simple.js';
import { YearPicker } from './year-picker.js';

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 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>

        <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}
          />

          {/* 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}
          />

          {/* 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}
          />

          {/* 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}
            year={year}
            adminBusinessId={adminBusinessId}
          />

          {/* Step 5 - Audit Main Process */}
          <SimpleStep
            id="5"
            title="Audit Main Process"
            description="Task management system for comprehensive audit checks"
            icon={<FileText className="h-4 w-4" />}
            onStatusChange={handleStatusChange}
            actions={[
              { label: 'Manage Conto Tree', href: '/conto/tree' },
              { label: 'Open Checklist', href: '/validations/checklist' },
              { label: 'Compare VAT', href: '/vat/comparison' },
              { label: 'Generate Draft', href: '/depreciation/draft' },
              { label: 'Manage Audit Checks', href: '/audit/checks' },
              { label: 'Review Tax Report', href: '/tax/review' },
              { label: 'Cash Flow Analysis', href: '/cashflow/analysis' },
            ]}
          />

          {/* 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}
            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}
            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}
          />

          <SimpleStep
            id="9"
            title="Save Final Dynamic Report Template"
            icon={<FileText className="h-4 w-4" />}
            onStatusChange={handleStatusChange}
            actions={[{ label: 'Save Template', href: '/reports/save-template' }]}
          />

          <SimpleStep
            id="10"
            title="Export Year-end Trial Balance"
            description="For future validations"
            icon={<Download className="h-4 w-4" />}
            onStatusChange={handleStatusChange}
            actions={[{ label: 'Export Trial Balance', href: '/export/trial-balance' }]}
          />

          <SimpleStep
            id="11"
            title="Generate Final Depreciation Report"
            icon={<FileText className="h-4 w-4" />}
            onStatusChange={handleStatusChange}
            actions={[{ label: 'Generate Report', href: '/depreciation/final' }]}
          />

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

          <SimpleStep
            id="13"
            title="Generate Tax Report"
            icon={<FileText className="h-4 w-4" />}
            onStatusChange={handleStatusChange}
            actions={[{ label: 'Generate Tax Report', href: '/tax/generate' }]}
          />

          <SimpleStep
            id="14"
            title="Generate Tax Compliance Reports"
            description="For Yossi's review"
            icon={<FileText className="h-4 w-4" />}
            onStatusChange={handleStatusChange}
            actions={[{ label: 'Generate Report', href: '/compliance/clients-country' }]}
          />

          <SimpleStep
            id="15"
            title="Generate Tax Compliance Report"
            icon={<FileText className="h-4 w-4" />}
            onStatusChange={handleStatusChange}
            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}
            actions={[{ label: 'Generate 6111', href: '/reports/6111' }]}
          />

          <SimpleStep
            id="17"
            title="Generate Dividend Report 1214ב"
            icon={<FileText className="h-4 w-4" />}
            onStatusChange={handleStatusChange}
            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}
            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}
            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}
            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}
            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>
  );
};