import { useState } from 'react'
import { Link } from 'react-router-dom'
import { Plus, ChevronDown, Sparkles, FolderTree, ListOrdered, Wrench } from 'lucide-react'
import { cn } from '@/lib/utils'

interface CreateFlowDropdownProps {
  aiEnabled: boolean
  onOpenAIBuilder: () => void
  className?: string
  /** Button label — defaults to "Create Flow" */
  label?: string
}

export function CreateFlowDropdown({
  aiEnabled,
  onOpenAIBuilder,
  className,
  label = 'Create Flow',
}: CreateFlowDropdownProps) {
  const [showMenu, setShowMenu] = useState(false)

  return (
    <div className={cn('relative', className)}>
      <button
        onClick={() => setShowMenu(!showMenu)}
        className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
      >
        <Plus size={16} />
        {label}
        <ChevronDown size={14} />
      </button>
      {showMenu && (
        <>
          <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
          <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-sm">
            <Link
              to="/trees/new"
              onClick={() => setShowMenu(false)}
              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
            >
              <FolderTree className="h-4 w-4 text-muted-foreground" />
              <div>
                <div className="font-medium">Troubleshooting Tree</div>
                <div className="text-xs text-muted-foreground">Branching decision flow</div>
              </div>
            </Link>
            <Link
              to="/flows/new"
              onClick={() => setShowMenu(false)}
              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
            >
              <ListOrdered className="h-4 w-4 text-muted-foreground" />
              <div>
                <div className="font-medium">Procedural Flow</div>
                <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
              </div>
            </Link>
            <Link
              to="/flows/new?type=maintenance"
              onClick={() => setShowMenu(false)}
              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
            >
              <Wrench className="h-4 w-4 text-amber-400" />
              <div>
                <div className="font-medium">Maintenance Flow</div>
                <div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
              </div>
            </Link>
            {aiEnabled && (
              <>
                <div className="my-1 border-t border-border" />
                <button
                  type="button"
                  onClick={() => {
                    setShowMenu(false)
                    onOpenAIBuilder()
                  }}
                  className="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
                >
                  <Sparkles className="h-4 w-4 text-primary" />
                  <div className="text-left">
                    <div className="font-medium">Flow Assist</div>
                    <div className="text-xs text-muted-foreground">AI-powered flow builder</div>
                  </div>
                </button>
              </>
            )}
          </div>
        </>
      )}
    </div>
  )
}
