import { CheckSquare } from 'lucide-react';
import React, { useState } from 'react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetFooter,
    SheetHeader,
    SheetTitle,
} from '@/components/ui/sheet';

interface Task {
    id: number;
    title: string;
    project: string;
    priority: string;
    dueDate: string;
}

interface EditTaskSheetProps {
    task: Task | null;
    open: boolean;
    onOpenChange: (open: boolean) => void;
    projects: string[];
}

export function EditTaskSheet({
    task,
    open,
    onOpenChange,
    projects,
}: EditTaskSheetProps) {
    return (
        <Sheet open={open} onOpenChange={onOpenChange}>
            <SheetContent className="overflow-y-auto border-l bg-white sm:max-w-[500px] dark:bg-neutral-900">
                {task && (
                    <EditTaskForm
                        key={task.id}
                        task={task}
                        projects={projects}
                        onClose={() => onOpenChange(false)}
                    />
                )}
            </SheetContent>
        </Sheet>
    );
}

function EditTaskForm({
    task,
    projects,
    onClose,
}: {
    task: Task;
    projects: string[];
    onClose: () => void;
}) {
    const [isLoading, setIsLoading] = useState(false);
    const [formData, setFormData] = useState({
        title: task.title,
        project: task.project,
        priority: task.priority.toLowerCase(),
        dueDate: task.dueDate.includes(',') ? '2024-10-24' : task.dueDate, // Simple mock date format fix
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        setIsLoading(true);
        setTimeout(() => {
            setIsLoading(false);
            onClose();
        }, 1000);
    };

    return (
        <>
            <SheetHeader className="text-left">
                <SheetTitle className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
                    <CheckSquare className="h-6 w-6 text-indigo-500" />
                    Edit Task
                </SheetTitle>
                <SheetDescription className="text-neutral-500 dark:text-neutral-400">
                    Update the task details and assign it to a project.
                </SheetDescription>
            </SheetHeader>

            <form onSubmit={handleSubmit} className="space-y-5 py-4">
                <div className="space-y-2">
                    <Label
                        htmlFor="edit-task-title"
                        className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                    >
                        Task Title
                    </Label>
                    <Input
                        id="edit-task-title"
                        value={formData.title}
                        onChange={(e) =>
                            setFormData({ ...formData, title: e.target.value })
                        }
                        className="h-11 rounded-xl border-neutral-200 bg-neutral-50 focus:ring-2 focus:ring-blue-500/20 dark:border-neutral-800 dark:bg-neutral-800/50"
                        required
                    />
                </div>

                <div className="space-y-2">
                    <Label
                        htmlFor="edit-task-project"
                        className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                    >
                        Project
                    </Label>
                    <Select
                        value={formData.project}
                        onValueChange={(val) =>
                            setFormData({ ...formData, project: val })
                        }
                    >
                        <SelectTrigger
                            id="edit-task-project"
                            className="h-11 w-full rounded-xl border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-800/50"
                        >
                            <SelectValue placeholder="Select project" />
                        </SelectTrigger>
                        <SelectContent className="rounded-xl border-neutral-200 dark:border-neutral-800">
                            {projects.map((p) => (
                                <SelectItem key={p} value={p}>
                                    {p}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>

                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div className="space-y-2">
                        <Label
                            htmlFor="edit-task-priority"
                            className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                        >
                            Priority
                        </Label>
                        <Select
                            value={formData.priority}
                            onValueChange={(val) =>
                                setFormData({ ...formData, priority: val })
                            }
                        >
                            <SelectTrigger
                                id="edit-task-priority"
                                className="h-11 w-full rounded-xl border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-800/50"
                            >
                                <SelectValue placeholder="Select priority" />
                            </SelectTrigger>
                            <SelectContent className="rounded-xl border-neutral-200 dark:border-neutral-800">
                                <SelectItem value="low">Low</SelectItem>
                                <SelectItem value="medium">Medium</SelectItem>
                                <SelectItem value="high">High</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                    <div className="space-y-2">
                        <Label
                            htmlFor="edit-task-date"
                            className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                        >
                            Due Date
                        </Label>
                        <Input
                            id="edit-task-date"
                            type="date"
                            value={formData.dueDate}
                            onChange={(e) =>
                                setFormData({
                                    ...formData,
                                    dueDate: e.target.value,
                                })
                            }
                            className="h-11 rounded-xl border-neutral-200 bg-neutral-50 focus:ring-2 focus:ring-blue-500/20 dark:border-neutral-800 dark:bg-neutral-800/50"
                            required
                        />
                    </div>
                </div>

                <SheetFooter className="mt-8 gap-3 border-t pt-6 sm:flex-col sm:space-x-0">
                    <Button
                        type="submit"
                        disabled={isLoading}
                        className="h-12 w-full rounded-xl border-none bg-indigo-600 font-bold text-white shadow-lg shadow-indigo-500/25 hover:bg-indigo-700"
                    >
                        {isLoading ? 'Saving...' : 'Save Changes'}
                    </Button>
                    <Button
                        type="button"
                        variant="ghost"
                        onClick={onClose}
                        className="h-12 w-full rounded-xl font-medium text-neutral-500 hover:text-foreground"
                    >
                        Cancel and Close
                    </Button>
                </SheetFooter>
            </form>
        </>
    );
}