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 CreateTaskSheetProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    projects: string[];
}

export function CreateTaskSheet({
    open,
    onOpenChange,
    projects,
}: CreateTaskSheetProps) {
    const [isLoading, setIsLoading] = useState(false);
    const [formData, setFormData] = useState({
        title: '',
        project: '',
        priority: 'medium',
        dueDate: '',
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        setIsLoading(true);
        // Mocking API call
        setTimeout(() => {
            setIsLoading(false);
            onOpenChange(false);
            setFormData({
                title: '',
                project: '',
                priority: 'medium',
                dueDate: '',
            });
        }, 1000);
    };

    return (
        <Sheet open={open} onOpenChange={onOpenChange}>
            <SheetContent className="sm:max-w-[500px] border-l bg-white dark:bg-neutral-900 overflow-y-auto">
                <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-blue-500" />
                        New Task
                    </SheetTitle>
                    <SheetDescription className="text-neutral-500 dark:text-neutral-400">
                        Create a new task and assign it to a project. All fields are required.
                    </SheetDescription>
                </SheetHeader>

                <form onSubmit={handleSubmit} className="space-y-5 py-4">
                    <div className="space-y-2">
                        <Label
                            htmlFor="task-title"
                            className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                        >
                            Task Title
                        </Label>
                        <Input
                            id="task-title"
                            placeholder="What needs to be done?"
                            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="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="task-project"
                                className="w-full h-11 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 sm:grid-cols-2 gap-4">
                        <div className="space-y-2">
                            <Label
                                htmlFor="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="task-priority"
                                    className="w-full h-11 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="task-date"
                                className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                            >
                                Due Date
                            </Label>
                            <Input
                                id="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 border-t pt-6 gap-3 sm:flex-col sm:space-x-0">
                        <Button
                            type="submit"
                            disabled={isLoading}
                            className="w-full h-12 rounded-xl font-bold bg-linear-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 border-none shadow-lg shadow-blue-500/25 text-white"
                        >
                            {isLoading ? 'Creating...' : 'Create Task'}
                        </Button>
                        <Button
                            type="button"
                            variant="ghost"
                            onClick={() => onOpenChange(false)}
                            className="w-full h-12 rounded-xl font-medium text-neutral-500 hover:text-foreground"
                        >
                            Cancel and Close
                        </Button>
                    </SheetFooter>
                </form>
            </SheetContent>
        </Sheet>
    );
}