/* portal.jsx — Kundenportal: Login + (nach Login) Schulungs-Videos */
const { useState: useStatePt, useEffect: useEffectPt } = React;

const PORTAL_KEY = 'bv_portal_in';

const TRAININGS = [
  { t: 'Social Media Basics', g: 'g0', dur: '42 Min', lessons: 6, lvl: 'Einstieg',
    d: 'Plattformen, Algorithmen und die Grundlagen für einen souveränen Auftritt.' },
  { t: 'Content Creation Workshop', g: 'g1', dur: '1 Std 18 Min', lessons: 9, lvl: 'Praxis',
    d: 'Foto, Video und Grafik selbst produzieren — mit dem, was Du schon im Sack hast.' },
  { t: 'Reels, die performen', g: 'g2', dur: '55 Min', lessons: 7, lvl: 'Praxis',
    d: 'Hooks, Schnitt und Timing für Reels, die in den ersten 3 Sekunden fesseln.' },
  { t: 'Strategie & Redaktionsplanung', g: 'g0', dur: '1 Std 04 Min', lessons: 8, lvl: 'Fortgeschritten',
    d: 'Vom Ziel zum Redaktionsplan: planbar statt aus dem Bauch heraus posten.' },
  { t: 'Community Management', g: 'g1', dur: '38 Min', lessons: 5, lvl: 'Praxis',
    d: 'Kommentare, DMs und Krisen souverän und markengerecht beantworten.' },
  { t: 'Ads & Performance', g: 'g2', dur: '1 Std 12 Min', lessons: 10, lvl: 'Fortgeschritten',
    d: 'Kampagnen aufsetzen, Zielgruppen schärfen und Ergebnisse richtig lesen.' },
];

function PtIcon({ name }) {
  const p = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'play': return <svg width="22" height="22" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="currentColor" stroke="none" /></svg>;
    case 'lock': return <svg width="16" height="16" viewBox="0 0 24 24"><rect x="4.5" y="10.5" width="15" height="10" rx="2.5" {...p} /><path d="M8 10.5V8a4 4 0 018 0v2.5" {...p} /></svg>;
    case 'clock': return <svg width="15" height="15" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5" {...p} /><path d="M12 7.5V12l3 2" {...p} /></svg>;
    case 'list': return <svg width="15" height="15" viewBox="0 0 24 24"><path d="M8 7h12M8 12h12M8 17h12M4 7h.01M4 12h.01M4 17h.01" {...p} /></svg>;
    case 'logout': return <svg width="17" height="17" viewBox="0 0 24 24"><path d="M15 4h3a2 2 0 012 2v12a2 2 0 01-2 2h-3M10 12H3m0 0l3.5-3.5M3 12l3.5 3.5" {...p} /></svg>;
    case 'download': return <svg width="15" height="15" viewBox="0 0 24 24"><path d="M12 4v11m0 0l-4-4m4 4l4-4M5 19h14" {...p} /></svg>;
    default: return null;
  }
}

