import { useState } from 'react'
import { X, Sparkles } from 'lucide-react'
import { cn } from '@/lib/utils'
import { NodeSummary } from './NodeSummary'
import { ChatTab } from './ChatTab'
import { SuggestionsTab } from './SuggestionsTab'
import type { EditorAIChatMessage, AISuggestion } from '@/types'

interface EditorAIPanelProps {
  isOpen: boolean
  onClose: () => void
  focalNode?: { id: string; type: string; question?: string; title?: string; description?: string } | null
  flowName?: string
  flowType?: string
  nodeCount?: number
  messages: EditorAIChatMessage[]
  input: string
  onInputChange: (value: string) => void
  onSend: () => void
  isLoading: boolean
  suggestions: AISuggestion[]
}

type Tab = 'chat' | 'suggestions'

export function EditorAIPanel({
  isOpen,
  onClose,
  focalNode,
  flowName,
  flowType,
  nodeCount,
  messages,
  input,
  onInputChange,
  onSend,
  isLoading,
  suggestions,
}: EditorAIPanelProps) {
  const [activeTab, setActiveTab] = useState<Tab>('chat')

  if (!isOpen) return null

  const pendingCount = suggestions.filter((s) => s.status === 'pending').length

  return (
    <div
      className="flex h-full w-[380px] shrink-0 flex-col border-l"
      style={{
        background: 'rgba(16, 17, 20, 0.95)',
        backdropFilter: 'var(--glass-blur)',
        WebkitBackdropFilter: 'var(--glass-blur)',
        borderColor: 'var(--glass-border)',
        animation: 'slideInRight 200ms ease-out',
      }}
    >
      {/* Header */}
      <div
        className="flex items-center justify-between px-4 py-3 border-b shrink-0"
        style={{ borderColor: 'var(--glass-border)' }}
      >
        <div className="flex items-center gap-2">
          <Sparkles size={16} className="text-primary" />
          <span className="text-sm font-semibold text-foreground">AI Assist</span>
        </div>
        <button
          onClick={onClose}
          className="p-1.5 rounded-lg hover:bg-brand-border text-muted-foreground hover:text-foreground transition-colors"
        >
          <X size={16} />
        </button>
      </div>

      <NodeSummary node={focalNode} flowName={flowName} flowType={flowType} nodeCount={nodeCount} />

      {/* Tabs */}
      <div className="flex border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
        <button
          onClick={() => setActiveTab('chat')}
          className={cn(
            'flex-1 px-3 py-2 text-xs font-medium transition-colors',
            activeTab === 'chat'
              ? 'border-b-2 border-primary text-foreground'
              : 'text-muted-foreground hover:text-foreground'
          )}
        >
          Chat
        </button>
        <button
          onClick={() => setActiveTab('suggestions')}
          className={cn(
            'flex-1 px-3 py-2 text-xs font-medium transition-colors relative',
            activeTab === 'suggestions'
              ? 'border-b-2 border-primary text-foreground'
              : 'text-muted-foreground hover:text-foreground'
          )}
        >
          Suggestions
          {pendingCount > 0 && (
            <span className="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary/20 px-1 text-[0.5625rem] text-primary">
              {pendingCount}
            </span>
          )}
        </button>
      </div>

      {activeTab === 'chat' ? (
        <ChatTab messages={messages} input={input} onInputChange={onInputChange} onSend={onSend} isLoading={isLoading} />
      ) : (
        <SuggestionsTab suggestions={suggestions} />
      )}
    </div>
  )
}