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

interface CreateFlowDropdownProps {
  className?: string
  /** Button label — defaults to "Create Flow" */
  label?: string
}

export function CreateFlowDropdown({
  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-primary px-4 py-2 text-sm font-semibold text-white hover:brightness-110 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-60 rounded-lg border border-border bg-card p-1 shadow-xl">
            <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-[var(--color-bg-elevated)] transition-colors"
            >
              <FolderTree className="h-4 w-4 text-muted-foreground" />
              <div className="flex-1">
                <div className="font-medium">Troubleshooting Flow</div>
                <div className="text-xs text-muted-foreground">Branching decision flow</div>
              </div>
            </Link>

            <div className="my-1 border-t border-border" />

            <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-[var(--color-bg-elevated)] transition-colors"
            >
              <ListOrdered className="h-4 w-4 text-muted-foreground" />
              <div className="flex-1">
                <div className="font-medium">Procedural Flow</div>
                <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
              </div>
            </Link>
          </div>
        </>
      )}
    </div>
  )
}