import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { Plus, ChevronDown, Sparkles, FolderTree, ListOrdered } from 'lucide-react'
import { cn } from '@/lib/utils'
import { editorAIApi } from '@/api/editorAI'
import { apiClient } from '@/api/client'
import { AIPromptDialog } from '@/components/editor-ai/AIPromptDialog'

type AIFlowType = 'troubleshooting' | 'procedural' | 'maintenance'

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

export function CreateFlowDropdown({
  aiEnabled,
  className,
  label = 'Create Flow',
}: CreateFlowDropdownProps) {
  const [showMenu, setShowMenu] = useState(false)
  const [aiPromptOpen, setAiPromptOpen] = useState(false)
  const [aiPromptFlowType, setAiPromptFlowType] = useState<AIFlowType>('troubleshooting')
  const navigate = useNavigate()

  const handleAIGenerate = async (prompt: string) => {
    // Start an AI session
    const session = await editorAIApi.startSession(
      aiPromptFlowType === 'maintenance' ? 'procedural' : aiPromptFlowType
    )
    const sessionId = session.session_id

    // Send the user's prompt
    await editorAIApi.sendMessage({
      sessionId,
      content: prompt,
      actionType: 'generate_full',
    })

    // Generate the full flow
    await editorAIApi.generateFull(sessionId)

    // Import to create the tree
    const { data: importResult } = await apiClient.post(
      `/ai/chat/sessions/${sessionId}/import`,
      {}
    )
    const treeId = importResult.tree_id

    // Navigate to the editor
    if (aiPromptFlowType === 'troubleshooting') {
      navigate(`/trees/${treeId}/edit`, {
        state: { aiPanelOpen: true, sessionId },
      })
    } else {
      navigate(`/flows/${treeId}/edit`, {
        state: { aiPanelOpen: true, sessionId },
      })
    }
  }

  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-64 rounded-lg border border-border bg-card p-1 shadow-xl">
            {/* Troubleshooting */}
            <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 className="flex-1">
                <div className="font-medium">Troubleshooting Tree</div>
                <div className="text-xs text-muted-foreground">Branching decision flow</div>
              </div>
            </Link>
            {aiEnabled && (
              <button
                type="button"
                onClick={() => {
                  setShowMenu(false)
                  setAiPromptFlowType('troubleshooting')
                  setAiPromptOpen(true)
                }}
                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
              >
                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
                <div className="text-left">
                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
                </div>
              </button>
            )}

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

            {/* Procedural */}
            <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 className="flex-1">
                <div className="font-medium">Procedural Flow</div>
                <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
              </div>
            </Link>
            {aiEnabled && (
              <button
                type="button"
                onClick={() => {
                  setShowMenu(false)
                  setAiPromptFlowType('procedural')
                  setAiPromptOpen(true)
                }}
                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
              >
                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
                <div className="text-left">
                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
                </div>
              </button>
            )}

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

            {aiEnabled && (
              <button
                type="button"
                onClick={() => {
                  setShowMenu(false)
                  setAiPromptFlowType('procedural')
                  setAiPromptOpen(true)
                }}
                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
              >
                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
                <div className="text-left">
                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
                </div>
              </button>
            )}
          </div>
        </>
      )}

      <AIPromptDialog
        isOpen={aiPromptOpen}
        onClose={() => setAiPromptOpen(false)}
        onGenerate={handleAIGenerate}
        flowType={aiPromptFlowType}
      />
    </div>
  )
}