function PortalLogin({ onLogin }) {
  const { Btn } = window;
  const [f, setF] = useStatePt({ mail: '', pw: '' });
  const [err, setErr] = useStatePt({});
  const upd = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.mail)) er.mail = 1;
    if (!f.pw.trim()) er.pw = 1;
    setErr(er);
    if (!Object.keys(er).length) onLogin();
  };
  return (
    <div className="portal-card">
      <div className="portal-aside">
        <div className="portal-aside-mark"><span>#</span></div>
        <div>
          <h2 className="portal-aside-title">Dein<br />Kundenportal</h2>
          <p className="portal-aside-text">Alle Schulungen, Inhalte und Materialien an einem Ort — jederzeit abrufbar.</p>
        </div>
        <ul className="portal-aside-list">
          <li>Schulungs-Videos auf Abruf</li>
          <li>Deine Inhalte & Freigaben</li>
          <li>Direkter Draht zum Team</li>
        </ul>
      </div>

      <div className="portal-form">
        <span className="kicker">Login</span>
        <h3 className="portal-form-title">Willkommen zurück.</h3>
        <p className="portal-form-sub">Melde Dich an, um auf Deine Schulungen zuzugreifen.</p>
        <form onSubmit={submit} noValidate>
          <div className="field">
            <input id="pmail" type="email" value={f.mail} onChange={upd('mail')} placeholder=" "
              style={err.mail ? { borderColor: 'var(--holo-pink)' } : {}} />
            <label htmlFor="pmail">E-Mail</label>
          </div>
          <div className="field">
            <input id="ppw" type="password" value={f.pw} onChange={upd('pw')} placeholder=" "
              style={err.pw ? { borderColor: 'var(--holo-pink)' } : {}} />
            <label htmlFor="ppw">Passwort</label>
          </div>
          <div className="portal-row">
            <label className="portal-check"><input type="checkbox" defaultChecked /> Angemeldet bleiben</label>
            <a className="portal-link">Passwort vergessen?</a>
          </div>
          <Btn>Einloggen</Btn>
        </form>
        <p className="portal-hint"><span className="portal-lock"><PtIcon name="lock" /></span> Demo-Zugang — beliebige E-Mail &amp; Passwort genügen.</p>
      </div>
    </div>
  );
}

