import { useState, useEffect, useCallback } from 'react'
import { FileText, BookOpen, MessageSquare, Pencil, Copy, Send, Check } from 'lucide-react'
import { cn } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { resolutionsApi } from '@/api/resolutions'
import type {
  ResolutionOutputResponse,
  ResolutionOutputType,
} from '@/types/branching'

interface Tab {
  type: ResolutionOutputType
  label: string
  icon: React.ElementType
}

const TABS: Tab[] = [
  { type: 'psa_ticket_notes', label: 'PSA Notes', icon: FileText },
  { type: 'knowledge_base', label: 'KB Article', icon: BookOpen },
  { type: 'client_summary', label: 'Client Summary', icon: MessageSquare },
]

interface ResolutionOutputPanelProps {
  sessionId: string
  className?: string
}

export function ResolutionOutputPanel({ sessionId, className }: ResolutionOutputPanelProps) {
  const [outputs, setOutputs] = useState<ResolutionOutputResponse[]>([])
  const [activeType, setActiveType] = useState<ResolutionOutputType>('psa_ticket_notes')
  const [isLoading, setIsLoading] = useState(false)
  const [isEditing, setIsEditing] = useState(false)
  const [editValue, setEditValue] = useState('')
  const [isSaving, setIsSaving] = useState(false)
  const [isPushing, setIsPushing] = useState(false)
  const [copied, setCopied] = useState(false)

  const loadOutputs = useCallback(async () => {
    setIsLoading(true)
    try {
      const result = await resolutionsApi.getOutputs(sessionId)
      setOutputs(result.outputs)
    } catch {
      toast.error('Failed to load resolution outputs')
    } finally {
      setIsLoading(false)
    }
  }, [sessionId])

  useEffect(() => {
    loadOutputs()
  }, [loadOutputs])

  const activeOutput = outputs.find(o => o.output_type === activeType) ?? null
  const displayContent = activeOutput?.edited_content ?? activeOutput?.generated_content ?? ''

  function handleTabChange(type: ResolutionOutputType) {
    setActiveType(type)
    setIsEditing(false)
    setEditValue('')
  }

  function handleEditToggle() {
    if (!isEditing) {
      setEditValue(displayContent)
      setIsEditing(true)
    } else {
      setIsEditing(false)
      setEditValue('')
    }
  }

  async function handleSaveEdit() {
    if (!activeOutput) return
    setIsSaving(true)
    try {
      const updated = await resolutionsApi.editOutput(sessionId, activeOutput.id, {
        edited_content: editValue,
      })
      setOutputs(prev => prev.map(o => (o.id === updated.id ? updated : o)))
      setIsEditing(false)
      setEditValue('')
      toast.success('Output saved')
    } catch {
      toast.error('Failed to save edit')
    } finally {
      setIsSaving(false)
    }
  }

  async function handleCopy() {
    try {
      await navigator.clipboard.writeText(displayContent)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch {
      toast.error('Failed to copy to clipboard')
    }
  }

  async function handlePushToPsa() {
    if (!activeOutput) return
    setIsPushing(true)
    try {
      const updated = await resolutionsApi.pushOutput(sessionId, activeOutput.id, {
        destination: 'psa',
      })
      setOutputs(prev => prev.map(o => (o.id === updated.id ? updated : o)))
      toast.success('Pushed to PSA')
    } catch {
      toast.error('Failed to push to PSA')
    } finally {
      setIsPushing(false)
    }
  }

  return (
    <div className={cn('flex flex-col bg-card border border-default rounded-lg overflow-hidden', className)}>
      {/* Tab bar */}
      <div className="flex border-b border-default shrink-0">
        {TABS.map(tab => {
          const Icon = tab.icon
          const isActive = tab.type === activeType
          return (
            <button
              key={tab.type}
              type="button"
              onClick={() => handleTabChange(tab.type)}
              className={cn(
                'flex items-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors border-b-2 -mb-px',
                isActive
                  ? 'border-accent text-accent-text'
                  : 'border-transparent text-muted-foreground hover:text-primary hover:border-hover'
              )}
            >
              <Icon size={13} />
              <span>{tab.label}</span>
            </button>
          )
        })}
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto p-3 min-h-0">
        {isLoading ? (
          <div className="flex items-center justify-center h-24">
            <span className="text-xs text-muted">Loading…</span>
          </div>
        ) : !activeOutput ? (
          <div className="flex items-center justify-center h-24">
            <span className="text-xs text-muted">No output generated yet.</span>
          </div>
        ) : isEditing ? (
          <textarea
            value={editValue}
            onChange={e => setEditValue(e.target.value)}
            className={cn(
              'w-full h-full min-h-[160px] resize-none rounded-[5px] border border-default bg-input',
              'px-3 py-2 text-sm text-primary font-mono leading-relaxed',
              'focus:outline-none focus:border-accent focus:shadow-[0_0_0_2px_var(--color-accent-dim)]',
              'transition-colors'
            )}
          />
        ) : (
          <pre className="text-sm text-primary font-mono whitespace-pre-wrap leading-relaxed">
            {displayContent}
          </pre>
        )}
      </div>

      {/* Action bar */}
      <div className="flex items-center gap-2 px-3 py-2.5 border-t border-default shrink-0">
        {isEditing ? (
          <>
            <button
              type="button"
              onClick={handleSaveEdit}
              disabled={isSaving}
              className="rounded-[5px] bg-accent px-3 py-1.5 text-xs font-medium text-white hover:bg-accent-hover transition-colors disabled:opacity-50"
            >
              {isSaving ? 'Saving…' : 'Save'}
            </button>
            <button
              type="button"
              onClick={handleEditToggle}
              disabled={isSaving}
              className="rounded-[5px] border border-default px-3 py-1.5 text-xs text-muted-foreground hover:bg-elevated hover:text-primary transition-colors disabled:opacity-50"
            >
              Cancel
            </button>
          </>
        ) : (
          <>
            <button
              type="button"
              onClick={handleEditToggle}
              disabled={!activeOutput}
              className={cn(
                'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs text-muted-foreground',
                'hover:bg-elevated hover:text-primary transition-colors disabled:opacity-40'
              )}
            >
              <Pencil size={12} />
              Edit
            </button>
            <button
              type="button"
              onClick={handleCopy}
              disabled={!activeOutput}
              className={cn(
                'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
                copied
                  ? 'border-success text-success'
                  : 'text-muted-foreground hover:bg-elevated hover:text-primary'
              )}
            >
              {copied ? <Check size={12} /> : <Copy size={12} />}
              {copied ? 'Copied' : 'Copy'}
            </button>
            <button
              type="button"
              onClick={handlePushToPsa}
              disabled={!activeOutput || isPushing || activeOutput.status === 'pushed'}
              className={cn(
                'flex items-center gap-1.5 rounded-[5px] border border-default px-3 py-1.5 text-xs transition-colors disabled:opacity-40',
                activeOutput?.status === 'pushed'
                  ? 'border-success text-success'
                  : 'text-muted-foreground hover:bg-elevated hover:text-primary'
              )}
            >
              <Send size={12} />
              {isPushing ? 'Pushing…' : activeOutput?.status === 'pushed' ? 'Pushed' : 'Push to PSA'}
            </button>
          </>
        )}
      </div>
    </div>
  )
}
