import React, { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Loader2, AlertTriangle, CheckCircle, User, Users as UsersIcon, MapPin, Briefcase, Mail, Check, X, AlertCircle } from 'lucide-react';
import { usePezkuwi } from '@/contexts/PezkuwiContext';
import { useTranslation } from 'react-i18next';
import { blake2AsHex } from '@pezkuwi/util-crypto';
import type { CitizenshipData, Region, MaritalStatus, KycStatus } from '@pezkuwi/lib/citizenship-workflow';
import { submitKycApplication, subscribeToKycApproval, getKycStatus, cancelApplication, confirmCitizenship } from '@pezkuwi/lib/citizenship-workflow';
import { encryptData, saveLocalCitizenshipData, uploadToIPFS } from '@pezkuwi/lib/citizenship-workflow';

interface NewCitizenApplicationProps {
  onClose: () => void;
  referrerAddress?: string | null;
}

type FormData = Omit<CitizenshipData, 'walletAddress' | 'timestamp'>;

export const NewCitizenApplication: React.FC<NewCitizenApplicationProps> = ({ onClose, referrerAddress }) => {
  // identityKyc pallet is on People Chain
  const { peopleApi, isPeopleReady, selectedAccount, connectWallet, walletSource } = usePezkuwi();
  const { t } = useTranslation();
  const { register, handleSubmit, watch, setValue, formState: { errors } } = useForm<FormData>();

  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [currentStatus, setCurrentStatus] = useState<KycStatus>('NotStarted');
  const [kycApproved, setKycApproved] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [agreed, setAgreed] = useState(false);
  const [confirming, setConfirming] = useState(false);
  const [canceling, setCanceling] = useState(false);
  const [applicationHash, setApplicationHash] = useState<string>('');

  const maritalStatus = watch('maritalStatus');
  const childrenCount = watch('childrenCount');

  const handleConfirmCitizenship = async () => {
    if (!peopleApi || !isPeopleReady || !selectedAccount) {
      setError(t('newCitizen.connectWalletError'));
      return;
    }

    setConfirming(true);
    setError(null);
    try {
      const result = await confirmCitizenship(peopleApi, selectedAccount, walletSource);

      if (!result.success) {
        setError(result.error || t('newCitizen.failedToConfirm'));
        setConfirming(false);
        return;
      }

      setKycApproved(true);
      setCurrentStatus('Approved');

      setTimeout(() => {
        onClose();
        window.location.href = '/dashboard';
      }, 2000);
    } catch (err) {
      if (import.meta.env.DEV) console.error('Confirmation error:', err);
      setError((err as Error).message || t('newCitizen.failedToConfirm'));
    } finally {
      setConfirming(false);
    }
  };

  const handleCancelApplication = async () => {
    if (!peopleApi || !isPeopleReady || !selectedAccount) {
      setError(t('newCitizen.connectWalletError'));
      return;
    }

    setCanceling(true);
    setError(null);
    try {
      const result = await cancelApplication(peopleApi, selectedAccount, walletSource);

      if (!result.success) {
        setError(result.error || t('newCitizen.failedToCancel'));
        setCanceling(false);
        return;
      }

      if (import.meta.env.DEV) console.log('Application canceled, deposit returned');
      onClose();
      window.location.href = '/';
    } catch (err) {
      if (import.meta.env.DEV) console.error('Cancel error:', err);
      setError((err as Error).message || t('newCitizen.failedToCancel'));
    } finally {
      setCanceling(false);
    }
  };

  // Check KYC status on mount (identityKyc pallet is on People Chain)
  useEffect(() => {
    const checkKycStatus = async () => {
      if (!peopleApi || !isPeopleReady || !selectedAccount) {
        return;
      }

      try {
        const status = await getKycStatus(peopleApi, selectedAccount.address);
        if (import.meta.env.DEV) console.log('Current KYC Status from People Chain:', status);
        setCurrentStatus(status);

        if (status === 'Approved') {
          setKycApproved(true);
          setTimeout(() => {
            onClose();
            window.location.href = '/dashboard';
          }, 2000);
        }
      } catch (err) {
        if (import.meta.env.DEV) console.error('Error checking KYC status:', err);
      }
    };

    checkKycStatus();
  }, [peopleApi, isPeopleReady, selectedAccount, onClose]);

  // Subscribe to citizenship events on People Chain
  useEffect(() => {
    const isPending = currentStatus === 'PendingReferral' || currentStatus === 'ReferrerApproved';
    if (!peopleApi || !isPeopleReady || !selectedAccount || !isPending) {
      return;
    }

    if (import.meta.env.DEV) console.log('Setting up citizenship event listener on People Chain for:', selectedAccount.address);

    const unsubscribe = subscribeToKycApproval(
      peopleApi,
      selectedAccount.address,
      () => {
        // CitizenshipConfirmed
        setKycApproved(true);
        setCurrentStatus('Approved');
        setTimeout(() => {
          onClose();
          window.location.href = '/dashboard';
        }, 2000);
      },
      (error) => {
        if (import.meta.env.DEV) console.error('Citizenship event subscription error:', error);
        setError(`Failed to monitor status: ${error}`);
      },
      () => {
        // ReferralApproved - referrer vouched, now user can confirm
        setCurrentStatus('ReferrerApproved');
      }
    );

    return () => {
      if (unsubscribe) {
        unsubscribe();
      }
    };
  }, [peopleApi, isPeopleReady, selectedAccount, currentStatus, onClose]);

  const onSubmit = async (data: FormData) => {
    // identityKyc pallet is on People Chain
    if (!peopleApi || !isPeopleReady || !selectedAccount) {
      setError(t('newCitizen.connectWalletError'));
      return;
    }

    if (!agreed) {
      setError(t('newCitizen.agreeToTerms'));
      return;
    }

    setError(null);
    setSubmitting(true);

    try {
      // Check KYC status before submitting (from People Chain)
      const status = await getKycStatus(peopleApi, selectedAccount.address);

      if (status === 'Approved') {
        setError(t('newCitizen.alreadyApproved'));
        setKycApproved(true);
        setTimeout(() => {
          onClose();
          window.location.href = '/dashboard';
        }, 2000);
        return;
      }

      if (status === 'PendingReferral' || status === 'ReferrerApproved') {
        setError(t('newCitizen.alreadyPending'));
        setCurrentStatus(status);
        return;
      }

      // Prepare complete citizenship data
      const citizenshipData: CitizenshipData = {
        ...data,
        walletAddress: selectedAccount.address,
        timestamp: Date.now(),
        referralCode: data.referralCode || referrerAddress || undefined
      };

      // Compute identity hash (H256) from citizenship data
      const identityHash = blake2AsHex(
        JSON.stringify({
          fullName: citizenshipData.fullName,
          fatherName: citizenshipData.fatherName,
          grandfatherName: citizenshipData.grandfatherName,
          motherName: citizenshipData.motherName,
          tribe: citizenshipData.tribe,
          region: citizenshipData.region,
          email: citizenshipData.email,
          profession: citizenshipData.profession,
          walletAddress: citizenshipData.walletAddress
        }),
        256
      );

      if (import.meta.env.DEV) console.log('Identity Hash:', identityHash);

      // Encrypt data and upload to IPFS as off-chain backup
      const encryptedData = encryptData(citizenshipData);
      saveLocalCitizenshipData(citizenshipData);
      const ipfsCid = await uploadToIPFS(encryptedData);
      if (import.meta.env.DEV) console.log('IPFS CID (off-chain backup):', ipfsCid);

      // Determine referrer: explicit referrer address > referral code > default (pallet uses DefaultReferrer)
      const effectiveReferrer = referrerAddress || data.referralCode || undefined;

      // Submit to blockchain - single call: applyForCitizenship(identity_hash, referrer)
      if (import.meta.env.DEV) console.log('Submitting citizenship application to People Chain...');
      const result = await submitKycApplication(
        peopleApi,
        selectedAccount,
        identityHash,
        effectiveReferrer,
        walletSource
      );

      if (!result.success) {
        setError(result.error || t('newCitizen.failedToSubmit'));
        setSubmitting(false);
        return;
      }

      if (import.meta.env.DEV) console.log('Citizenship application submitted to blockchain');

      if (result.blockHash) {
        setApplicationHash(result.blockHash.slice(0, 16) + '...');
      }

      setSubmitted(true);
      setSubmitting(false);
      setCurrentStatus('PendingReferral');

    } catch (err) {
      if (import.meta.env.DEV) console.error('Submission error:', err);
      setError(t('newCitizen.failedToSubmit'));
      setSubmitting(false);
    }
  };

  if (!selectedAccount) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>{t('newCitizen.connectRequired')}</CardTitle>
          <CardDescription>
            {t('newCitizen.connectDesc')}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Button onClick={connectWallet} className="w-full">
            {t('newCitizen.connectWallet')}
          </Button>
        </CardContent>
      </Card>
    );
  }

  // KYC Approved - Success state
  if (kycApproved) {
    return (
      <Card>
        <CardContent className="pt-6 flex flex-col items-center justify-center py-8 space-y-4">
          <CheckCircle className="h-16 w-16 text-green-500 animate-pulse" />
          <h3 className="text-lg font-semibold text-center text-green-500">{t('newCitizen.kycApproved')}</h3>
          <p className="text-sm text-muted-foreground text-center max-w-md">
            {t('newCitizen.kycApprovedDesc')}
          </p>
        </CardContent>
      </Card>
    );
  }

  // PendingReferral - waiting for referrer to approve
  if (currentStatus === 'PendingReferral') {
    return (
      <Card>
        <CardContent className="pt-6 flex flex-col items-center justify-center py-8 space-y-6">
          <div className="relative">
            <div className="h-24 w-24 rounded-full border-4 border-yellow-500/20 flex items-center justify-center">
              <Loader2 className="h-10 w-10 text-yellow-500 animate-spin" />
            </div>
          </div>

          <div className="text-center space-y-2">
            <h3 className="text-lg font-semibold">{t('newCitizen.waitingReferrer')}</h3>
            <p className="text-sm text-muted-foreground max-w-md">
              {t('newCitizen.waitingReferrerDesc')}
            </p>
          </div>

          <div className="w-full max-w-md space-y-3 pt-4">
            <div className="flex items-center gap-3">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
                <Check className="h-5 w-5 text-green-600 dark:text-green-400" />
              </div>
              <div className="flex-1">
                <p className="text-sm font-medium">{t('newCitizen.appSubmitted')}</p>
                <p className="text-xs text-muted-foreground">{t('newCitizen.txHash', { hash: applicationHash || 'Confirmed' })}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
                <Check className="h-5 w-5 text-green-600 dark:text-green-400" />
              </div>
              <div className="flex-1">
                <p className="text-sm font-medium">{t('newCitizen.depositReserved')}</p>
                <p className="text-xs text-muted-foreground">{t('newCitizen.depositReturn')}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900">
                <Loader2 className="h-5 w-5 text-yellow-600 dark:text-yellow-400 animate-spin" />
              </div>
              <div className="flex-1">
                <p className="text-sm font-medium">{t('newCitizen.waitingForReferrer')}</p>
                <p className="text-xs text-muted-foreground">{t('newCitizen.referrerMustApprove')}</p>
              </div>
            </div>
          </div>

          <div className="flex gap-3 w-full max-w-md pt-4">
            <Button
              onClick={handleCancelApplication}
              disabled={canceling}
              variant="destructive"
              className="flex-1"
            >
              {canceling ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  {t('newCitizen.canceling')}
                </>
              ) : (
                <>
                  <X className="h-4 w-4 mr-2" />
                  {t('newCitizen.cancelApplication')}
                </>
              )}
            </Button>
          </div>

          {error && (
            <Alert variant="destructive" className="w-full max-w-md">
              <AlertTriangle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <Button variant="outline" onClick={onClose} className="mt-2">
            {t('newCitizen.close')}
          </Button>
        </CardContent>
      </Card>
    );
  }

  // ReferrerApproved - referrer vouched, now user can confirm
  if (currentStatus === 'ReferrerApproved') {
    return (
      <Card>
        <CardContent className="pt-6 flex flex-col items-center justify-center py-8 space-y-6">
          <div className="relative">
            <div className="h-24 w-24 rounded-full border-4 border-green-500/20 flex items-center justify-center">
              <CheckCircle className="h-10 w-10 text-green-500" />
            </div>
          </div>

          <div className="text-center space-y-2">
            <h3 className="text-lg font-semibold text-green-600">{t('newCitizen.referrerApproved')}</h3>
            <p className="text-sm text-muted-foreground max-w-md">
              {t('newCitizen.referrerApprovedDesc')}
            </p>
          </div>

          <div className="w-full max-w-md space-y-3 pt-4">
            <div className="flex items-center gap-3">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
                <Check className="h-5 w-5 text-green-600 dark:text-green-400" />
              </div>
              <div className="flex-1">
                <p className="text-sm font-medium">{t('newCitizen.appSubmitted')}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
                <Check className="h-5 w-5 text-green-600 dark:text-green-400" />
              </div>
              <div className="flex-1">
                <p className="text-sm font-medium">{t('newCitizen.referrerApproved')}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
                <AlertCircle className="h-5 w-5 text-blue-600 dark:text-blue-400" />
              </div>
              <div className="flex-1">
                <p className="text-sm font-medium">{t('newCitizen.confirmCitizenship')}</p>
                <p className="text-xs text-muted-foreground">{t('newCitizen.confirmMintDesc')}</p>
              </div>
            </div>
          </div>

          <div className="flex gap-3 w-full max-w-md pt-4">
            <Button
              onClick={handleConfirmCitizenship}
              disabled={confirming}
              className="flex-1 bg-green-600 hover:bg-green-700"
            >
              {confirming ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  {t('newCitizen.confirming')}
                </>
              ) : (
                <>
                  <Check className="h-4 w-4 mr-2" />
                  {t('newCitizen.confirmCitizenship')}
                </>
              )}
            </Button>
          </div>

          {error && (
            <Alert variant="destructive" className="w-full max-w-md">
              <AlertTriangle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <Button variant="outline" onClick={onClose} className="mt-2">
            {t('newCitizen.close')}
          </Button>
        </CardContent>
      </Card>
    );
  }

  // Initial submission success (before blockchain confirmation)
  if (submitted && currentStatus === 'NotStarted') {
    return (
      <Card>
        <CardContent className="pt-6 flex flex-col items-center justify-center py-8 space-y-4">
          <Loader2 className="h-16 w-16 text-cyan-500 animate-spin" />
          <h3 className="text-lg font-semibold text-center">{t('newCitizen.processing')}</h3>
          <p className="text-sm text-muted-foreground text-center max-w-md">
            {t('newCitizen.processingDesc')}
          </p>
        </CardContent>
      </Card>
    );
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      {/* Personal Identity Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <User className="h-5 w-5" />
            {t('newCitizen.personalIdentity')}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="fullName">{t('newCitizen.fullName')} *</Label>
            <Input {...register('fullName', { required: true })} placeholder="e.g., Berzê Ronahî" />
            {errors.fullName && <p className="text-xs text-red-500">{t('newCitizen.required')}</p>}
          </div>

          <div className="space-y-2">
            <Label htmlFor="fatherName">{t('newCitizen.fatherName')} *</Label>
            <Input {...register('fatherName', { required: true })} placeholder="e.g., Şêrko" />
            {errors.fatherName && <p className="text-xs text-red-500">{t('newCitizen.required')}</p>}
          </div>

          <div className="space-y-2">
            <Label htmlFor="grandfatherName">{t('newCitizen.grandfatherName')} *</Label>
            <Input {...register('grandfatherName', { required: true })} placeholder="e.g., Welat" />
            {errors.grandfatherName && <p className="text-xs text-red-500">{t('newCitizen.required')}</p>}
          </div>

          <div className="space-y-2">
            <Label htmlFor="motherName">{t('newCitizen.motherName')} *</Label>
            <Input {...register('motherName', { required: true })} placeholder="e.g., Gula" />
            {errors.motherName && <p className="text-xs text-red-500">{t('newCitizen.required')}</p>}
          </div>
        </CardContent>
      </Card>

      {/* Tribal Affiliation */}
      <Card>
        <CardHeader>
          <CardTitle>{t('newCitizen.tribalAffiliation')}</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            <Label htmlFor="tribe">{t('newCitizen.yourTribe')} *</Label>
            <Input {...register('tribe', { required: true })} placeholder="e.g., Barzanî, Soran, Hewramî..." />
            {errors.tribe && <p className="text-xs text-red-500">{t('newCitizen.required')}</p>}
          </div>
        </CardContent>
      </Card>

      {/* Family Status */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <UsersIcon className="h-5 w-5" />
            {t('newCitizen.familyStatus')}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label>{t('newCitizen.maritalStatus')} *</Label>
            <RadioGroup
              onValueChange={(value) => setValue('maritalStatus', value as MaritalStatus)}
              defaultValue="nezewici"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="zewici" id="married" />
                <Label htmlFor="married">{t('newCitizen.married')}</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="nezewici" id="unmarried" />
                <Label htmlFor="unmarried">{t('newCitizen.unmarried')}</Label>
              </div>
            </RadioGroup>
          </div>

          {maritalStatus === 'zewici' && (
            <>
              <div className="space-y-2">
                <Label htmlFor="childrenCount">{t('newCitizen.childrenCount')}</Label>
                <Input
                  type="number"
                  {...register('childrenCount', { valueAsNumber: true })}
                  placeholder="0"
                  min="0"
                />
              </div>

              {childrenCount && childrenCount > 0 && (
                <div className="space-y-3">
                  <Label>{t('newCitizen.childrenNames')}</Label>
                  {Array.from({ length: childrenCount }).map((_, i) => (
                    <div key={i} className="grid grid-cols-2 gap-2">
                      <Input
                        {...register(`children.${i}.name` as const)}
                        placeholder={t('newCitizen.childName', { number: i + 1 })}
                      />
                      <Input
                        type="number"
                        {...register(`children.${i}.birthYear` as const, { valueAsNumber: true })}
                        placeholder={t('newCitizen.birthYear')}
                        min="1900"
                        max={new Date().getFullYear()}
                      />
                    </div>
                  ))}
                </div>
              )}
            </>
          )}
        </CardContent>
      </Card>

      {/* Geographic Origin */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MapPin className="h-5 w-5" />
            {t('newCitizen.yourRegion')}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            <Label htmlFor="region">{t('newCitizen.whereAreYouFrom')} *</Label>
            <Select onValueChange={(value) => setValue('region', value as Region)}>
              <SelectTrigger>
                <SelectValue placeholder={t('newCitizen.selectRegion')} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="bakur">{t('newCitizen.bakur')}</SelectItem>
                <SelectItem value="basur">{t('newCitizen.basur')}</SelectItem>
                <SelectItem value="rojava">{t('newCitizen.rojava')}</SelectItem>
                <SelectItem value="rojhelat">{t('newCitizen.rojhelat')}</SelectItem>
                <SelectItem value="kurdistan_a_sor">{t('newCitizen.sorKurdistan')}</SelectItem>
                <SelectItem value="diaspora">{t('newCitizen.diaspora')}</SelectItem>
              </SelectContent>
            </Select>
            {errors.region && <p className="text-xs text-red-500">{t('newCitizen.required')}</p>}
          </div>
        </CardContent>
      </Card>

      {/* Contact & Profession */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Briefcase className="h-5 w-5" />
            {t('newCitizen.contactProfession')}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email" className="flex items-center gap-2">
              <Mail className="h-4 w-4" />
              E-mail *
            </Label>
            <Input
              type="email"
              {...register('email', { required: true, pattern: /^\S+@\S+$/i })}
              placeholder="example@email.com"
            />
            {errors.email && <p className="text-xs text-red-500">{t('newCitizen.validEmailRequired')}</p>}
          </div>

          <div className="space-y-2">
            <Label htmlFor="profession">{t('newCitizen.yourProfession')} *</Label>
            <Input {...register('profession', { required: true })} placeholder="e.g., Mamosta, Bijîşk, Xebatkar..." />
            {errors.profession && <p className="text-xs text-red-500">{t('newCitizen.required')}</p>}
          </div>
        </CardContent>
      </Card>

      {/* Referral */}
      <Card className="bg-purple-500/10 border-purple-500/30">
        <CardHeader>
          <CardTitle>{t('newCitizen.referralCode')}</CardTitle>
          <CardDescription>
            {t('newCitizen.referralDesc')}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Input {...register('referralCode')} placeholder={t('newCitizen.referralPlaceholder')} className="placeholder:text-gray-500 placeholder:opacity-50" />
          <p className="text-xs text-muted-foreground mt-2">
            {t('newCitizen.referralNote')}
          </p>
        </CardContent>
      </Card>

      {/* Deposit Notice */}
      <Card className="bg-yellow-500/10 border-yellow-500/30">
        <CardContent className="pt-6">
          <div className="flex items-start gap-3">
            <AlertTriangle className="h-5 w-5 text-yellow-500 mt-0.5 flex-shrink-0" />
            <div className="text-sm">
              <p className="font-semibold text-yellow-600">{t('newCitizen.depositRequired')}</p>
              <p className="text-muted-foreground mt-1">
                {t('newCitizen.depositDesc')}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Terms Agreement */}
      <Card>
        <CardContent className="pt-6 space-y-4">
          <div className="flex items-start space-x-2">
            <Checkbox id="terms" checked={agreed} onCheckedChange={(checked) => setAgreed(checked as boolean)} />
            <Label htmlFor="terms" className="text-sm leading-relaxed cursor-pointer">
              {t('newCitizen.termsAgree')}
            </Label>
          </div>

          {error && (
            <Alert variant="destructive">
              <AlertTriangle className="h-4 w-4" />
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <Button type="submit" disabled={submitting || !agreed} className="w-full" size="lg">
            {submitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                {t('newCitizen.submitting')}
              </>
            ) : (
              t('newCitizen.submitApplication')
            )}
          </Button>
        </CardContent>
      </Card>
    </form>
  );
};
