/**
 * Dialog to create a new project: name + icon.
 */

import React, { useState } from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Plus } from 'lucide-react'
import { PROJECT_ICON_IDS, type Project, type ProjectIconId } from './types'
import { getProjectIcon } from '../../lib/iconMap'

type NewProjectDialogProps = {
  onCreate: (project: Project) => void
  trigger?: React.ReactNode
  /** Other project names to check for duplicates (case-insensitive warning only) */
  existingNames?: string[]
}

export function NewProjectDialog({ onCreate, trigger, existingNames = [] }: NewProjectDialogProps) {
  const [open, setOpen] = useState(false)
  const [name, setName] = useState('')
  const [iconId, setIconId] = useState<ProjectIconId>('cat')

  const trimmed = name.trim()
  const isDuplicate = trimmed.length > 0 && existingNames.some((n) => n.toLowerCase() === trimmed.toLowerCase())

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!trimmed) return
    const project: Project = {
      id: `proj_${Date.now()}`,
      name: trimmed,
      iconId,
      createdAt: Date.now(),
    }
    onCreate(project)
    setName('')
    setIconId('cat')
    setOpen(false)
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {trigger ?? (
          <Button variant="outline" size="sm" className="w-full justify-start gap-2">
            <Plus className="size-4" />
            New project
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>New project</DialogTitle>
            <DialogDescription>Create a project to start editing a graph canvas.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <label htmlFor="project-name" className="text-sm font-medium">
                Name
              </label>
              <Input
                id="project-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="My project"
                autoFocus
              />
              {isDuplicate && (
                <p className="text-xs text-amber-600 dark:text-amber-500">A project with this name already exists.</p>
              )}
            </div>
            <div className="grid gap-2">
              <label className="text-sm font-medium">Icon</label>
              <Select value={iconId} onValueChange={(v) => setIconId(v as ProjectIconId)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {PROJECT_ICON_IDS.map((id) => {
                    const Icon = getProjectIcon(id)
                    return (
                      <SelectItem key={id} value={id}>
                        <span className="flex items-center gap-2">
                          <Icon className="size-4" />
                          {id}
                        </span>
                      </SelectItem>
                    )
                  })}
                </SelectContent>
              </Select>
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Cancel
            </Button>
            <Button type="submit" disabled={!name.trim()}>
              Create
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}