/* admin-screens2.jsx — management tables */

function Toolbar({ filters, onNew, newLabel }) {
  return (
    <div className="atoolbar">
      <label className="atoolbar__search">
        <Icon name="search" size={16} />
        <input placeholder="Filtern …" />
      </label>
      <div className="atoolbar__filters">
        {filters && filters.map((f, i) => <button key={i} className={`afilter ${i === 0 ? 'is-active' : ''}`}>{f}</button>)}
      </div>
      {onNew && <button className="btn" onClick={onNew}><Icon name="clipboard" size={15} /> {newLabel}</button>}
    </div>
  );
}

/* ============ Seitenverwaltung ============ */
function AdminPages({ go }) {
  return (
    <div className="ascreen">
      <AScreenHead title="Seitenverwaltung" sub="Alle Seiten der Plattform — Versionen, Sprachen, Status." />
      <Toolbar filters={['Alle', 'Veröffentlicht', 'In Prüfung', 'Entwurf']} onNew={() => go('builder')} newLabel="Neue Seite" />
      <div className="card">
        <table className="atable atable--full">
          <thead><tr><th>Seite</th><th>Route</th><th>Status</th><th>Sprache</th><th>Version</th><th>Sektionen</th><th>Widgets</th><th></th></tr></thead>
          <tbody>
            {ADMIN_PAGES.map(p => (
              <tr key={p.id}>
                <td><span className="atable__t">{p.title}</span><span className="atable__id mono">{p.id} · {p.by}</span></td>
                <td className="mono muted">{p.route}</td>
                <td><StatusPill status={p.status} /></td>
                <td><span className="lang-tags">{p.lang.map(l => <span key={l} className="chip chip--neutral chip--mono">{l}</span>)}</span></td>
                <td className="mono">v{p.ver}</td>
                <td className="mono muted">{p.sections}</td>
                <td className="mono muted">{p.widgets}</td>
                <td><button className="btn btn--ghost atable__btn" onClick={() => go('builder')}>Bearbeiten</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ============ Wiki-Verwaltung ============ */
function AdminWiki() {
  const rows = WIKI_CATS.flatMap(c => c.arts.map(a => ({ cat: c.name.de, t: a.t.de, en: !!a.t.en, min: a.min })));
  return (
    <div className="ascreen">
      <AScreenHead title="Wiki-Verwaltung" sub="Artikel des Wissensbereichs — Kategorie, Übersetzung, Lesedauer." />
      <Toolbar filters={['Alle', 'Nur DE', 'DE + EN']} onNew={() => {}} newLabel="Neuer Artikel" />
      <div className="card">
        <table className="atable atable--full">
          <thead><tr><th>Artikel</th><th>Kategorie</th><th>EN</th><th>Lesedauer</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td><span className="atable__t">{r.t}</span></td>
                <td><span className="chip chip--neutral">{r.cat}</span></td>
                <td>{r.en ? <span className="chip chip--ok">DE · EN</span> : <span className="chip chip--warn">fehlt</span>}</td>
                <td className="mono muted">{r.min} min</td>
                <td><StatusPill status={i % 4 === 1 ? 'review' : 'live'} /></td>
                <td><button className="btn btn--ghost atable__btn">Bearbeiten</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ============ Kursverwaltung ============ */
function AdminKurse() {
  const rows = COURSE_CATEGORIES.flatMap(c => c.courses.map(co => ({ cat: c.label, tint: c.tint, ...co })));
  return (
    <div className="ascreen">
      <AScreenHead title="Kursverwaltung" sub="Kurse je Bereich — Einheiten, Dauer, Level." />
      <Toolbar filters={['Alle', 'Vorbereitung', 'Fitness', 'Mental', 'Material']} onNew={() => {}} newLabel="Neuer Kurs" />
      <div className="card">
        <table className="atable atable--full">
          <thead><tr><th>Kurs</th><th>Bereich</th><th>Level</th><th>Einheiten</th><th>Dauer</th><th></th></tr></thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td><span className="atable__t">{r.t}</span></td>
                <td><span className="chip" data-tint={r.tint} style={{ background: 'var(--tint-bg)', color: 'var(--tint)', borderColor: 'transparent' }}>{r.cat}</span></td>
                <td className="muted">{r.lvl}</td>
                <td className="mono muted">{r.units}</td>
                <td className="mono muted">{r.dur}</td>
                <td><button className="btn btn--ghost atable__btn">Bearbeiten</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ============ Shop-Links ============ */
function AdminShopLinks() {
  return (
    <div className="ascreen">
      <AScreenHead title="Shop-Link-Verwaltung" sub="Externe Produktverlinkungen mit Tracking-Key." />
      <Toolbar filters={['Alle', 'Aktiv', 'Inaktiv']} onNew={() => {}} newLabel="Neuer Link" />
      <div className="card">
        <table className="atable atable--full">
          <thead><tr><th>Produkt</th><th>Preis</th><th>Ziel-URL</th><th>Tracking-Key</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {SHOP.map((s, i) => (
              <tr key={s.id}>
                <td><span className="atable__t">{s.name}</span></td>
                <td className="mono">{s.price}</td>
                <td className="mono muted">shop.ext/{s.id}</td>
                <td className="mono"><span className="chip chip--neutral chip--mono">trk_{s.id}_01</span></td>
                <td><StatusPill status={i === 3 ? 'draft' : 'live'} /></td>
                <td><button className="btn btn--ghost atable__btn">Bearbeiten</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ============ Medienbibliothek ============ */
function AdminMedia() {
  const media = [
    { n: 'hero-rekrut.jpg', s: '1,8 MB', d: '1920×1080' },
    { n: 'packliste-cover.jpg', s: '820 KB', d: '1600×900' },
    { n: 'fitness-lauf.jpg', s: '1,1 MB', d: '1600×1067' },
    { n: 'alpha-paket.png', s: '440 KB', d: '1200×800' },
    { n: 'kalender-icon.svg', s: '12 KB', d: 'vektor' },
    { n: 'dienstgrade.pdf', s: '2,4 MB', d: 'pdf · 6 S.' },
    { n: 'mental-fokus.jpg', s: '960 KB', d: '1500×1000' },
    { n: 'shop-banner.jpg', s: '1,3 MB', d: '1920×640' },
  ];
  return (
    <div className="ascreen">
      <AScreenHead title="Medienbibliothek" sub="Bilder, Dokumente und Vektoren — im Object Storage." >
        <button className="btn"><Icon name="download" size={16} style={{ transform: 'rotate(180deg)' }} /> Hochladen</button>
      </AScreenHead>
      <Toolbar filters={['Alle', 'Bilder', 'Dokumente', 'Vektoren']} />
      <div className="media-grid">
        {media.map((m, i) => (
          <figure key={i} className="media-card card">
            <div className="media-card__thumb">
              {m.d === 'vektor' || m.n.endsWith('.pdf')
                ? <Icon name={m.n.endsWith('.pdf') ? 'fileText' : 'star'} size={28} />
                : <image-slot id={`media-${i}`} class="media-card__slot" shape="rect" placeholder="Bild"></image-slot>}
            </div>
            <figcaption>
              <span className="media-card__n mono">{m.n}</span>
              <span className="media-card__meta muted mono">{m.d} · {m.s}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </div>
  );
}

/* ============ Übersetzungen ============ */
function AdminTranslations() {
  const rows = [
    { key: 'home.hero.title', de: 'Bereit für deinen Dienststart.', en: 'Ready for your service start.', ok: true },
    { key: 'home.hero.cta1', de: 'Vorbereitung starten', en: 'Start preparation', ok: true },
    { key: 'wiki.title', de: 'Wiki & Orientierung', en: 'Wiki & orientation', ok: true },
    { key: 'wiki.packliste.lead', de: 'Was mit muss, was bleibt zuhause.', en: '', ok: false },
    { key: 'shop.alpha.desc', de: 'Komplettpaket: alle Checklisten …', en: '', ok: false },
    { key: 'footer.disclaimer', de: 'Inoffizielles, privates Angebot …', en: 'Unofficial, private offer …', ok: true },
  ];
  return (
    <div className="ascreen">
      <AScreenHead title="Übersetzungsverwaltung" sub="DE als Default, EN optional. Fehlende Strings hervorgehoben." >
        <div className="seg-tabs"><button className="is-active">DE → EN</button><button>Fehlend</button></div>
      </AScreenHead>
      <div className="card">
        <table className="atable atable--full atable--trans">
          <thead><tr><th>Schlüssel</th><th>Deutsch</th><th>Englisch</th><th>Status</th></tr></thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i} className={!r.ok ? 'is-missing' : ''}>
                <td className="mono"><span className="chip chip--neutral chip--mono">{r.key}</span></td>
                <td>{r.de}</td>
                <td className={r.en ? '' : 'muted'}>{r.en || '— fehlt —'}</td>
                <td>{r.ok ? <span className="chip chip--ok">vollständig</span> : <span className="chip chip--warn">offen</span>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ============ Nutzerrollen ============ */
function AdminRoles() {
  const lvl = ['—', 'teilw.', 'voll'];
  return (
    <div className="ascreen">
      <AScreenHead title="Nutzerrollen & Rechte" sub="Sechs Rollen, Rechte je Modul. Audit erfasst jede Änderung." >
        <button className="btn"><Icon name="user" size={16} /> Nutzer einladen</button>
      </AScreenHead>

      <div className="card team-card">
        <header className="dash-panel__head"><h2>Team</h2><span className="muted mono">{TEAM.length} Nutzer</span></header>
        <table className="atable atable--full">
          <thead><tr><th>Name</th><th>Rolle</th><th>E-Mail</th><th>Zuletzt aktiv</th></tr></thead>
          <tbody>
            {TEAM.map((u, i) => (
              <tr key={i}>
                <td><span className="user-cell"><span className="user-cell__dot" style={{ background: `var(--user-dot-${u.dot}, var(--accent))` }} />{u.name}</span></td>
                <td><span className="chip">{u.role}</span></td>
                <td className="mono muted">{u.mail}@rekruten-schmiede.de</td>
                <td className="muted">{u.last}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="card perm-card">
        <header className="dash-panel__head"><h2>Rechte-Matrix</h2></header>
        <div className="perm-scroll">
          <table className="atable perm-table">
            <thead><tr><th>Modul</th>{ROLES.map(r => <th key={r}>{r}</th>)}</tr></thead>
            <tbody>
              {PERM_MODULES.map(m => (
                <tr key={m}>
                  <td className="perm-table__mod">{m}</td>
                  {PERM_MATRIX[m].map((p, i) => (
                    <td key={i}><span className={`perm-cell perm-cell--${p}`}>{lvl[p]}</span></td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminPages, AdminWiki, AdminKurse, AdminShopLinks, AdminMedia, AdminTranslations, AdminRoles });