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,
  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 = (objId: string) => {
    if (!token) return
    getObjectQuestions(objId, token).then(setQuestions).catch(console.error)
    getObjectWords(objId, token).then(setObjWords).catch(console.error)
  }

  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 res = await fetch('/api/setup-schema', { method: 'POST', headers: { Authorization: `Bearer ${token}` } })
          const d = await res.json()
          alert(`Setup: ${d.total} Schritte, ${d.failed} Fehler.\nSiehe Konsole für Details.`)
          console.log('[setup-schema]', d)
        }}
      >
        ⚙ Schema
      </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">
              Wörter
              {objWords.length > 0 && <span className="badge">{objWords.length}</span>}
            </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 => (
                  <span key={w.id} className="word-chip" style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                    {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: 280, minWidth: 220 }}>
          <div className="sidebar-panel" style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <h3 className="sidebar-heading">
              Fragen
              {questions.length > 0 && <span className="badge">{questions.length}</span>}
            </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: '6px 10px', borderBottom: '1px solid var(--border)', fontSize: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 4 }}>
                      <span style={{ fontWeight: 600, color: 'var(--muted)', fontSize: 10, flexShrink: 0 }}>
                        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, lineHeight: 1, color: 'var(--muted)', fontSize: 11, flexShrink: 0 }}
                        title="Frage löschen"
                      >✕</button>
                    </div>
                    <div style={{ marginTop: 2, color: 'var(--fg)' }}>{q.question_de}</div>
                    <div style={{ marginTop: 2, color: 'var(--muted)', fontStyle: 'italic' }}>{q.answer_de}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </aside>
      </div>
    </div>
  )
}