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

import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

interface Project {
    id: number;
    name: string;
    description: string;
    status: string;
    color: string;
}

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

export function EditProjectDialog({ project, open, onOpenChange }: EditProjectDialogProps) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-[500px] border-none shadow-2xl bg-white dark:bg-neutral-900 overflow-hidden">
                {project && (
                    <EditProjectForm 
                        key={project.id} 
                        project={project} 
                        onClose={() => onOpenChange(false)} 
                    />
                )}
            </DialogContent>
        </Dialog>
    );
}

function EditProjectForm({ project, onClose }: { project: Project, onClose: () => void }) {
    const [isLoading, setIsLoading] = useState(false);
    const [formData, setFormData] = useState({
        name: project.name,
        description: project.description,
        status: project.status.toLowerCase().replace(' ', '-'),
        theme: project.color.replace('bg-', '').replace('-500', '')
    });

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

    return (
        <>
            <div className={`absolute top-0 left-0 w-full h-1.5 bg-${formData.theme}-500`} />
            
            <DialogHeader className="pt-4">
                <DialogTitle className="flex items-center gap-2 text-2xl font-bold tracking-tight text-foreground">
                    <Folder className={`h-6 w-6 text-${formData.theme}-500`} />
                    Edit Project
                </DialogTitle>
                <DialogDescription className="text-neutral-500 dark:text-neutral-400">
                    Update the project details and progress information.
                </DialogDescription>
            </DialogHeader>

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

                <div className="space-y-2">
                    <Label htmlFor="edit-description" className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
                        Description
                    </Label>
                    <textarea
                        id="edit-description"
                        rows={3}
                        value={formData.description}
                        onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                        className="flex w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/20 focus-visible:border-blue-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-800/50 dark:focus-visible:ring-blue-500/20"
                    />
                </div>

                <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                        <Label htmlFor="edit-status" className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
                            Status
                        </Label>
                        <Select 
                            value={formData.status} 
                            onValueChange={(val) => setFormData({ ...formData, status: val })}
                        >
                            <SelectTrigger id="edit-status" className="h-11 rounded-xl bg-neutral-50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-800">
                                <SelectValue placeholder="Select status" />
                            </SelectTrigger>
                            <SelectContent className="rounded-xl border-neutral-200 dark:border-neutral-800">
                                <SelectItem value="planning">Planning</SelectItem>
                                <SelectItem value="in-progress">In Progress</SelectItem>
                                <SelectItem value="completed">Completed</SelectItem>
                                <SelectItem value="on-hold">On Hold</SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                    <div className="space-y-2">
                        <Label htmlFor="edit-theme" className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
                            Project Theme
                        </Label>
                        <Select 
                            value={formData.theme} 
                            onValueChange={(val) => setFormData({ ...formData, theme: val })}
                        >
                            <SelectTrigger id="edit-theme" className="h-11 rounded-xl bg-neutral-50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-800">
                                <SelectValue placeholder="Select color" />
                            </SelectTrigger>
                            <SelectContent className="rounded-xl border-neutral-200 dark:border-neutral-800">
                                <SelectItem value="blue">
                                    <div className="flex items-center gap-2">
                                        <div className="h-3 w-3 rounded-full bg-blue-500" /> Blue
                                    </div>
                                </SelectItem>
                                <SelectItem value="purple">
                                    <div className="flex items-center gap-2">
                                        <div className="h-3 w-3 rounded-full bg-purple-500" /> Purple
                                    </div>
                                </SelectItem>
                                <SelectItem value="green">
                                    <div className="flex items-center gap-2">
                                        <div className="h-3 w-3 rounded-full bg-green-500" /> Green
                                    </div>
                                </SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                </div>

                <DialogFooter className="pt-4 border-t gap-2 sm:gap-0">
                    <Button
                        type="button"
                        variant="secondary"
                        onClick={onClose}
                        className="h-11 rounded-xl px-6 font-medium border-neutral-200 dark:border-neutral-800"
                    >
                        Cancel
                    </Button>
                    <Button
                        type="submit"
                        disabled={isLoading}
                        className={`h-11 rounded-xl px-8 font-bold bg-${formData.theme}-500 hover:bg-${formData.theme}-600 shadow-lg shadow-${formData.theme}-500/25 border-none text-white`}
                    >
                        {isLoading ? 'Saving...' : 'Save Changes'}
                    </Button>
                </DialogFooter>
            </form>
        </>
    );
}