'use client'

import { useEffect, useRef, useState } from 'react'
import type { AdvisorCase } from './useAdvisorCase'
import { StickyQuestion } from './StickyQuestion'
import { AdvisorEmptyState } from './EmptyState'
import { CaseView, LoadingDots, ErrorBox } from './CaseView'
import { ClarifyView } from './ClarifyView'
import { EvidenceSummary } from './EvidenceSummary'
import { EvidencePane } from './EvidencePane'
import { VisualEvidencePane } from './VisualEvidencePane'
import { FootnotesPane } from './FootnotesPane'
import { Markdown } from './Markdown'
import { useCitationHighlight } from './useCitationHighlight'

/**
 * Advisor body as a series of CASES.
 * - Narrow: stacked cases with a pinned last question.
 * - Wide: 3-column Case Workspace — question+summary (left) | answer/clarify (center) | evidence (right).
 */
export function EvidenceWorkspace({
  cases,
  expanded,
  busy,
  exampleQuestions,
  onExample,
  onSelectContext,
}: {
  cases: AdvisorCase[]
  expanded: boolean
  busy: boolean
  exampleQuestions: string[]
  onExample: (q: string) => void
  onSelectContext: (caseId: string, ctx: string) => void
}) {
  const [activeId, setActiveId] = useState<string | null>(null)
  const endRef = useRef<HTMLDivElement>(null)
  const latest = cases[cases.length - 1]
  const active = cases.find((c) => c.id === activeId) ?? latest

  useEffect(() => {
    setActiveId(null)
  }, [cases.length])
  useEffect(() => {
    if (!expanded) endRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [cases.length, expanded])

  const answer = active?.response?.mode === 'answer' ? active.response : null
  const { highlightedId, cite } = useCitationHighlight(answer?.citations ?? [])

  if (cases.length === 0) {
    return (
      <div className="flex-1 overflow-y-auto bg-gray-50">
        <AdvisorEmptyState exampleQuestions={exampleQuestions} onExampleClick={onExample} />
      </div>
    )
  }

  if (!expanded) {
    return (
      <div className="min-h-0 flex-1 overflow-y-auto bg-gray-50">
        {latest && <StickyQuestion question={latest.question} />}
        <div className="space-y-4 p-4">
          {cases.map((c, i) => (
            <CaseView
              key={c.id}
              c={c}
              busy={busy}
              showQuestion={i !== cases.length - 1}
              onSelectContext={(ctx) => onSelectContext(c.id, ctx)}
            />
          ))}
          <div ref={endRef} />
        </div>
      </div>
    )
  }

  const r = active?.response
  return (
    <div className="grid min-h-0 flex-1 grid-cols-[220px_1fr_320px] divide-x divide-gray-200 overflow-hidden">
      <aside className="min-h-0 overflow-y-auto bg-indigo-50/40 p-3">
        <div className="text-[10px] font-semibold uppercase tracking-wide text-indigo-400">Frage</div>
        <div className="mb-3 text-sm font-medium text-gray-800">{active?.question}</div>
        {answer && <EvidenceSummary response={answer} />}
        {cases.length > 1 && (
          <div className="mt-4">
            <div className="mb-1 text-[10px] font-semibold uppercase tracking-wide text-gray-400">Verlauf</div>
            <div className="space-y-1">
              {cases.map((c) => (
                <button
                  key={c.id}
                  onClick={() => setActiveId(c.id)}
                  className={`block w-full truncate rounded px-2 py-1 text-left text-[11px] ${
                    c.id === active?.id ? 'bg-indigo-100 text-indigo-800' : 'text-gray-600 hover:bg-gray-100'
                  }`}
                >
                  {c.question}
                </button>
              ))}
            </div>
          </div>
        )}
      </aside>

      <main className="min-h-0 overflow-y-auto bg-gray-50 p-4">
        {active?.status === 'loading' && <LoadingDots />}
        {active?.status === 'error' && <ErrorBox msg={active.error} />}
        {r?.mode === 'clarify' && (
          <ClarifyView
            response={r}
            busy={busy}
            onSelectContext={(ctx) => active && onSelectContext(active.id, ctx)}
          />
        )}
        {r?.mode === 'answer' && (
          <div className="rounded-lg border border-gray-200 bg-white px-3 py-2">
            <Markdown content={r.answer || ''} citations={cite} />
          </div>
        )}
      </main>

      <aside className="min-h-0 space-y-3 overflow-y-auto bg-gray-50 p-3">
        {answer ? (
          <>
            <EvidencePane evidence={answer.evidence} highlightedId={highlightedId} />
            <VisualEvidencePane items={answer.visual_evidence} />
            <FootnotesPane footnotes={answer.footnotes} />
          </>
        ) : (
          <p className="px-1 text-[11px] text-gray-400">Evidence erscheint nach Auswahl eines Kontexts.</p>
        )}
      </aside>
    </div>
  )
}