import { X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { CreateFiscalYearDTO } from '@/types/budget';

interface FiscalYearFormModalProps {
    open: boolean;
    onClose: () => void;
    onSubmit: (data: CreateFiscalYearDTO) => Promise<void>;
}

export function FiscalYearFormModal({ open, onClose, onSubmit }: FiscalYearFormModalProps) {
    if (!open) return null;

    const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        const data: CreateFiscalYearDTO = {
            year: parseInt(formData.get('year') as string),
            startDate: formData.get('startDate') as string,
            endDate: formData.get('endDate') as string,
        };
        await onSubmit(data);
    };

    return (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
            <div className="bg-white rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
                <div className="px-6 py-4 border-b flex justify-between items-center bg-gray-50">
                    <h3 className="text-lg font-bold text-gray-900">Novo Exercício Fiscal</h3>
                    <button
                        onClick={onClose}
                        className="text-gray-400 hover:text-gray-600"
                    >
                        <X className="w-5 h-5" />
                    </button>
                </div>
                <form onSubmit={handleFormSubmit} className="p-6 space-y-4">
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Ano
                        </label>
                        <input
                            type="number"
                            name="year"
                            required
                            min="2000"
                            max="2100"
                            defaultValue={new Date().getFullYear()}
                            className="w-full border rounded-lg p-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Data de Início
                        </label>
                        <input
                            type="date"
                            name="startDate"
                            required
                            className="w-full border rounded-lg p-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Data de Fim
                        </label>
                        <input
                            type="date"
                            name="endDate"
                            required
                            className="w-full border rounded-lg p-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
                        />
                    </div>
                    <div className="pt-4 flex gap-3">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={onClose}
                            className="flex-1"
                        >
                            Cancelar
                        </Button>
                        <Button type="submit" className="flex-1">
                            Criar
                        </Button>
                    </div>
                </form>
            </div>
        </div>
    );
}
