import { useForm } from '@inertiajs/react';
import { Copy, AlertCircle } from 'lucide-react';
import React from 'react';
import { toast } from 'sonner';

import { duplicate as projectDuplicate } from '@/actions/App/Domains/Project/Http/Controllers/ProjectController';

import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import type { ProjectDuplicateTarget } from '@/types/project';

interface DuplicateProjectDialogProps {
    project: ProjectDuplicateTarget | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export function DuplicateProjectDialog({
    project,
    open,
    onOpenChange,
}: DuplicateProjectDialogProps) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-125 [&>button:last-child]:hidden">
                {project && (
                    <DuplicateProjectForm
                        key={project.id}
                        project={project}
                        onClose={() => onOpenChange(false)}
                    />
                )}
            </DialogContent>
        </Dialog>
    );
}

function DuplicateProjectForm({
    project,
    onClose,
}: {
    project: ProjectDuplicateTarget;
    onClose: () => void;
}) {
    const { data, setData, post, processing, errors } = useForm({
        projectName: `Salinan - ${project.name}`,
        copyMembers: true,
        copyTaskAssignees: false,
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        post(projectDuplicate({ project: project.id }).url, {
            onSuccess: () => {
                toast.success('Proyek berhasil diduplikasi!');
                onClose();
            },
            onError: () => {
                toast.error('Gagal menduplikasi proyek.');
            },
        });
    };

    return (
        <>
            <DialogHeader>
                <DialogTitle className="flex items-center gap-2">
                    <Copy className="h-5 w-5" />
                    Duplikat Proyek
                </DialogTitle>
                <DialogDescription>
                    Buat salinan baru dari proyek ini beserta struktur tugas di
                    dalamnya.
                </DialogDescription>
            </DialogHeader>

            <form onSubmit={handleSubmit} className="space-y-5 py-4">
                <div className="space-y-2">
                    <Label htmlFor="dup-projectName">Nama Proyek Baru</Label>
                    <Input
                        id="dup-projectName"
                        value={data.projectName}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            setData('projectName', e.target.value)
                        }
                        placeholder="Masukkan nama proyek baru..."
                        autoFocus
                        required
                    />
                    {errors.projectName && (
                        <p className="text-xs text-destructive">
                            {errors.projectName}
                        </p>
                    )}
                </div>

                <div className="space-y-3 rounded-lg border border-border/50 bg-muted/30 p-4">
                    <h4 className="mb-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
                        Pilihan Duplikasi
                    </h4>

                    <div className="flex items-start space-x-3">
                        <Checkbox
                            id="copyMembers"
                            checked={data.copyMembers}
                            onCheckedChange={(checked) =>
                                setData('copyMembers', checked === true)
                            }
                        />
                        <div className="grid gap-1.5 leading-none">
                            <Label
                                htmlFor="copyMembers"
                                className="leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                            >
                                Salin Anggota Tim (Members)
                            </Label>
                            <p className="text-[11px] text-muted-foreground">
                                Ikut sertakan semua anggota tim dari proyek asal
                                ke proyek baru ini.
                            </p>
                        </div>
                    </div>

                    <div className="flex items-start space-x-3 pt-1">
                        <Checkbox
                            id="copyTaskAssignees"
                            disabled={!data.copyMembers}
                            checked={data.copyTaskAssignees}
                            onCheckedChange={(checked) =>
                                setData('copyTaskAssignees', checked === true)
                            }
                        />
                        <div className="grid gap-1.5 leading-none">
                            <Label
                                htmlFor="copyTaskAssignees"
                                className={
                                    !data.copyMembers
                                        ? 'leading-none font-medium text-muted-foreground/50'
                                        : 'leading-none font-medium'
                                }
                            >
                                Salin Penerima Tugas (Task Assignees)
                            </Label>
                            <p className="text-[11px] text-muted-foreground">
                                Tetap tugaskan task pada orang yang sama (Hanya
                                bisa jika anggota disalin).
                            </p>
                        </div>
                    </div>
                </div>

                <div className="flex items-start gap-2 rounded-md border border-amber-100 bg-amber-50 p-3 dark:border-amber-900/30 dark:bg-amber-950/20">
                    <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-500" />
                    <p className="text-[11px] leading-relaxed text-amber-800 dark:text-amber-400">
                        <strong>Catatan:</strong> Semua status task pada proyek
                        baru akan secara otomatis diset ulang menjadi "Waiting".
                        History aktivitas, komentar, dan lampiran lama tidak
                        akan disalin.
                    </p>
                </div>

                <DialogFooter className="pt-2">
                    <Button
                        type="button"
                        variant="ghost"
                        onClick={onClose}
                        disabled={processing}
                    >
                        Batal
                    </Button>
                    <Button
                        type="submit"
                        disabled={processing || !data.projectName.trim()}
                    >
                        {processing
                            ? 'Menduplikasi...'
                            : 'Konfirmasi Duplikasi'}
                    </Button>
                </DialogFooter>
            </form>
        </>
    );
}