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 { useYupForm } from '@/hooks/use-yup-form';
import { projectDuplicateSchema } from '@/lib/validation/project';
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, processing, errors, validateField, submit } =
        useYupForm(projectDuplicateSchema, {
            projectName: `COPY - ${project.name}`,
            copyMembers: true,
            copyTaskAssignees: false,
        });

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

        submit((form) =>
            form.post(projectDuplicate({ project: project.id }).url, {
                onSuccess: () => {
                    toast.success('Project duplicated successfully!');
                    onClose();
                },
                onError: () => {
                    toast.error('Failed to duplicate project.');
                },
            }),
        );
    };

    return (
        <>
            <DialogHeader>
                <DialogTitle className="flex items-center gap-2">
                    <Copy className="h-5 w-5" />
                    Duplicate Project
                </DialogTitle>
                <DialogDescription>
                    Create a new copy of this project along with its task
                    structure.
                </DialogDescription>
            </DialogHeader>

            <form onSubmit={handleSubmit} className="space-y-5 py-4" noValidate>
                <div className="space-y-2">
                    <Label htmlFor="dup-projectName">New Project Name</Label>
                    <Input
                        id="dup-projectName"
                        value={data.projectName}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            setData('projectName', e.target.value.toUpperCase())
                        }
                        onBlur={() => validateField('projectName')}
                        placeholder="ENTER A NEW PROJECT NAME..."
                        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">
                        Duplication Options
                    </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"
                            >
                                Copy Team Members
                            </Label>
                            <p className="text-[11px] text-muted-foreground">
                                Include all team members from the original
                                project in this new project.
                            </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'
                                }
                            >
                                Copy Task Assignees
                            </Label>
                            <p className="text-[11px] text-muted-foreground">
                                Keep tasks assigned to the same people (only
                                available when members are copied).
                            </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>Note:</strong> All task statuses in the new
                        project will automatically be reset to "Waiting".
                        Activity history, comments, and existing attachments
                        will not be copied.
                    </p>
                </div>

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