const INVOICES = [
  { nr: '2026-016', date: '20.05.2026', desc: 'Ads-Management · Mai', amount: 680, due: '03.06.2026', status: 'open' },
  { nr: '2026-014', date: '12.05.2026', desc: 'Social-Media-Betreuung · Mai', amount: 1450, due: '26.05.2026', status: 'open' },
  { nr: '2026-009', date: '03.04.2026', desc: 'Content Creation · Q2-Paket', amount: 2800, due: '17.04.2026', status: 'overdue' },
  { nr: '2026-006', date: '08.03.2026', desc: 'Social-Media-Betreuung · März', amount: 1450, due: '22.03.2026', status: 'paid' },
  { nr: '2026-003', date: '05.02.2026', desc: 'Reels-Produktion (3 Clips)', amount: 960, due: '19.02.2026', status: 'paid' },
  { nr: '2025-041', date: '14.12.2025', desc: 'Strategie-Workshop', amount: 1200, due: '28.12.2025', status: 'paid' },
];
const INV_STATUS = {
  paid: { label: 'Bezahlt', cls: 'paid' },
  open: { label: 'Offen', cls: 'open' },
  overdue: { label: 'Überfällig', cls: 'overdue' },
};
const fmtCHF = (n) => 'CHF ' + n.toLocaleString('de-CH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

function Rechnungen() {
  const sum = (st) => INVOICES.filter((i) => i.status === st).reduce((s, i) => s + i.amount, 0);
  return (
    <div className="inv">
      <div className="inv-stats">
        <div className="inv-stat"><span className="inv-stat-l">Offen</span><span className="inv-stat-v">{fmtCHF(sum('open'))}</span></div>
        <div className="inv-stat inv-stat--over"><span className="inv-stat-l">Überfällig</span><span className="inv-stat-v">{fmtCHF(sum('overdue'))}</span></div>
        <div className="inv-stat"><span className="inv-stat-l">Bezahlt</span><span className="inv-stat-v">{fmtCHF(sum('paid'))}</span></div>
      </div>
      <div className="inv-table">
        <div className="inv-row inv-row--head">
          <span>Rechnung</span><span>Leistung</span><span>Betrag</span><span>Fällig</span><span>Status</span><span></span>
        </div>
        {INVOICES.map((i) => {
          const s = INV_STATUS[i.status];
          return (
            <div className="inv-row" key={i.nr}>
              <span className="inv-nr" data-l="Rechnung">#{i.nr}<em>{i.date}</em></span>
              <span className="inv-desc" data-l="Leistung">{i.desc}</span>
              <span className="inv-amt" data-l="Betrag">{fmtCHF(i.amount)}</span>
              <span className="inv-due" data-l="Fällig">{i.due}</span>
              <span data-l="Status"><span className={`inv-badge ${s.cls}`}>{s.label}</span></span>
              <span className="inv-act"><button className="inv-dl"><PtIcon name="download" /> PDF</button></span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function PortalDashboard({ onLogout }) {
  const [active, setActive] = useStatePt(null);
  const [tab, setTab] = useStatePt('schulungen');
  useEffectPt(() => {
    const onKey = (e) => { if (e.key === 'Escape') setActive(null); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  const heads = {
    schulungen: { t: <>Deine <span className="grad-text">Schulungen</span>.</>, sub: TRAININGS.length + ' Module · jederzeit abrufbar' },
    rechnungen: { t: <>Deine <span className="grad-text">Rechnungen</span>.</>, sub: 'Übersicht aller gestellten Rechnungen' },
  };
  return (
    <div className="portal-dash">
      <div className="portal-dash-head">
        <div>
          <span className="kicker">Kundenportal</span>
          <h2 className="portal-dash-title">{heads[tab].t}</h2>
          <p className="portal-dash-sub">{heads[tab].sub}</p>
        </div>
        <button className="portal-logout" onClick={onLogout}><PtIcon name="logout" /> Abmelden</button>
      </div>

      <div className="portal-tabs">
        {[['schulungen', 'Schulungen'], ['rechnungen', 'Rechnungen']].map(([id, l]) =>
        <button key={id} className={`portal-tab ${tab === id ? 'on' : ''}`} onClick={() => setTab(id)}>{l}</button>
        )}
      </div>

      {tab === 'rechnungen' && <Rechnungen />}

      {tab === 'schulungen' && <div className="portal-grid">
        {TRAININGS.map((v, i) =>
          <button className="vcard" key={i} onClick={() => setActive(v)}>
            <div className={`vthumb ${v.g}`}>
              <span className="vplay"><PtIcon name="play" /></span>
              <span className="vdur"><PtIcon name="clock" /> {v.dur}</span>
              <span className="vtag">Platzhalter</span>
            </div>
            <div className="vbody">
              <div className="vmeta"><span className="pill">{v.lvl}</span><span className="vlessons"><PtIcon name="list" /> {v.lessons} Lektionen</span></div>
              <h3 className="vtitle">{v.t}</h3>
              <p className="vdesc">{v.d}</p>
              <div className="vprog"><i style={{ width: (10 + (i * 13) % 70) + '%' }}></i></div>
            </div>
          </button>
        )}
      </div>}

      {active &&
        <div className="vmodal-back" onClick={() => setActive(null)}>
          <div className="vmodal" onClick={(e) => e.stopPropagation()}>
            <button className="vmodal-close" onClick={() => setActive(null)} aria-label="Schliessen">✕</button>
            <div className={`vmodal-player ${active.g}`}>
              <span className="vplay vplay--lg"><PtIcon name="play" /></span>
              <span className="vmodal-ph">Platzhalter — Video folgt</span>
            </div>
            <div className="vmodal-info">
              <span className="pill">{active.lvl}</span>
              <h3 className="vmodal-title">{active.t}</h3>
              <p className="vmodal-desc">{active.d}</p>
              <div className="vmodal-meta"><span><PtIcon name="clock" /> {active.dur}</span><span><PtIcon name="list" /> {active.lessons} Lektionen</span></div>
            </div>
          </div>
        </div>}
    </div>
  );
}

function KundenportalPage() {
  const [inside, setInside] = useStatePt(() => {
    try { return localStorage.getItem(PORTAL_KEY) === '1'; } catch (e) { return false; }
  });
  const login = () => { try { localStorage.setItem(PORTAL_KEY, '1'); } catch (e) {} setInside(true); window.scrollTo({ top: 0, behavior: 'auto' }); };
  const logout = () => { try { localStorage.removeItem(PORTAL_KEY); } catch (e) {} setInside(false); };
  return (
    <div className="portal">
      <section className="section portal-sec">
        <div className="wrap">
          {inside ? <PortalDashboard onLogout={logout} /> : <PortalLogin onLogin={login} />}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { KundenportalPage });