import React, { useState } from 'react';
import { CirclePlus } from 'lucide-react';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { useForm } from '@inertiajs/react';
import { Building } from 'lucide-react';

const NewWithModal = () => {
    const [open, setOpen] = useState(false);

    const { post, data, setData, reset, errors, processing } = useForm({
        name:         '',
        cnpj:         '',
        razao_social: '',
        email_nfe:    '',
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post(route('organizacoes.create'), {
            preserveScroll: true,
            onSuccess: () => {
                reset();
                setOpen(false);
            },
        });
    };

    return (
        <>
            <Tooltip>
                <TooltipTrigger asChild>
                    <button
                        onClick={() => setOpen(true)}
                        className="bg-blue-50 dark:bg-blue-950 rounded-lg p-1.5 flex items-center hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors cursor-pointer"
                    >
                        <CirclePlus size={15} className="text-blue-600 dark:text-blue-400" strokeWidth={2.2} />
                    </button>
                </TooltipTrigger>
                <TooltipContent>Nova Organização</TooltipContent>
            </Tooltip>

            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent className="bg-card border border-border rounded-2xl shadow-sm max-w-lg w-full p-0 overflow-hidden">
                    <DialogHeader className="flex flex-row items-center gap-2.5 px-6 py-4 border-b border-border">
                        <span className="bg-blue-50 dark:bg-blue-950 rounded-lg p-1.5 flex items-center">
                            <Building size={15} className="text-blue-600 dark:text-blue-400" strokeWidth={2.2} />
                        </span>
                        <DialogTitle className="text-sm font-semibold text-foreground tracking-tight">
                            Nova Organização
                        </DialogTitle>
                    </DialogHeader>

                    <form onSubmit={handleSubmit} className="px-6 py-5 flex flex-col gap-4">
                        {[
                            { field: 'name',         label: 'Nome'         },
                            { field: 'cnpj',         label: 'CNPJ'         },
                            { field: 'razao_social', label: 'Razão Social'  },
                            { field: 'email_nfe',    label: 'E-mail NF-e'  },
                        ].map(({ field, label }) => (
                            <div key={field} className="flex flex-col gap-1.5">
                                <Label htmlFor={field} className="text-xs font-medium text-muted-foreground">
                                    {label}
                                </Label>
                                <Input
                                    id={field}
                                    value={data[field as keyof typeof data]}
                                    onChange={(e) => setData(field as keyof typeof data, e.target.value)}
                                    className={`text-sm h-8 ${errors[field as keyof typeof errors] ? 'border-red-500' : ''}`}
                                />
                                {errors[field as keyof typeof errors] && (
                                    <p className="text-[11px] text-red-500">{errors[field as keyof typeof errors]}</p>
                                )}
                            </div>
                        ))}

                        <div className="flex justify-end gap-2 pt-2 border-t border-border mt-1">
                            <Button
                                type="button"
                                variant="ghost"
                                size="sm"
                                onClick={() => setOpen(false)}
                                className="text-xs text-muted-foreground"
                            >
                                Cancelar
                            </Button>
                            <Button type="submit" size="sm" className="text-xs" disabled={processing}>
                                {processing ? 'Salvando...' : 'Salvar'}
                            </Button>
                        </div>
                    </form>
                </DialogContent>
            </Dialog>
        </>
    );
};

export default NewWithModal;