import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ExistingCitizenAuth } from './ExistingCitizenAuth';
import { NewCitizenApplication } from './NewCitizenApplication';

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

export const CitizenshipModal: React.FC<CitizenshipModalProps> = ({ isOpen, onClose, referrerAddress }) => {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState<'existing' | 'new'>(referrerAddress ? 'new' : 'existing');

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-2xl">
            🏛️ {t('citizenModal.title')}
          </DialogTitle>
          <DialogDescription>
            {referrerAddress
              ? t('citizenModal.invitedDesc')
              : t('citizenModal.defaultDesc')}
          </DialogDescription>
        </DialogHeader>

        <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'existing' | 'new')} className="w-full">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="existing">{t('citizenModal.existingTab')}</TabsTrigger>
            <TabsTrigger value="new">{t('citizenModal.newTab')}</TabsTrigger>
          </TabsList>

          <TabsContent value="existing" className="mt-6">
            <ExistingCitizenAuth onClose={onClose} />
          </TabsContent>

          <TabsContent value="new" className="mt-6">
            <NewCitizenApplication onClose={onClose} referrerAddress={referrerAddress} />
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
};
