'use client'

import { useState, useEffect, useCallback } from 'react'

const KLAUSUR_API = '/klausur-api'

interface GutterSuggestion {
  id: string
  type: 'hyphen_join' | 'spell_fix'
  zone_index: number
  row_index: number
  col_index: number
  col_type: string
  cell_id: string
  original_text: string
  suggested_text: string
  next_row_index: number
  next_row_cell_id: string
  next_row_text: string
  missing_chars: string
  display_parts: string[]
  alternatives: string[]
  confidence: number
  reason: string
}

interface GutterRepairResult {
  suggestions: GutterSuggestion[]
  stats: {
    words_checked: number
    gutter_candidates: number
    suggestions_found: number
    error?: string
  }
  duration_seconds: number
}

interface StepGutterRepairProps {
  sessionId: string | null
  onNext: () => void
}

/**
 * Step 11: Gutter Repair (Wortkorrektur).
 * Detects words truncated at the book gutter and proposes corrections.
 * User can accept/reject each suggestion individually or in batch.
 */
export function StepGutterRepair({ sessionId, onNext }: StepGutterRepairProps) {
  const [loading, setLoading] = useState(false)
  const [applying, setApplying] = useState(false)
  const [result, setResult] = useState<GutterRepairResult | null>(null)
  const [accepted, setAccepted] = useState<Set<string>>(new Set())
  const [rejected, setRejected] = useState<Set<string>>(new Set())
  const [selectedText, setSelectedText] = useState<Record<string, string>>({})
  const [applied, setApplied] = useState(false)
  const [error, setError] = useState('')
  const [applyMessage, setApplyMessage] = useState('')

  const analyse = useCallback(async () => {
    if (!sessionId) return
    setLoading(true)
    setError('')
    setApplied(false)
    setApplyMessage('')
    try {
      const res = await fetch(
        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/gutter-repair`,
        { method: 'POST' },
      )
      if (!res.ok) {
        const body = await res.json().catch(() => ({}))
        throw new Error(body.detail || `Analyse fehlgeschlagen (${res.status})`)
      }
      const data: GutterRepairResult = await res.json()
      setResult(data)
      // Auto-accept all suggestions with high confidence
      const autoAccept = new Set<string>()
      for (const s of data.suggestions) {
        if (s.confidence >= 0.85) {
          autoAccept.add(s.id)
        }
      }
      setAccepted(autoAccept)
      setRejected(new Set())
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e))
    } finally {
      setLoading(false)
    }
  }, [sessionId])

  // Auto-trigger analysis on mount
  useEffect(() => {
    if (sessionId) analyse()
  }, [sessionId, analyse])

  const toggleSuggestion = (id: string) => {
    setAccepted(prev => {
      const next = new Set(prev)
      if (next.has(id)) {
        next.delete(id)
        setRejected(r => new Set(r).add(id))
      } else {
        next.add(id)
        setRejected(r => { const n = new Set(r); n.delete(id); return n })
      }
      return next
    })
  }

  const acceptAll = () => {
    if (!result) return
    setAccepted(new Set(result.suggestions.map(s => s.id)))
    setRejected(new Set())
  }

  const rejectAll = () => {
    if (!result) return
    setRejected(new Set(result.suggestions.map(s => s.id)))
    setAccepted(new Set())
  }

  const applyAccepted = async () => {
    if (!sessionId || accepted.size === 0) return
    setApplying(true)
    setApplyMessage('')
    try {
      const res = await fetch(
        `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/gutter-repair/apply`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            accepted: Array.from(accepted),
            text_overrides: selectedText,
          }),
        },
      )
      if (!res.ok) {
        const body = await res.json().catch(() => ({}))
        throw new Error(body.detail || `Anwenden fehlgeschlagen (${res.status})`)
      }
      const data = await res.json()
      setApplied(true)
      setApplyMessage(`${data.applied_count} Korrektur(en) angewendet.`)
    } catch (e) {
      setApplyMessage(e instanceof Error ? e.message : String(e))
    } finally {
      setApplying(false)
    }
  }

  const suggestions = result?.suggestions || []
  const hasSuggestions = suggestions.length > 0

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
            Wortkorrektur (Buchfalz)
          </h3>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
            Erkennt abgeschnittene oder unscharfe Woerter am Buchfalz und Bindestrich-Trennungen ueber Zeilen hinweg.
          </p>
        </div>
        {result && !loading && (
          <button
            onClick={analyse}
            className="px-3 py-1.5 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600"
          >
            Erneut analysieren
          </button>
        )}
      </div>

      {/* Loading */}
      {loading && (
        <div className="flex items-center gap-3 p-6 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800">
          <div className="animate-spin w-5 h-5 border-2 border-blue-400 border-t-transparent rounded-full" />
          <span className="text-sm text-blue-600 dark:text-blue-400">Analysiere Woerter am Buchfalz...</span>
        </div>
      )}

      {/* Error */}
      {error && (
        <div className="space-y-3">
          <div className="text-sm text-red-500 bg-red-50 dark:bg-red-900/20 p-3 rounded-lg">
            {error}
          </div>
          <button
            onClick={analyse}
            className="px-4 py-2 bg-orange-600 text-white text-sm rounded-lg hover:bg-orange-700"
          >
            Erneut versuchen
          </button>
        </div>
      )}

      {/* No suggestions */}
      {result && !hasSuggestions && !loading && (
        <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-xl border border-green-200 dark:border-green-800">
          <div className="text-sm font-medium text-green-700 dark:text-green-300">
            Keine Buchfalz-Fehler erkannt.
          </div>
          <div className="text-xs text-green-600 dark:text-green-400 mt-1">
            {result.stats.words_checked} Woerter geprueft, {result.stats.gutter_candidates} Kandidaten am Rand analysiert.
          </div>
        </div>
      )}

      {/* Suggestions list */}
      {hasSuggestions && !loading && (
        <>
          {/* Stats bar */}
          <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
            <div className="text-xs text-gray-500 dark:text-gray-400">
              {suggestions.length} Vorschlag/Vorschlaege &middot;{' '}
              {result!.stats.words_checked} Woerter geprueft &middot;{' '}
              {result!.duration_seconds}s
            </div>
            <div className="flex gap-2">
              <button
                onClick={acceptAll}
                disabled={applied}
                className="px-2 py-1 text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded hover:bg-green-200 dark:hover:bg-green-900/50 disabled:opacity-50"
              >
                Alle akzeptieren
              </button>
              <button
                onClick={rejectAll}
                disabled={applied}
                className="px-2 py-1 text-xs bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 rounded hover:bg-red-200 dark:hover:bg-red-900/50 disabled:opacity-50"
              >
                Alle ablehnen
              </button>
            </div>
          </div>

          {/* Suggestion cards */}
          <div className="space-y-2">
            {suggestions.map((s) => {
              const isAccepted = accepted.has(s.id)
              const isRejected = rejected.has(s.id)

              return (
                <div
                  key={s.id}
                  className={`p-3 rounded-lg border transition-colors ${
                    applied
                      ? isAccepted
                        ? 'bg-green-50 dark:bg-green-900/10 border-green-200 dark:border-green-800'
                        : 'bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700 opacity-60'
                      : isAccepted
                        ? 'bg-green-50 dark:bg-green-900/10 border-green-300 dark:border-green-700'
                        : isRejected
                          ? 'bg-red-50 dark:bg-red-900/10 border-red-200 dark:border-red-800 opacity-60'
                          : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700'
                  }`}
                >
                  <div className="flex items-start justify-between gap-3">
                    {/* Left: suggestion details */}
                    <div className="flex-1 min-w-0">
                      {/* Type badge */}
                      <div className="flex items-center gap-2 mb-1.5">
                        <span className={`inline-flex px-1.5 py-0.5 text-[10px] font-medium rounded ${
                          s.type === 'hyphen_join'
                            ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
                            : 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300'
                        }`}>
                          {s.type === 'hyphen_join' ? 'Zeilenumbruch' : 'Buchfalz-Korrektur'}
                        </span>
                        <span className="text-[10px] text-gray-400">
                          Zeile {s.row_index + 1}, Spalte {s.col_index + 1}
                          {s.col_type && ` (${s.col_type.replace('column_', '')})`}
                        </span>
                        <span className={`text-[10px] ${
                          s.confidence >= 0.9 ? 'text-green-500' :
                          s.confidence >= 0.7 ? 'text-yellow-500' : 'text-red-500'
                        }`}>
                          {Math.round(s.confidence * 100)}%
                        </span>
                      </div>

                      {/* Correction display */}
                      {s.type === 'hyphen_join' ? (
                        <div className="space-y-1">
                          <div className="flex items-center gap-2 text-sm">
                            <span className="font-mono text-red-600 dark:text-red-400 line-through">
                              {s.original_text}
                            </span>
                            <span className="text-gray-400 text-xs">Z.{s.row_index + 1}</span>
                            <span className="text-gray-300 dark:text-gray-600">+</span>
                            <span className="font-mono text-red-600 dark:text-red-400 line-through">
                              {s.next_row_text.split(' ')[0]}
                            </span>
                            <span className="text-gray-400 text-xs">Z.{s.next_row_index + 1}</span>
                            <span className="text-gray-400">&rarr;</span>
                            <span className="font-mono text-green-600 dark:text-green-400 font-semibold">
                              {s.suggested_text}
                            </span>
                          </div>
                          {s.missing_chars && (
                            <div className="text-[10px] text-gray-400">
                              Fehlende Zeichen: <span className="font-mono font-semibold">{s.missing_chars}</span>
                              {' '}&middot; Darstellung: <span className="font-mono">{s.display_parts.join(' | ')}</span>
                            </div>
                          )}
                        </div>
                      ) : (
                        <div className="space-y-1">
                          <div className="flex items-center gap-2 text-sm">
                            <span className="font-mono text-red-600 dark:text-red-400 line-through">
                              {s.original_text}
                            </span>
                            <span className="text-gray-400">&rarr;</span>
                            <span className="font-mono text-green-600 dark:text-green-400 font-semibold">
                              {selectedText[s.id] || s.suggested_text}
                            </span>
                          </div>
                          {/* Alternatives: show other candidates the user can pick */}
                          {s.alternatives && s.alternatives.length > 0 && !applied && (
                            <div className="flex items-center gap-1.5 flex-wrap">
                              <span className="text-[10px] text-gray-400">Alternativen:</span>
                              {[s.suggested_text, ...s.alternatives].map((alt) => {
                                const isSelected = (selectedText[s.id] || s.suggested_text) === alt
                                return (
                                  <button
                                    key={alt}
                                    onClick={() => setSelectedText(prev => ({ ...prev, [s.id]: alt }))}
                                    className={`px-1.5 py-0.5 text-[11px] font-mono rounded transition-colors ${
                                      isSelected
                                        ? 'bg-green-200 dark:bg-green-800 text-green-800 dark:text-green-200 font-semibold'
                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                                    }`}
                                  >
                                    {alt}
                                  </button>
                                )
                              })}
                            </div>
                          )}
                        </div>
                      )}
                    </div>

                    {/* Right: accept/reject toggle */}
                    {!applied && (
                      <button
                        onClick={() => toggleSuggestion(s.id)}
                        className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm transition-colors ${
                          isAccepted
                            ? 'bg-green-500 text-white hover:bg-green-600'
                            : isRejected
                              ? 'bg-red-400 text-white hover:bg-red-500'
                              : 'bg-gray-200 dark:bg-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-500'
                        }`}
                        title={isAccepted ? 'Akzeptiert (klicken zum Ablehnen)' : isRejected ? 'Abgelehnt (klicken zum Akzeptieren)' : 'Klicken zum Akzeptieren'}
                      >
                        {isAccepted ? '\u2713' : isRejected ? '\u2717' : '?'}
                      </button>
                    )}
                  </div>
                </div>
              )
            })}
          </div>

          {/* Apply / Next buttons */}
          <div className="flex items-center gap-3 pt-2">
            {!applied ? (
              <button
                onClick={applyAccepted}
                disabled={applying || accepted.size === 0}
                className="px-4 py-2 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 disabled:opacity-50"
              >
                {applying ? 'Wird angewendet...' : `${accepted.size} Korrektur(en) anwenden`}
              </button>
            ) : (
              <button
                onClick={onNext}
                className="px-4 py-2 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700"
              >
                Weiter zu Ground Truth
              </button>
            )}
            {!applied && (
              <button
                onClick={onNext}
                className="px-4 py-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
              >
                Ueberspringen
              </button>
            )}
          </div>

          {/* Apply result message */}
          {applyMessage && (
            <div className={`text-sm p-2 rounded ${
              applyMessage.includes('fehlgeschlagen')
                ? 'text-red-500 bg-red-50 dark:bg-red-900/20'
                : 'text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20'
            }`}>
              {applyMessage}
            </div>
          )}
        </>
      )}

      {/* Skip button when no suggestions */}
      {result && !hasSuggestions && !loading && (
        <button
          onClick={onNext}
          className="px-4 py-2 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700"
        >
          Weiter zu Ground Truth
        </button>
      )}
    </div>
  )
}