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

interface PaymentBatchFormModalProps {
    open: boolean;
    onClose: () => void;
    onSubmit: (data: CreatePaymentBatchDTO) => Promise<void>;
    ministries: { id: string; name: string }[];
}

export function PaymentBatchFormModal({
    open,
    onClose,
    onSubmit,
    ministries,
}: PaymentBatchFormModalProps) {
    if (!open) return null;

    const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        const data: CreatePaymentBatchDTO = {
            periodId: parseInt(formData.get('periodId') as string),
            ministryId: formData.get('ministryId') 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 Lote de Pagamento</h3>
                    <button
                        onClick={onClose}
                        className="text-gray-400 hover:text-gray-600"
                    >
                        ×
                    </button>
                </div>
                <form onSubmit={handleFormSubmit} className="p-6 space-y-4">
                    <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                            Período (YYYYMM) *
                        </label>
                        <input
                            type="number"
                            name="periodId"
                            required
                            placeholder="202401"
                            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">
                            Ministério *
                        </label>
                        <select
                            name="ministryId"
                            required
                            className="w-full border rounded-lg p-2 text-sm focus:ring-2 focus:ring-primary focus:outline-none"
                        >
                            <option value="">Selecione...</option>
                            {ministries.map((m) => (
                                <option key={m.id} value={m.id}>
                                    {m.name}
                                </option>
                            ))}
                        </select>
                    </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>
    );
}
