import { useEffect, useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { usePezkuwi } from '@/contexts/PezkuwiContext';
import { useDashboard } from '@/contexts/DashboardContext';
import { FileText, Building2, Home, Bell, ChevronLeft, ChevronRight, Upload, User, Sun, ShieldCheck, Pencil } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import { getUserRoleCategories } from '@pezkuwi/lib/tiki';

// LocalStorage key prefix for citizen profile data
const CITIZEN_PROFILE_KEY = 'citizen_profile_';

interface CitizenProfileData {
  fullName: string;
  fatherName: string;
  location: string;
  photoUrl: string | null;
}

// Mock announcements data
const announcements = [
  {
    id: 1,
    title: "Bijî Azadiya Kurdistanê! (Long Live Free Kurdistan!)",
    description: "Bi serkeftina sîstema me ya dijîtal, em gaveke din li pêşiya azadiya xwe datînin. (With the success of our digital system, we take another step towards our freedom.)",
    date: "2025-01-19"
  },
  {
    id: 2,
    title: "Daxuyaniya Nû ya Hikûmetê (New Government Announcement)",
    description: "Pergalên nû yên xizmetguzariya dijîtal ji bo hemû welatiyan aktîv bûn. (New digital service systems have been activated for all citizens.)",
    date: "2025-01-18"
  },
  {
    id: 3,
    title: "Civîna Giştî ya Welatiyên (Citizens General Assembly)",
    description: "Civîna mehane ya welatiyên di 25ê vê mehê de pêk tê. Beşdarî bibin! (Monthly citizens assembly takes place on the 25th of this month. Participate!)",
    date: "2025-01-17"
  }
];

export default function Citizens() {
  const { selectedAccount } = usePezkuwi();
  const navigate = useNavigate();
  const { toast } = useToast();
  const { t } = useTranslation();
  const { nftDetails, citizenNumber, loading } = useDashboard();
  const [currentAnnouncementIndex, setCurrentAnnouncementIndex] = useState(0);
  const [uploadingPhoto, setUploadingPhoto] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [showGovDialog, setShowGovDialog] = useState(false);
  const [showCitizensDialog, setShowCitizensDialog] = useState(false);
  const [citizenNumberInput, setCitizenNumberInput] = useState('');
  const [isVerifying, setIsVerifying] = useState(false);
  const [dialogType, setDialogType] = useState<'gov' | 'citizens'>('gov');

  // Citizen profile from localStorage
  const [citizenProfile, setCitizenProfile] = useState<CitizenProfileData>({
    fullName: '',
    fatherName: '',
    location: '',
    photoUrl: null
  });
  const [showEditModal, setShowEditModal] = useState(false);
  const [editForm, setEditForm] = useState<CitizenProfileData>({
    fullName: '',
    fatherName: '',
    location: '',
    photoUrl: null
  });

  // Load citizen profile from localStorage on mount
  useEffect(() => {
    if (selectedAccount?.address) {
      const storageKey = CITIZEN_PROFILE_KEY + selectedAccount.address;
      const savedProfile = localStorage.getItem(storageKey);
      if (savedProfile) {
        try {
          const parsed = JSON.parse(savedProfile) as CitizenProfileData;
          setCitizenProfile(parsed);
          setEditForm(parsed);
        } catch (e) {
          console.error('Error parsing saved profile:', e);
        }
      } else {
        // No saved profile - prompt user to fill in their info
        setShowEditModal(true);
      }
    }
  }, [selectedAccount?.address]);

  // Save citizen profile to localStorage
  const saveCitizenProfile = (data: CitizenProfileData) => {
    if (selectedAccount?.address) {
      const storageKey = CITIZEN_PROFILE_KEY + selectedAccount.address;
      localStorage.setItem(storageKey, JSON.stringify(data));
      setCitizenProfile(data);
      toast({
        title: t('citizens.profileSaved'),
        description: t('citizens.profileSavedDesc')
      });
    }
  };

  const handlePhotoUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    if (!event.target.files || !event.target.files[0]) {
      return;
    }

    if (!selectedAccount?.address) {
      toast({
        title: t('citizens.walletNotConnected'),
        description: t('citizens.connectWallet'),
        variant: "destructive"
      });
      return;
    }

    const file = event.target.files[0];

    // Validate file type
    if (!file.type.startsWith('image/')) {
      toast({
        title: t('citizens.fileError'),
        description: t('citizens.uploadImageOnly'),
        variant: "destructive"
      });
      return;
    }

    setUploadingPhoto(true);

    try {
      // Load image, resize to fit ID card photo area, compress to JPEG
      const dataUrl = await new Promise<string>((resolve, reject) => {
        const img = new Image();
        img.onload = () => {
          const MAX_DIM = 400; // max width or height in px
          let { width, height } = img;

          // Scale down if larger than MAX_DIM
          if (width > MAX_DIM || height > MAX_DIM) {
            const ratio = Math.min(MAX_DIM / width, MAX_DIM / height);
            width = Math.round(width * ratio);
            height = Math.round(height * ratio);
          }

          const canvas = document.createElement('canvas');
          canvas.width = width;
          canvas.height = height;
          const ctx = canvas.getContext('2d');
          if (!ctx) { reject(new Error('Canvas not supported')); return; }

          ctx.drawImage(img, 0, 0, width, height);

          // Compress as JPEG, start at 0.85 quality, reduce if still too large
          let quality = 0.85;
          let result = canvas.toDataURL('image/jpeg', quality);

          // Ensure it fits in localStorage (target < 500KB base64)
          while (result.length > 500_000 && quality > 0.3) {
            quality -= 0.1;
            result = canvas.toDataURL('image/jpeg', quality);
          }

          resolve(result);
        };
        img.onerror = () => reject(new Error('Failed to load image'));
        img.src = URL.createObjectURL(file);
      });

      // Save to localStorage with profile
      const updatedProfile = { ...citizenProfile, photoUrl: dataUrl };
      saveCitizenProfile(updatedProfile);

      toast({
        title: t('citizens.photoUploaded'),
        description: t('citizens.photoUploadedDesc')
      });
    } catch (error) {
      console.error('Photo upload error:', error);
      toast({
        title: t('citizens.uploadError'),
        description: error instanceof Error ? error.message : t('citizens.couldNotUpload'),
        variant: "destructive"
      });
    } finally {
      setUploadingPhoto(false);
    }
  };

  // Handle case where no wallet is connected
  if (!selectedAccount && !loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-700 via-white to-red-600 flex items-center justify-center">
        <Card className="bg-white/90 backdrop-blur max-w-md">
          <CardContent className="pt-6">
            <div className="text-center space-y-4">
              <p className="text-xl font-bold text-red-700">{t('citizens.connectWalletMsg')}</p>
              <Button
                onClick={() => navigate('/')}
                className="bg-red-600 hover:bg-red-700 text-white"
              >
                <Home className="mr-2 h-4 w-4" />
                {t('citizens.backToHome')}
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  const handleCitizensIssue = () => {
    // Check if user has Tiki NFT
    if (!nftDetails.citizenNFT) {
      toast({
        title: t('citizens.noAccess'),
        description: t('citizens.noAccessDesc'),
        variant: "destructive"
      });
      return;
    }

    // Show citizen number verification dialog for Citizens Issues
    setDialogType('citizens');
    setShowCitizensDialog(true);
  };

  const handleGovEntrance = () => {
    // Check if user has Tiki NFT
    if (!nftDetails.citizenNFT) {
      toast({
        title: t('citizens.noAccess'),
        description: t('citizens.noAccessDesc'),
        variant: "destructive"
      });
      return;
    }

    // Navigate directly - GovernmentEntrance will handle verification
    navigate('/citizens/government');
  };

  const handleVerifyCitizenNumber = () => {
    setIsVerifying(true);

    // Construct the full citizen number format: #42-0-123456
    const actualCitizenNumber = nftDetails.citizenNFT
      ? `#${nftDetails.citizenNFT.collectionId}-${nftDetails.citizenNFT.itemId}-${citizenNumber}`
      : '';

    // Clean and compare
    const inputCleaned = citizenNumberInput.trim().toUpperCase();

    if (inputCleaned === actualCitizenNumber.toUpperCase()) {
      setShowGovDialog(false);
      setShowCitizensDialog(false);
      setCitizenNumberInput('');

      if (dialogType === 'gov') {
        toast({
          title: t('citizens.authSuccess'),
          description: t('citizens.govAuthDesc'),
        });
        navigate('/citizens/government');
      } else {
        toast({
          title: t('citizens.authSuccess'),
          description: t('citizens.citizenAuthDesc'),
        });
        navigate('/citizens/issues');
      }
    } else {
      toast({
        title: t('citizens.wrongNumber'),
        description: t('citizens.wrongNumberDesc'),
        variant: "destructive"
      });
    }

    setIsVerifying(false);
  };

  const nextAnnouncement = () => {
    setCurrentAnnouncementIndex((prev) => (prev + 1) % announcements.length);
  };

  const prevAnnouncement = () => {
    setCurrentAnnouncementIndex((prev) => (prev - 1 + announcements.length) % announcements.length);
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-700 via-white to-red-600 flex items-center justify-center">
        <Card className="bg-white/90 backdrop-blur">
          <CardContent className="pt-6">
            <div className="flex items-center space-x-4">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-red-600"></div>
              <p className="text-gray-700 font-medium">{t('citizens.loading')}</p>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  // Get role categories for display
  const roleCategories = getUserRoleCategories(nftDetails.roleNFTs) || {
    government: [],
    citizen: [],
    business: [],
    judicial: []
  };
  if (import.meta.env.DEV) console.log('Role categories:', roleCategories);

  const currentAnnouncement = announcements[currentAnnouncementIndex];

  return (
    <div className="min-h-screen bg-gradient-to-br from-green-700 via-white to-red-600">
      <div className="container mx-auto px-4 py-8">
        {/* Back Button */}
        <div className="mb-6">
          <Button
            onClick={() => navigate('/')}
            variant="outline"
            className="bg-red-600 hover:bg-red-700 border-yellow-400 border-2 text-white font-semibold shadow-lg"
          >
            <Home className="mr-2 h-4 w-4" />
            {t('citizens.backToHome')}
          </Button>
        </div>

        {/* Title Section */}
        <div className="text-center mb-4 sm:mb-8">
          <h1 className="text-2xl sm:text-4xl md:text-6xl font-bold text-red-700 mb-3 drop-shadow-lg">
            {t('citizens.portalTitle')}
          </h1>
          <p className="text-base sm:text-xl text-gray-800 font-semibold drop-shadow-md">
            {t('citizens.digitalKurdistan')}
          </p>
        </div>

        {/* Announcements Widget - Modern Carousel */}
        <div className="max-w-4xl mx-auto mb-6 sm:mb-8">
          <div className="relative bg-gradient-to-r from-red-600 via-red-500 to-yellow-500 rounded-3xl shadow-xl overflow-hidden">
            <div className="absolute inset-0 bg-black/10"></div>
            <div className="relative p-4 sm:p-8">
              <div className="flex items-center justify-between">
                <button
                  onClick={prevAnnouncement}
                  className="z-10 text-white/80 hover:text-white transition-all hover:scale-110"
                >
                  <ChevronLeft className="h-6 w-6 sm:h-8 sm:w-8" />
                </button>

                <div className="flex-1 text-center px-3 sm:px-6">
                  <div className="flex items-center justify-center mb-3">
                    <Bell className="h-5 w-5 sm:h-7 sm:w-7 text-white mr-2 sm:mr-3 animate-pulse" />
                    <h3 className="text-lg sm:text-3xl font-bold text-white">{t('citizens.announcements')}</h3>
                  </div>
                  <h4 className="text-base sm:text-xl font-bold text-white mb-2 sm:mb-3">{currentAnnouncement.title}</h4>
                  <p className="text-white/90 text-sm sm:text-base leading-relaxed max-w-2xl mx-auto">{currentAnnouncement.description}</p>
                  <p className="text-white/70 text-sm mt-3">{currentAnnouncement.date}</p>

                  {/* Modern dots indicator */}
                  <div className="flex justify-center gap-3 mt-5">
                    {announcements.map((_, idx) => (
                      <button
                        key={idx}
                        onClick={() => setCurrentAnnouncementIndex(idx)}
                        className={`h-2.5 rounded-full transition-all duration-300 ${
                          idx === currentAnnouncementIndex
                            ? 'bg-white w-8'
                            : 'bg-white/40 w-2.5 hover:bg-white/60'
                        }`}
                      />
                    ))}
                  </div>
                </div>

                <button
                  onClick={nextAnnouncement}
                  className="z-10 text-white/80 hover:text-white transition-all hover:scale-110"
                >
                  <ChevronRight className="h-6 w-6 sm:h-8 sm:w-8" />
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Digital Citizen ID Card - Flow Layout */}
        <div className="max-w-lg sm:max-w-2xl mx-auto mb-6 sm:mb-8">
          <div
            className="relative rounded-2xl overflow-hidden shadow-2xl"
            style={{
              background: 'linear-gradient(135deg, #166534 0%, #16a34a 15%, #ffffff 35%, #ffffff 65%, #dc2626 85%, #991b1b 100%)',
            }}
          >
            {/* Security Pattern Overlay */}
            <div
              className="absolute inset-0 opacity-[0.03] pointer-events-none"
              style={{
                backgroundImage: `repeating-linear-gradient(
                  45deg,
                  transparent,
                  transparent 10px,
                  #000 10px,
                  #000 11px
                )`
              }}
            />

            {/* Top Header Band */}
            <div className="relative bg-gradient-to-r from-green-800 via-green-700 to-green-800 py-2 sm:py-3 px-3 sm:px-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-1.5 sm:gap-2">
                  <div className="relative">
                    <Sun className="h-6 w-6 sm:h-8 sm:w-8 text-yellow-400 drop-shadow-lg" />
                    <div className="absolute inset-0 animate-pulse">
                      <Sun className="h-6 w-6 sm:h-8 sm:w-8 text-yellow-300 opacity-50" />
                    </div>
                  </div>
                  <div>
                    <div className="text-white font-bold text-xs sm:text-sm tracking-wider">KOMARÎ KURDISTAN</div>
                    <div className="text-green-200 text-[8px] sm:text-[10px] tracking-wide">REPUBLIC OF KURDISTAN</div>
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-yellow-400 font-bold text-[10px] sm:text-xs">NASNAMEYA DÎJÎTAL</div>
                  <div className="text-green-200 text-[8px] sm:text-[10px]">DIGITAL IDENTITY CARD</div>
                </div>
              </div>
            </div>

            {/* Main Content Area - Flow layout */}
            <div className="relative px-3 sm:px-5 py-3 sm:py-4">
              <div className="flex flex-row gap-3 sm:gap-4">

                {/* Left Section - Photo */}
                <div className="w-20 sm:w-28 flex-shrink-0">
                  <div className="relative w-full aspect-[3/4] group">
                    <div className="absolute inset-0 bg-gradient-to-br from-green-600 to-red-600 rounded-lg p-[2px]">
                      <div className="w-full h-full bg-white rounded-lg overflow-hidden flex items-center justify-center">
                        {citizenProfile.photoUrl ? (
                          <img src={citizenProfile.photoUrl} alt="Citizen Photo" className="w-full h-full object-cover" />
                        ) : (
                          <div className="w-full h-full bg-gray-100 flex items-center justify-center">
                            <User className="w-8 h-8 sm:w-12 sm:h-12 text-gray-300" />
                          </div>
                        )}
                      </div>
                    </div>
                    {/* Upload Overlay */}
                    <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center">
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() => fileInputRef.current?.click()}
                        disabled={uploadingPhoto}
                        className="text-white text-xs px-2 py-1 h-auto hover:bg-white/20"
                      >
                        {uploadingPhoto ? (
                          <div className="animate-spin h-4 w-4 border-2 border-white rounded-full border-t-transparent" />
                        ) : (
                          <>
                            <Upload className="h-3 w-3 sm:h-4 sm:w-4 mr-1" />
                            <span className="text-[10px] sm:text-xs">{t('citizens.upload')}</span>
                          </>
                        )}
                      </Button>
                    </div>
                    <input
                      ref={fileInputRef}
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={handlePhotoUpload}
                    />
                  </div>
                </div>

                {/* Middle + Right Section */}
                <div className="flex-1 min-w-0 flex flex-col justify-between">
                  {/* Edit Button */}
                  <div className="flex justify-end mb-1">
                    <button
                      onClick={() => {
                        setEditForm(citizenProfile);
                        setShowEditModal(true);
                      }}
                      className="bg-white/90 hover:bg-white rounded-full p-1 sm:p-1.5 shadow-md transition-colors"
                      title={t('citizens.editProfile')}
                    >
                      <Pencil className="h-3 w-3 text-gray-600" />
                    </button>
                  </div>

                  {/* Personal Info */}
                  <div className="space-y-1.5 sm:space-y-2">
                    <div className="bg-white/80 backdrop-blur-sm rounded px-2 sm:px-3 py-1 sm:py-2 border-l-3 sm:border-l-4 border-green-600 shadow-sm">
                      <div className="text-[8px] sm:text-[10px] text-gray-500 uppercase tracking-wider font-medium">{t('citizens.nameLabel')}</div>
                      <div className="text-xs sm:text-sm font-bold text-gray-800 truncate">{citizenProfile.fullName || '...'}</div>
                    </div>
                    <div className="bg-white/80 backdrop-blur-sm rounded px-2 sm:px-3 py-1 sm:py-2 border-l-3 sm:border-l-4 border-yellow-500 shadow-sm">
                      <div className="text-[8px] sm:text-[10px] text-gray-500 uppercase tracking-wider font-medium">{t('citizens.fatherNameLabel')}</div>
                      <div className="text-xs sm:text-sm font-bold text-gray-800 truncate">{citizenProfile.fatherName || '...'}</div>
                    </div>
                    <div className="bg-white/80 backdrop-blur-sm rounded px-2 sm:px-3 py-1 sm:py-2 border-l-3 sm:border-l-4 border-red-600 shadow-sm">
                      <div className="text-[8px] sm:text-[10px] text-gray-500 uppercase tracking-wider font-medium">{t('citizens.locationLabel')}</div>
                      <div className="text-xs sm:text-sm font-bold text-gray-800 truncate">{citizenProfile.location || '...'}</div>
                    </div>
                  </div>

                  {/* NFT & Citizen Number Badges */}
                  <div className="flex flex-row gap-1.5 sm:gap-2 mt-2 sm:mt-3">
                    <div className="bg-gradient-to-br from-green-700 to-green-900 rounded-lg p-1.5 sm:p-2 text-center shadow-lg flex-1">
                      <div className="text-[7px] sm:text-[9px] text-green-200 font-medium uppercase">NFT ID</div>
                      <div className="text-white font-bold text-[10px] sm:text-xs mt-0.5">
                        {nftDetails.citizenNFT ? `#${nftDetails.citizenNFT.collectionId}-${nftDetails.citizenNFT.itemId}` : 'N/A'}
                      </div>
                    </div>
                    <div className="bg-gradient-to-br from-red-700 to-red-900 rounded-lg p-1.5 sm:p-2 text-center shadow-lg flex-1">
                      <div className="text-[7px] sm:text-[9px] text-red-200 font-medium uppercase">Citizen No</div>
                      <div className="text-white font-bold text-[9px] sm:text-[11px] mt-0.5">
                        {nftDetails.citizenNFT ? `#${nftDetails.citizenNFT.collectionId}-${nftDetails.citizenNFT.itemId}-${citizenNumber}` : 'N/A'}
                      </div>
                    </div>
                    <div className="flex items-center gap-0.5 bg-white/90 rounded-full px-1.5 sm:px-2 py-1 shadow self-center">
                      <ShieldCheck className="h-2.5 w-2.5 sm:h-3 sm:w-3 text-green-600" />
                      <span className="text-[7px] sm:text-[9px] font-semibold text-green-700">VERIFIED</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Bottom Footer Band */}
            <div className="relative bg-gradient-to-r from-red-800 via-red-700 to-red-800 py-1.5 sm:py-2 px-3 sm:px-4">
              <div className="flex items-center justify-between text-[7px] sm:text-[9px]">
                <div className="text-red-200">
                  <span className="font-medium">Blockchain:</span> Pezkuwichain People
                </div>
                <div className="text-yellow-400 font-bold tracking-wider">
                  BIJÎ KURDISTAN
                </div>
                <div className="text-red-200">
                  <span className="font-medium">Type:</span> Welati NFT
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Main Entrance Cards - Compact 2-column buttons */}
        <div className="grid grid-cols-2 gap-3 sm:gap-4 max-w-5xl mx-auto mb-6 sm:mb-8">
          {/* LEFT: Citizens Issues */}
          <Card
            className="bg-white/95 backdrop-blur border-2 border-purple-400 hover:border-purple-600 transition-all shadow-lg cursor-pointer group sm:hover:scale-105"
            onClick={handleCitizensIssue}
          >
            <CardContent className="p-3 sm:p-4 flex flex-col items-center justify-center">
              <div className="mb-2 sm:mb-3">
                <div className="bg-purple-500 w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg">
                  <FileText className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
                </div>
              </div>
              <h2 className="text-sm sm:text-lg font-bold text-purple-700 text-center">
                {t('citizens.citizenIssues')}
              </h2>
            </CardContent>
          </Card>

          {/* RIGHT: Gov Entrance */}
          <Card
            className="bg-white/95 backdrop-blur border-2 border-green-400 hover:border-green-600 transition-all shadow-lg cursor-pointer group sm:hover:scale-105"
            onClick={handleGovEntrance}
          >
            <CardContent className="p-3 sm:p-4 flex flex-col items-center justify-center">
              <div className="mb-2 sm:mb-3">
                <div className="bg-green-600 w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-lg">
                  <Building2 className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
                </div>
              </div>
              <h2 className="text-sm sm:text-lg font-bold text-green-700 text-center">
                {t('citizens.govEntrance')}
              </h2>
            </CardContent>
          </Card>
        </div>

      {/* Government Entrance - Citizen Number Verification Dialog */}
      <Dialog open={showGovDialog} onOpenChange={setShowGovDialog}>
        <DialogContent className="sm:max-w-md bg-gradient-to-br from-green-700 via-white to-red-600">
          <DialogHeader>
            <DialogTitle className="text-center text-2xl font-bold text-red-700">
              <div className="flex items-center justify-center mb-4">
                <Sun className="h-16 w-16 text-yellow-500 animate-spin" style={{ animationDuration: '8s' }} />
              </div>
              {t('citizens.govDialogTitle')}
            </DialogTitle>
            <DialogDescription className="text-center text-gray-700 font-medium">
              {t('citizens.enterCitizenNumber')}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <label className="text-sm font-semibold text-gray-800">
                {t('citizens.citizenNumberLabel')}
              </label>
              <Input
                type="text"
                placeholder="#42-0-123456"
                value={citizenNumberInput}
                onChange={(e) => setCitizenNumberInput(e.target.value)}
                className="text-center font-mono text-lg border-2 border-green-400"
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && !isVerifying) {
                    handleVerifyCitizenNumber();
                  }
                }}
              />
            </div>
            <Button
              onClick={handleVerifyCitizenNumber}
              disabled={isVerifying || !citizenNumberInput.trim()}
              className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3"
            >
              <ShieldCheck className="mr-2 h-5 w-5" />
              {isVerifying ? t('citizens.verifying') : t('citizens.enter')}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* Citizens Issues - Citizen Number Verification Dialog */}
      <Dialog open={showCitizensDialog} onOpenChange={setShowCitizensDialog}>
        <DialogContent className="sm:max-w-md bg-gradient-to-br from-green-700 via-white to-red-600">
          <DialogHeader>
            <DialogTitle className="text-center text-2xl font-bold text-purple-700">
              <div className="flex items-center justify-center mb-4">
                <Sun className="h-16 w-16 text-yellow-500 animate-spin" style={{ animationDuration: '8s' }} />
              </div>
              {t('citizens.citizenDialogTitle')}
            </DialogTitle>
            <DialogDescription className="text-center text-gray-700 font-medium">
              {t('citizens.enterCitizenNumber')}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <label className="text-sm font-semibold text-gray-800">
                {t('citizens.citizenNumberLabel')}
              </label>
              <Input
                type="text"
                placeholder="#42-0-123456"
                value={citizenNumberInput}
                onChange={(e) => setCitizenNumberInput(e.target.value)}
                className="text-center font-mono text-lg border-2 border-purple-400"
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && !isVerifying) {
                    handleVerifyCitizenNumber();
                  }
                }}
              />
            </div>
            <Button
              onClick={handleVerifyCitizenNumber}
              disabled={isVerifying || !citizenNumberInput.trim()}
              className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3"
            >
              <ShieldCheck className="mr-2 h-5 w-5" />
              {isVerifying ? t('citizens.verifying') : t('citizens.enter')}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* Edit Profile Modal */}
      <Dialog open={showEditModal} onOpenChange={setShowEditModal}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="text-center text-xl font-bold text-gray-800">
              {t('citizens.editProfile')}
            </DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="edit-name" className="text-sm font-medium">
                {t('citizens.nameLabel')}
              </Label>
              <Input
                id="edit-name"
                type="text"
                placeholder={t('citizens.namePlaceholder')}
                value={editForm.fullName}
                onChange={(e) => setEditForm({ ...editForm, fullName: e.target.value })}
                className="border-2"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="edit-father" className="text-sm font-medium">
                {t('citizens.fatherNameLabel')}
              </Label>
              <Input
                id="edit-father"
                type="text"
                placeholder={t('citizens.fatherNamePlaceholder')}
                value={editForm.fatherName}
                onChange={(e) => setEditForm({ ...editForm, fatherName: e.target.value })}
                className="border-2"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="edit-location" className="text-sm font-medium">
                {t('citizens.locationLabel')}
              </Label>
              <Input
                id="edit-location"
                type="text"
                placeholder={t('citizens.locationPlaceholder')}
                value={editForm.location}
                onChange={(e) => setEditForm({ ...editForm, location: e.target.value })}
                className="border-2"
              />
            </div>

            <div className="flex gap-2 pt-4">
              <Button
                variant="outline"
                onClick={() => setShowEditModal(false)}
                className="flex-1"
              >
                {t('common.cancel')}
              </Button>
              <Button
                onClick={() => {
                  saveCitizenProfile(editForm);
                  setShowEditModal(false);
                }}
                className="flex-1 bg-green-600 hover:bg-green-700"
              >
                {t('citizens.save')}
              </Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
      </div>
    </div>
  );
}