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 CreateProjectDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export function CreateProjectDialog({
    open,
    onOpenChange,
}: CreateProjectDialogProps) {
    const [isLoading, setIsLoading] = useState(false);

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

        // Mock processing
        setTimeout(() => {
            setIsLoading(false);
            onOpenChange(false);
        }, 1000);
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="overflow-hidden border-none bg-white shadow-2xl sm:max-w-[500px] dark:bg-neutral-900">
                <div className="absolute top-0 left-0 h-1.5 w-full bg-linear-to-r from-blue-600 to-indigo-600" />

                <DialogHeader className="pt-4">
                    <DialogTitle className="flex items-center gap-2 text-2xl font-bold tracking-tight">
                        <Folder className="h-6 w-6 text-blue-600" />
                        Create New Project
                    </DialogTitle>
                    <DialogDescription className="text-neutral-500 dark:text-neutral-400">
                        Fill in the details below to start your new
                        collaboration.
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={handleSubmit} className="space-y-6 py-4">
                    <div className="space-y-2">
                        <Label
                            htmlFor="name"
                            className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                        >
                            Project Name
                        </Label>
                        <Input
                            id="name"
                            placeholder="e.g. Design System 2.0"
                            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="description"
                            className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                        >
                            Description
                        </Label>
                        <textarea
                            id="description"
                            rows={3}
                            placeholder="Briefly describe what this project is about..."
                            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:border-blue-500 focus-visible:ring-2 focus-visible:ring-blue-500/20 focus-visible:outline-hidden 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="status"
                                className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                            >
                                Initial Status
                            </Label>
                            <Select defaultValue="planning">
                                <SelectTrigger className="h-11 rounded-xl border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-800/50">
                                    <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="on-hold">
                                        On Hold
                                    </SelectItem>
                                </SelectContent>
                            </Select>
                        </div>
                        <div className="space-y-2">
                            <Label
                                htmlFor="theme"
                                className="text-sm font-semibold text-neutral-700 dark:text-neutral-300"
                            >
                                Project Theme
                            </Label>
                            <Select defaultValue="blue">
                                <SelectTrigger className="h-11 rounded-xl border-neutral-200 bg-neutral-50 dark:border-neutral-800 dark:bg-neutral-800/50">
                                    <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="gap-2 border-t pt-4 sm:gap-0">
                        <Button
                            type="button"
                            variant="secondary"
                            onClick={() => onOpenChange(false)}
                            className="h-11 rounded-xl border-neutral-200 px-6 font-medium dark:border-neutral-800"
                        >
                            Cancel
                        </Button>
                        <Button
                            type="submit"
                            disabled={isLoading}
                            className="h-11 rounded-xl border-none bg-linear-to-r from-blue-600 to-indigo-600 px-8 font-bold shadow-lg shadow-blue-500/25 hover:from-blue-700 hover:to-indigo-700"
                        >
                            {isLoading ? 'Creating...' : 'Create Project'}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}