import { useState, useEffect, useRef } from 'react'
import DrawCanvas, { type DrawCanvasHandle } from '../components/DrawCanvas'
import GenerateObjectsList from '../components/GenerateObjectsList'

import Topbar from '../components/Topbar'
import {
  getDirectusPictures,
  directusAssetUrl,
  type DirectusPicture,
  getDirectusObjects,
  generateQuestions,
  publishQuestions,
  getObjectQuestions,
  getObjectWords,
  deleteQuestion,
  deleteWord,
  purgeOrphans,
  purgeAllOrphans,
  type GenerateStats,
  type ObjectQuestion,
  type ObjectWord,
} from '../api'
import { useAuth } from '../context/AuthContext'
import type { DirectusObject, CanvasObject } from '../types'

const ChevronLeftIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="15 18 9 12 15 6" />
  </svg>
)

const ChevronRightIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="9 18 15 12 9 6" />
  </svg>
)

const GenerateIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
  </svg>
)

const PublishIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 19V5M5 12l7-7 7 7" />
  </svg>
)

const SaveIcon = () => (
  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
    <polyline points="17 21 17 13 7 13 7 21" />
    <polyline points="7 3 7 8 15 8" />
  </svg>
)

// ── Prompt layout system ──────────────────────────────────────────────────────

const DEFAULT_PROMPT = `Du bist ein erfahrener Sprachlernexperte. Du erhältst die Beschreibung eines Objekts aus einem Bild (Titel, Position, Zustand, Aktion) sowie ggf. dessen Elternobjekt als Kontext. Deine Aufgabe: Erstelle ausschließlich für das genannte Objekt (nicht für das Elternobjekt) Sprachlernfragen auf 10 Niveaustufen (1–10):

* Stufe 1–2 (Anfänger): Einfachste Erkennungs- oder Ja/Nein-Fragen, z.B. „Kannst du den Hund sehen?"
* Stufe 3–5 (Grundstufe): Beschreibende Fragen zu Farbe, Form, Position
* Stufe 6–8 (Mittelstufe): Fragen zu Funktion, Vergleich oder Kontext
* Stufe 9–10 (Fortgeschritten): Sprachlich anspruchsvolle, kreative oder erklärende Fragen – die Komplexität liegt in Grammatik, Wortschatz und Satzbau, nicht im abstrakten Denken

Regeln:

* Jede Frage muss sich direkt auf das Objekt beziehen
* \`words\`: Enthält alle einzigartigen Tokens aus Frage UND Antwort zusammen (Satzzeichen ausgenommen, keine Duplikate)
* \`short_answer\`: Ein einzelnes treffendes Wort als Kurzantwort (z.B. „Ja", „schwarz", „wendig")
* \`distractor_words\`: Genau 5 Wörter, die thematisch passen, aber NICHT in Frage oder Antwort vorkommen und NICHT die Antwort sind
* Gib ausschließlich valides JSON aus – kein Text, kein Markdown

Ausgabeformat:
{
  "levels": [
    {
      "level": 1,
      "question": "Kannst du den Hund sehen?",
      "answer": "Ja, ich kann den Hund sehen.",
      "short_answer": "Ja",
      "words": ["Kannst", "du", "den", "Hund", "sehen", "Ja", "ich", "kann"],
      "distractor_words": ["Nein", "vielleicht", "Katze", "hören", "groß"]
    }
  ]
}

Informationen: {user-notes_object}
Elternobjekt: {user-notes_parentobject}`

interface PromptLayout {
  name: string
  prompt: string
}

const STORAGE_KEY = 'cm_prompt_layouts'

function loadLayouts(): PromptLayout[] {
  const defaultLayout: PromptLayout = { name: 'Standard', prompt: DEFAULT_PROMPT }
  try {
    const stored = localStorage.getItem(STORAGE_KEY)
    if (!stored) return [defaultLayout]
    const parsed = JSON.parse(stored) as PromptLayout[]
    const hasDefault = parsed.some(l => l.name === 'Standard')
    return hasDefault ? parsed : [defaultLayout, ...parsed]
  } catch {
    return [defaultLayout]
  }
}

function persistLayouts(layouts: PromptLayout[]): void {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(layouts))
}


// ── Component ─────────────────────────────────────────────────────────────────

