'use client'

import { useState } from 'react'
import { useTheme } from '@/lib/ThemeContext'

const STEPS: { title: string; body: string }[] = [
  {
    title: '1. Klassen, Lehrer, Faecher, Raeume anlegen',
    body: 'Stammdaten zuerst — der Solver kann nur scheduln was er kennt. Ohne mindestens 1 Klasse, 1 Fach, 1 Raum und 1 Lehrer wird der Plan leer.',
  },
  {
    title: '2. Zeitraster definieren',
    body: 'Wochentag + Stundennummer + Start/Ende fuer jeden Slot. Pausen anhaken; der Solver belegt sie nicht.',
  },
  {
    title: '3. Stundentafel + Lehrauftraege',
    body: 'Stundentafel: pro Klasse, wie viele Wochenstunden welches Fach. Lehrauftraege: welcher Lehrer unterrichtet welches Fach in welcher Klasse. Ohne Lehrauftrag wird die Lesson uebersprungen.',
  },
  {
    title: '4. Regeln (Constraints) — optional',
    body: 'Lehrer-Abwesenheiten, Fach-Bevorzugungen, Raum-Sperren. Hart-Regeln muss der Solver einhalten, Soft-Regeln werden gewichtet.',
  },
  {
    title: '5. Plan generieren',
    body: 'Zurueck auf den Plan-Tab → "Neuen Plan generieren". Der Solver laeuft im Hintergrund (bis zu 60 s) und schreibt das Ergebnis direkt in die Datenbank. Status erscheint live in der Liste.',
  },
  {
    title: '6. Cells anpinnen + Re-Solve',
    body: 'Im Wochengrid einzelne Stunden anpinnen (Schloss-Icon). Beim naechsten Solve mit dem Plan als "Basieren auf"-Quelle bleiben die gepinnten Cells stehen, alles andere wird neu gerechnet.',
  },
]

export function HelpPanel() {
  const { isDark } = useTheme()
  const [open, setOpen] = useState(false)

  return (
    <div
      className={`mb-4 rounded-2xl border backdrop-blur-xl ${
        isDark ? 'bg-white/10 border-white/20 text-white' : 'bg-white/80 border-black/10 text-slate-900'
      }`}
      data-testid="help-panel"
    >
      <button
        onClick={() => setOpen(o => !o)}
        className="w-full flex items-center justify-between px-4 py-3 text-left"
      >
        <span className="flex items-center gap-2 font-medium">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Bedienungsanleitung
          <span className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
            (6 Schritte vom Setup bis zum fertigen Stundenplan)
          </span>
        </span>
        <span className={`text-sm transition-transform ${open ? 'rotate-180' : ''}`}>▾</span>
      </button>
      {open && (
        <div className={`px-4 pb-4 space-y-3 border-t ${isDark ? 'border-white/10' : 'border-black/10'}`}>
          {STEPS.map((s, i) => (
            <div key={i} className="pt-3">
              <h4 className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>{s.title}</h4>
              <p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>{s.body}</p>
            </div>
          ))}
          <p className={`pt-3 text-xs italic ${isDark ? 'text-white/40' : 'text-slate-500'}`}>
            Tipp: Solver-Probleme im Status-Feld der Plan-Liste — &quot;Keine Lessons&quot; heisst meistens fehlende
            Lehrauftraege; &quot;Nicht loesbar&quot; heisst harte Constraints widersprechen sich.
          </p>
        </div>
      )}
    </div>
  )
}