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

const NewWithModal = ({ clients }: { clients: any[] }) => {
    const [open, setOpen] = useState(false);

    const { post, data, setData, reset } = useForm({
        clients_id: '',
        name: '',
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post(route('integracoes.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 Integração</TooltipContent>
            </Tooltip>

            <Dialog open={open} onOpenChange={setOpen}>
                <DialogContent className="bg-card border border-border rounded-2xl shadow-sm p-0 overflow-hidden sm:max-w-lg">
                    <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">
                            <Zap 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 Integração
                        </DialogTitle>
                    </DialogHeader>

                    <form onSubmit={handleSubmit} className="px-6 py-5 flex flex-col gap-4">
                        <div className="flex flex-col gap-1.5">
                            <Label htmlFor="name" className="text-xs font-medium text-muted-foreground">
                                Nome
                            </Label>
                            <Input
                                id="name"
                                value={data.name}
                                onChange={(e) => setData('name', e.target.value)}
                                className="text-sm h-8"
                            />
                        </div>

                        <div className="flex flex-col gap-1.5">
                            <Label htmlFor="client" className="text-xs font-medium text-muted-foreground">
                                Empresa
                            </Label>
                            <select
                                id="client"
                                value={data.clients_id}
                                onChange={(e) => setData('clients_id', e.target.value)}
                                className="flex h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                            >
                                <option value="">Selecione a empresa</option>
                                {clients.map(client => (
                                    <option key={client.id} value={client.id}>
                                        {client.name}
                                    </option>
                                ))}
                            </select>
                        </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">
                                Salvar
                            </Button>
                        </div>
                    </form>
                </DialogContent>
            </Dialog>
        </>
    );
};

export default NewWithModal;