export default function GenerateIt() {
  const { token } = useAuth()
  const canvasRef = useRef<DrawCanvasHandle>(null)

  const [pictureList, setPictureList] = useState<DirectusPicture[]>([])
  const [currentIndex, setCurrentIndex] = useState(-1)
  const [directusObjects, setDirectusObjects] = useState<DirectusObject[]>([])
  const [selectedObjId, setSelectedObjId] = useState<string | null>(null)
  const [isGenerating, setIsGenerating] = useState(false)
  const [isPublishing, setIsPublishing] = useState(false)
  const [generateResult, setGenerateResult] = useState<GenerateStats | null>(null)
  const [generateError, setGenerateError] = useState<string | null>(null)
  const [publishResult, setPublishResult] = useState<{ q: number; w: number } | null>(null)
  const [questions, setQuestions] = useState<ObjectQuestion[]>([])
  const [objWords, setObjWords] = useState<ObjectWord[]>([])

  // Prompt layouts
  const [layouts, setLayouts] = useState<PromptLayout[]>(loadLayouts)
  const [selectedLayoutName, setSelectedLayoutName] = useState('Standard')
  const [promptText, setPromptText] = useState(() => loadLayouts()[0]?.prompt ?? DEFAULT_PROMPT)
  const [showSaveDialog, setShowSaveDialog] = useState(false)
  const [newLayoutName, setNewLayoutName] = useState('')
  const [promptOpen, setPromptOpen] = useState(false)

  const currentPicture: DirectusPicture | null =
    currentIndex >= 0 && currentIndex < pictureList.length ? pictureList[currentIndex] : null

  const canvasObjects: CanvasObject[] = directusObjects.map((obj, i) => ({
    id: obj.id,
    visible: true,
    selections: obj.selections,
    index: i + 1,
    hierarchy: 1,
  }))

  useEffect(() => {
    if (!token) return
    getDirectusPictures(token, 'drawing_created')
      .then(pics => { setPictureList(pics); setCurrentIndex(pics.length > 0 ? 0 : -1) })
      .catch(console.error)
  }, [token])

  useEffect(() => {
    if (!currentPicture || !token) {
      setDirectusObjects([]); setSelectedObjId(null)
      setGenerateResult(null); setPublishResult(null); setGenerateError(null)
      setQuestions([]); setObjWords([])
      return
    }
    getDirectusObjects(currentPicture.id, token)
      .then(objs => {
        setDirectusObjects(objs)
        if (objs.length > 0) setSelectedObjId(objs[0].id)
        else setSelectedObjId(null)
      })
      .catch(console.error)
  }, [currentPicture?.id, token])

  useEffect(() => {
    if (!selectedObjId || !token) { setQuestions([]); setObjWords([]); return }
    getObjectQuestions(selectedObjId, token).then(setQuestions).catch(console.error)
    getObjectWords(selectedObjId, token).then(setObjWords).catch(console.error)
  }, [selectedObjId, token])

  const reloadQW = async (objId: string) => {
    if (!token) return
    await purgeOrphans(objId, token).catch(console.error)
    const [qs, ws] = await Promise.all([
      getObjectQuestions(objId, token).catch(() => [] as ObjectQuestion[]),
      getObjectWords(objId, token).catch(() => [] as ObjectWord[]),
    ])
    setQuestions(qs)
    setObjWords(ws)
  }

  const handleDeleteQuestion = async (qId: string) => {
    if (!token) return
    await deleteQuestion(qId, token)
    setQuestions(qs => qs.filter(q => q.id !== qId))
  }

  const handleDeleteWord = async (wId: string) => {
    if (!token) return
    await deleteWord(wId, token)
    setObjWords(ws => ws.filter(w => w.id !== wId))
  }

  const handleGenerate = async () => {
    if (!selectedObjId || !token) return
    setIsGenerating(true)
    setGenerateResult(null)
    setGenerateError(null)
    setPublishResult(null)
    try {
      const res = await generateQuestions(selectedObjId, promptText, token)
      setGenerateResult(res.stats)
      reloadQW(selectedObjId)
    } catch (e) {
      setGenerateError(e instanceof Error ? e.message : 'Fehler beim Generieren')
    } finally {
      setIsGenerating(false)
    }
  }

  const handlePublish = async () => {
    if (!selectedObjId || !token) return
    setIsPublishing(true)
    setPublishResult(null)
    try {
      const res = await publishQuestions(selectedObjId, token)
      setPublishResult({ q: res.published_questions, w: res.published_words })
    } catch (e) {
      setGenerateError(e instanceof Error ? e.message : 'Fehler beim Veröffentlichen')
    } finally {
      setIsPublishing(false)
    }
  }

  // Layout handlers
  const handleSelectLayout = (name: string) => {
    const layout = layouts.find(l => l.name === name)
    if (layout) { setSelectedLayoutName(name); setPromptText(layout.prompt) }
  }

  const handleSaveLayout = () => {
    const trimmed = newLayoutName.trim()
    if (!trimmed) return
    const newLayout: PromptLayout = { name: trimmed, prompt: promptText }
    const updated = [...layouts.filter(l => l.name !== trimmed), newLayout]
    setLayouts(updated)
    persistLayouts(updated)
    setSelectedLayoutName(trimmed)
    setNewLayoutName('')
    setShowSaveDialog(false)
  }

  const handleDeleteLayout = (name: string) => {
    if (name === 'Standard') return
    const updated = layouts.filter(l => l.name !== name)
    setLayouts(updated)
    persistLayouts(updated)
    if (selectedLayoutName === name) {
      const first = updated[0]
      setSelectedLayoutName(first.name)
      setPromptText(first.prompt)
    }
  }

  const imageNav = (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div className="image-nav">
        <button className="btn-icon" onClick={() => setCurrentIndex(i => i - 1)} disabled={currentIndex <= 0}>
          <ChevronLeftIcon />
        </button>
        <span className="image-counter">
          {pictureList.length > 0 ? (
            <>
              <span className="image-counter-num">{currentIndex + 1}</span>
              <span className="image-counter-sep">/</span>
              <span className="image-counter-total">{pictureList.length}</span>
            </>
          ) : (
            <span className="image-counter-empty">Keine Bilder</span>
          )}
        </span>
        <button className="btn-icon" onClick={() => setCurrentIndex(i => i + 1)} disabled={currentIndex >= pictureList.length - 1}>
          <ChevronRightIcon />
        </button>
      </div>

      <div style={{ width: 1, height: 24, background: 'var(--border)' }} />

      <button
        className="btn-ghost btn-sm"
        onClick={handleGenerate}
        disabled={isGenerating || isPublishing || !selectedObjId}
        style={isGenerating ? { opacity: 0.7 } : undefined}
      >
        <GenerateIcon />
        {isGenerating ? 'Generiere…' : 'Generate it'}
      </button>
      <button
        className="btn-ghost btn-sm"
        onClick={handlePublish}
        disabled={isPublishing || isGenerating || !selectedObjId || !generateResult}
        title={!generateResult ? 'Erst Generate it ausführen' : undefined}
      >
        <PublishIcon />
        {isPublishing ? 'Veröffentliche…' : 'Publish it'}
      </button>

      {generateResult && !isGenerating && (
        <span style={{ fontSize: 11, color: 'var(--success)', background: 'var(--success-bg)', border: '1px solid var(--success)', borderRadius: 'var(--r-full)', padding: '2px 8px' }}>
          ✓ {generateResult.questions_created}F +{generateResult.words_created}W neu
        </span>
      )}
      {publishResult && (
        <span style={{ fontSize: 11, color: 'var(--primary-muted-fg)', background: 'var(--primary-muted)', border: '1px solid var(--primary)', borderRadius: 'var(--r-full)', padding: '2px 8px' }}>
          ↑ {publishResult.q}F {publishResult.w}W
        </span>
      )}
      {generateError && (
        <span style={{ fontSize: 11, color: 'var(--danger)', background: 'var(--danger-bg)', border: '1px solid var(--danger)', borderRadius: 'var(--r-full)', padding: '2px 8px', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {generateError}
        </span>
      )}

      <div style={{ width: 1, height: 24, background: 'var(--border)' }} />

      <button
        className="btn-ghost btn-sm"
        title="Directus-Schema einmalig konfigurieren (M2M-Relationen)"
        onClick={async () => {
          if (!token) return
          const h = { Authorization: `Bearer ${token}` }
          const [r1, r2] = await Promise.all([
            fetch('/api/setup-schema', { method: 'POST', headers: h }),
            fetch('/api/fix-distractor-field', { method: 'POST', headers: h }),
          ])
          const [d1, d2] = await Promise.all([r1.json(), r2.json()])
          alert(`Setup: ${d1.total} Schritte, ${d1.failed} Fehler\nDistractor-Fix: ${d2.ok ? 'OK' : 'Fehler'}`)
          console.log('[setup-schema]', d1, '[fix-distractor]', d2)
        }}
      >
        ⚙ Schema
      </button>

      <button
        className="btn-ghost btn-sm"
        title="Alle verwaisten Junction-Einträge global bereinigen"
        onClick={async () => {
          if (!token) return
          if (!confirm('Alle verwaisten Junction-Einträge (gelöschte Fragen/Wörter) global bereinigen?')) return
          try {
            const r = await purgeAllOrphans(token)
            alert(`Bereinigt: ${r.orphans_removed} verwaiste Einträge entfernt`)
            if (selectedObjId) await reloadQW(selectedObjId)
          } catch (e: unknown) {
            alert(`Fehler: ${e instanceof Error ? e.message : e}`)
          }
        }}
      >
        🧹 Bereinigen
      </button>
    </div>
  )

  return (
    <div className="app-shell">
      <Topbar page="generate" center={imageNav} />

      <div className="workspace">
        {/* Left: Objects */}
        <aside className="sidebar">
          <div className="sidebar-panel" style={{ flex: 1 }}>
            <h3 className="sidebar-heading">
              Objekte
              {directusObjects.length > 0 && <span className="badge">{directusObjects.length}</span>}
            </h3>
            <GenerateObjectsList
              objects={directusObjects}
              selectedId={selectedObjId}
              onSelect={id => setSelectedObjId(id)}
            />
          </div>
        </aside>

        {/* Center: Canvas + Prompt Bar */}
        <main className="canvas-area canvas-area--relative">
          <div className="canvas-frame">
            <DrawCanvas
              ref={canvasRef}
              imageSrc={currentPicture && token ? directusAssetUrl(currentPicture.media, token) : null}
              objects={canvasObjects}
              selectedObjectId={selectedObjId}
              mode="rect"
              onHasSelection={() => {}}
              readOnly
            />
          </div>

          {/* Collapsible Prompt Bar */}
          <div className={`prompt-bar${promptOpen ? ' prompt-bar--open' : ''}`}>
            <div className="prompt-bar-header" onClick={() => setPromptOpen(o => !o)}>
              <span className="prompt-bar-chevron">{promptOpen ? '▾' : '▸'}</span>
              <span className="prompt-bar-title">Prompt</span>
              <span className="prompt-bar-layout-name">{selectedLayoutName}</span>
              <div className="prompt-bar-actions" onClick={e => e.stopPropagation()}>
                <select
                  className="prompt-layout-select"
                  value={selectedLayoutName}
                  onChange={e => handleSelectLayout(e.target.value)}
                >
                  {layouts.map(l => (
                    <option key={l.name} value={l.name}>{l.name}</option>
                  ))}
                </select>
                {selectedLayoutName !== 'Standard' && (
                  <button
                    className="btn-ghost btn-sm btn-danger"
                    onClick={() => handleDeleteLayout(selectedLayoutName)}
                    title="Layout löschen"
                  >✕</button>
                )}
                <button
                  className="btn-ghost btn-sm"
                  onClick={() => { setNewLayoutName(''); setShowSaveDialog(s => !s) }}
                >
                  <SaveIcon />
                  Speichern
                </button>
              </div>
            </div>

            {promptOpen && (
              <div className="prompt-bar-body">
                {showSaveDialog && (
                  <div className="prompt-save-dialog">
                    <input
                      type="text"
                      placeholder="Layout-Name"
                      value={newLayoutName}
                      onChange={e => setNewLayoutName(e.target.value)}
                      onKeyDown={e => { if (e.key === 'Enter') handleSaveLayout(); if (e.key === 'Escape') setShowSaveDialog(false) }}
                      autoFocus
                    />
                    <button className="btn-ghost btn-sm" onClick={handleSaveLayout} disabled={!newLayoutName.trim()}>
                      Speichern
                    </button>
                    <button className="btn-ghost btn-sm" onClick={() => setShowSaveDialog(false)}>
                      Abbrechen
                    </button>
                  </div>
                )}
                <textarea
                  className="prompt-textarea"
                  value={promptText}
                  onChange={e => setPromptText(e.target.value)}
                  placeholder="Prompt eingeben…"
                />
              </div>
            )}
          </div>
        </main>

        {/* Words sidebar */}
        <aside className="sidebar sidebar--words">
          <div className="sidebar-panel" style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <h3 className="sidebar-heading" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              Wörter
              {objWords.length > 0 && <span className="badge">{objWords.length}</span>}
              {selectedObjId && (
                <button onClick={() => reloadQW(selectedObjId)} style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--muted)', padding: '0 2px' }} title="Neu laden">↺</button>
              )}
            </h3>
            {objWords.length === 0 ? (
              <div className="empty-state">–</div>
            ) : (
              <div style={{ overflowY: 'auto', flex: 1, padding: '4px 8px', display: 'flex', flexWrap: 'wrap', gap: 4, alignContent: 'flex-start' }}>
                {objWords.map(w => {
                  const isInvalid = /[\s,;]/.test(w.title_de)
                  return (
                  <span key={w.id} className="word-chip" style={{ display: 'inline-flex', alignItems: 'center', gap: 3, ...(isInvalid ? { background: 'var(--warning-bg, #fff3cd)', border: '1px solid var(--warning, #f0a500)', color: 'var(--warning-fg, #7a4f00)' } : {}) }} title={isInvalid ? 'Mehrwortiger Eintrag – bitte löschen' : undefined}>
                    {w.title_de}
                    <button
                      onClick={() => handleDeleteWord(w.id)}
                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, lineHeight: 1, color: 'var(--muted)', fontSize: 10, marginLeft: 1 }}
                      title="Löschen"
                    >✕</button>
                  </span>
                  )
                })}
              </div>
            )}
          </div>
        </aside>

        {/* Questions sidebar */}
        <aside className="sidebar sidebar--right" style={{ width: 300, minWidth: 240 }}>
          <div className="sidebar-panel" style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <h3 className="sidebar-heading" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              Fragen
              {questions.length > 0 && <span className="badge">{questions.length}</span>}
              {selectedObjId && (
                <button onClick={() => reloadQW(selectedObjId)} style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--muted)', padding: '0 2px' }} title="Neu laden">↺</button>
              )}
            </h3>
            {questions.length === 0 ? (
              <div className="empty-state">Klicke „Generate it".</div>
            ) : (
              <div style={{ overflowY: 'auto', flex: 1 }}>
                {questions.map(q => (
                  <div key={q.id} style={{ padding: '7px 10px', borderBottom: '1px solid var(--border)', fontSize: 12 }}>
                    {/* Header: Level + Status + Delete */}
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 3 }}>
                      <span style={{ fontWeight: 700, color: 'var(--muted)', fontSize: 10 }}>
                        L{q.level}
                        {q.status === 'published' && <span style={{ marginLeft: 4, color: 'var(--success)' }}>↑</span>}
                      </span>
                      <button
                        onClick={() => handleDeleteQuestion(q.id)}
                        style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, color: 'var(--muted)', fontSize: 11 }}
                        title="Frage löschen"
                      >✕</button>
                    </div>
                    {/* Frage */}
                    <div style={{ color: 'var(--fg)', marginBottom: 2 }}>{q.question_de}</div>
                    {/* Antwort */}
                    <div style={{ color: 'var(--muted)', fontStyle: 'italic', marginBottom: q.short_answer_de || q.distractor_words?.length ? 4 : 0 }}>{q.answer_de}</div>
                    {/* Short Answer */}
                    {q.short_answer_de && (
                      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 3 }}>
                        <span style={{ fontSize: 10, color: 'var(--muted)', flexShrink: 0 }}>Kurz:</span>
                        <span style={{ background: 'var(--primary-muted, #e8f0fe)', color: 'var(--primary)', borderRadius: 4, padding: '1px 6px', fontSize: 11, fontWeight: 600 }}>
                          {q.short_answer_de}
                        </span>
                      </div>
                    )}
                    {/* Distractor Words */}
                    {q.distractor_words?.length > 0 && (
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
                        <span style={{ fontSize: 10, color: 'var(--muted)', alignSelf: 'center', flexShrink: 0 }}>Ablenker:</span>
                        {q.distractor_words.map(dw => (
                          <span key={dw} style={{ background: 'var(--bg-muted, #f5f5f5)', border: '1px solid var(--border)', borderRadius: 4, padding: '1px 5px', fontSize: 10 }}>
                            {dw}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        </aside>
      </div>
    </div>
  )
}