// Die Einstellungen — Sektionswahl links (oder oben im schmalen Fenster),
// die Karten rechts. Jede Karte ist eine Datei in Karten.tsx (5.5.0).
import { useEffect, useState } from 'react'
import type { HauptStatus } from '../../gemeinsam/nachrichten'
import type { Verbindung } from '../kernverbindung'
import {
  AblageKarte,
  AllgemeinKarte,
  AutomatikKarte,
  BenachrichtigungKarte,
  KompressionKarte,
  MakemkvKarte,
  MedienserverKarte,
  MetadatenKarte,
  RohDateienKarte,
  UpdateKarte,
  WerkzeugeKarte,
} from './Karten'

const SEKTIONEN: Array<[string, string]> = [
  ['ablage', 'Ablage'],
  ['kompression', 'Kompression'],
  ['roh', 'Roh-Dateien'],
  ['automatik', 'Automatik'],
  ['metadaten', 'Metadaten'],
  ['makemkv', 'MakeMKV'],
  ['medienserver', 'Medienserver'],
  ['benachrichtigung', 'Benachrichtigung'],
  ['allgemein', 'Allgemein'],
  ['update', 'Update'],
  ['werkzeuge', 'Werkzeuge'],
]

export function Einstellungen({ verbindung, haupt, start }: { verbindung: Verbindung; haupt: HauptStatus | null; start?: string }) {
  const [aktiv, setAktiv] = useState(start ?? 'ablage')

  const springe = (id: string): void => {
    setAktiv(id)
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
  // „alle unter Roh-Dateien →" aus der Übersicht springt direkt zur Karte.
  useEffect(() => {
    if (start !== undefined) setTimeout(() => springe(start), 50)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [start])

  // Schmales Fenster: die Sektionswahl legt sich als Zeile über die Karten.
  // Ab lg steht sie wieder als mitlaufende Spalte daneben (Commander-Fund
  // 01.09.2026: „alles gequetscht").
  return (
    <div className="flex flex-col gap-5 lg:flex-row lg:gap-8">
      <nav className="flex flex-row flex-wrap gap-1 lg:sticky lg:top-4 lg:h-fit lg:w-44 lg:flex-none lg:flex-col">
        {SEKTIONEN.map(([id, name]) => (
          <button
            key={id}
            onClick={() => springe(id)}
            className={`rounded-lg px-3 py-1.5 text-left text-[13px] ${
              aktiv === id ? 'border border-gold/40 bg-gold/12 font-semibold text-gold-hell' : 'border border-transparent text-dunst hover:bg-white/5 hover:text-schnee'
            }`}
          >
            {name}
          </button>
        ))}
      </nav>

      {/* Kein max-w mehr: Der 672-px-Deckel war der Grund, warum in einem
          breiten Fenster alles links klebte und rechts nichts stand. */}
      <div className="min-w-0 flex-1 space-y-5">
        <AblageKarte verbindung={verbindung} />
        <KompressionKarte verbindung={verbindung} />
        <RohDateienKarte verbindung={verbindung} aktivFuer={start === 'roh'} />
        <AutomatikKarte verbindung={verbindung} />
        <MetadatenKarte verbindung={verbindung} />
        <MakemkvKarte verbindung={verbindung} />
        <MedienserverKarte verbindung={verbindung} />
        <BenachrichtigungKarte verbindung={verbindung} />
        <AllgemeinKarte verbindung={verbindung} haupt={haupt} />
        <UpdateKarte verbindung={verbindung} haupt={haupt} />
        <WerkzeugeKarte verbindung={verbindung} />
      </div>
    </div>
  )
}