import React, { useState } from 'react';
import { CirclePlus, GitBranch } 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 { Button } from '@/components/ui/button';
import { router } from '@inertiajs/react';

const NewFlowWithModal = ({ flows, clientId, intEnterId }: { flows: any[]; clientId: any; intEnterId: any }) => {
    const [open, setOpen] = useState(false);
    const [selectedFlows, setSelectedFlows] = useState<any[]>([]);
    const [processing, setProcessing] = useState(false);

    const handleCheckboxChange = (flowId: any) => {
        setSelectedFlows(prev =>
            prev.includes(flowId) ? prev.filter(f => f !== flowId) : [...prev, flowId]
        );
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        if (selectedFlows.length === 0) return;
        setProcessing(true);
        router.post(route('fluxos.create'), {
            flows:        selectedFlows,
            clients_id:   clientId,
            int_enter_id: intEnterId,
        }, {
            preserveScroll: true,
            onSuccess: () => {
                setSelectedFlows([]);
                setOpen(false);
            },
            onFinish: () => setProcessing(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>Novo Fluxo</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">
                            <GitBranch size={15} className="text-blue-600 dark:text-blue-400" strokeWidth={2.2} />
                        </span>
                        <DialogTitle className="text-sm font-semibold text-foreground tracking-tight">
                            Novo Fluxo
                        </DialogTitle>
                    </DialogHeader>

                    <form onSubmit={handleSubmit} className="px-6 py-5 flex flex-col gap-4">
                        <div className="flex flex-col gap-3">
                            <p className="text-xs font-medium text-muted-foreground">Selecione os fluxos:</p>
                            <div className="flex flex-col gap-2 max-h-64 overflow-y-auto">
                                {flows.map(flow => (
                                    <label
                                        key={flow.id}
                                        className="flex items-center gap-2.5 px-3 py-2 rounded-lg border border-border hover:bg-muted/40 transition-colors cursor-pointer"
                                    >
                                        <input
                                            type="checkbox"
                                            checked={selectedFlows.includes(flow.id)}
                                            onChange={() => handleCheckboxChange(flow.id)}
                                            className="accent-primary w-3.5 h-3.5"
                                        />
                                        <span className="text-xs text-foreground">{flow.name}</span>
                                    </label>
                                ))}
                            </div>
                        </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 || selectedFlows.length === 0}>
                                {processing ? 'Salvando...' : 'Salvar'}
                            </Button>
                        </div>
                    </form>
                </DialogContent>
            </Dialog>
        </>
    );
};

export default NewFlowWithModal;