"use client"

import * as React from "react"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

import { ModuleSelect } from "@/components/shared/module-select"

interface NewPipelineModalProps {
    isOpen: boolean
    onClose: () => void
    onCreate: (name: string, isPublic?: boolean, moduleDependencies?: string[]) => void
}

export function NewPipelineModal({
    isOpen,
    onClose,
    onCreate,
}: NewPipelineModalProps) {
    const [name, setName] = React.useState("")
    const [moduleDependencies, setModuleDependencies] = React.useState<string[]>([])

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        if (name.trim()) {
            onCreate(name.trim(), true, moduleDependencies)
            setName("")
            setModuleDependencies([])
            onClose()
        }
    }

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="sm:max-w-[425px] animate-in zoom-in-95 duration-300">
                <DialogHeader>
                    <DialogTitle className="text-[20px] font-extrabold font-['Lexend'] text-text tracking-tight">
                        Create New Pipeline
                    </DialogTitle>
                    <DialogDescription className="text-[13px] font-['Lexend_Deca'] text-gray-600 mt-1">
                        Pipelines help you organize and track your sales process.
                        Enter a name for your new workspace.
                    </DialogDescription>
                </DialogHeader>
                <form onSubmit={handleSubmit} className="space-y-5 py-4">
                    <div className="space-y-2.5">
                        <Label htmlFor="name" className="text-[11px] font-bold uppercase tracking-wider text-gray-500 font-['Lexend_Deca'] ml-1">
                            Pipeline Name
                        </Label>
                        <Input
                            id="name"
                            placeholder="e.g. Enterprise Sales, Partner Funnel..."
                            className="h-12 rounded-xl border-border/60 font-['Lexend'] text-[15px] px-4 shadow-sm focus:ring-accent/20"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            autoFocus
                        />
                    </div>
                    
                    <div className="space-y-3">
                        <ModuleSelect
                            value={moduleDependencies}
                            onValueChange={setModuleDependencies}
                            label="Module Dependencies"
                        />
                        <p className="text-[11px] text-gray-400 font-['Lexend_Deca'] ml-1 italic">
                            Select or add custom modules for this pipeline.
                        </p>
                    </div>
                    <DialogFooter className="pt-2 gap-3 flex-row sm:justify-end">
                        <Button
                            type="button"
                            variant="ghost"
                            onClick={onClose}
                            className="rounded-xl font-bold h-11 px-6 text-gray-500 hover:text-text"
                        >
                            Cancel
                        </Button>
                        <Button
                            type="submit"
                            className="rounded-xl bg-accent px-8 font-extrabold text-white h-11 shadow-premium hover:shadow-lg hover:scale-[1.02] transition-all duration-200"
                            disabled={!name.trim()}
                        >
                            Create
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    )
}