/* Powermieter — Vertrags-Lifecycle: Fristen & Kündigung · Mieterwechsel · Automatisierung */
const { useState: useLcS } = React;

/* ---- Status für Lifecycle ---- */
const LC_STATUS = {
  aktiv:       { label: 'Aktiv',          tone: 'positive', dot: 'var(--positive-500)' },
  verlaengert: { label: 'Verlängert',     tone: 'positive', dot: 'var(--positive)' },
  auslaufend:  { label: 'Läuft bald aus', tone: 'warn',     dot: 'var(--warn-500)' },
  gekuendigt:  { label: 'Gekündigt',      tone: 'gray',     dot: 'var(--text-3)' },
  wechsel:     { label: 'In Mieterwechsel', tone: 'accent', dot: 'var(--accent)' },
};
function LcBadge({ s }) {
  const st = LC_STATUS[s] || LC_STATUS.aktiv;
  return <span className={`pm-sbadge pm-sbadge-${st.tone}`}><span className="pm-sbadge-dot" style={{ background: st.dot }} />{st.label}</span>;
}

/* ---- Vertragsfristen (Mock) ---- */
const LC_CONTRACTS = [
  { whg: 'W01', name: 'Anna Berger',     modell: 'Mieterstrom', start: '01.06.2024', laufzeit: '24 Mon.', ende: '31.05.2026', frist: '3 Mon.', auto: true,  status: 'verlaengert', tageBis: 320 },
  { whg: 'W02', name: 'Familie Çelik',   modell: 'Mieterstrom', start: '01.07.2024', laufzeit: '24 Mon.', ende: '30.06.2026', frist: '3 Mon.', auto: true,  status: 'aktiv',       tageBis: 371 },
  { whg: 'W04', name: 'Max Mustermann',  modell: 'Mieterstrom', start: '15.07.2024', laufzeit: '12 Mon.', ende: '14.07.2026', frist: '6 Wochen', auto: false, status: 'auslaufend',  tageBis: 20 },
  { whg: 'W07', name: 'Hr. & Fr. Yılmaz',modell: 'gGV',         start: '01.05.2024', laufzeit: '24 Mon.', ende: '30.04.2026', frist: '3 Mon.', auto: true,  status: 'aktiv',       tageBis: 310 },
  { whg: 'W08', name: 'Clara Hoffmann',  modell: 'Mieterstrom', start: '20.05.2024', laufzeit: '12 Mon.', ende: '19.05.2026', frist: '6 Wochen', auto: false, status: 'auslaufend',  tageBis: 45 },
  { whg: 'W09', name: 'Jonas Krüger',    modell: 'Mieterstrom', start: '10.08.2024', laufzeit: '24 Mon.', ende: '09.08.2026', frist: '3 Mon.', auto: true,  status: 'wechsel',     tageBis: 410 },
  { whg: 'W11', name: 'Mara Schulz',     modell: 'gGV',         start: '01.03.2024', laufzeit: '12 Mon.', ende: '28.02.2026', frist: '6 Wochen', auto: false, status: 'gekuendigt',  tageBis: -60 },
];

function FristenView() {
  const auslaufend = LC_CONTRACTS.filter(c => c.status === 'auslaufend').length;
  const autoRenew = LC_CONTRACTS.filter(c => c.auto).length;
  const gekuendigt = LC_CONTRACTS.filter(c => c.status === 'gekuendigt').length;

  const radar = [...LC_CONTRACTS].filter(c => c.tageBis >= 0 && c.tageBis < 120).sort((a, b) => a.tageBis - b.tageBis);

  return (
    <div className="pm-cockpit">
      <div className="pm-kpis pm-kpis-4">
        <KPI icon={<I.signature />} value={LC_CONTRACTS.length} label="Laufende Verträge" sub="im Objekt" />
        <KPI icon={<I.clock />} value={auslaufend} label="Laufen bald aus" tone={auslaufend ? 'warn' : 'positive'} sub="innerhalb der Frist" />
        <KPI icon={<I.refresh />} value={autoRenew} label="Auto-Verlängerung" tone="accent" sub="aktiv geschaltet" />
        <KPI icon={<I.x />} value={gekuendigt} label="Gekündigt" sub="in Abwicklung" />
      </div>

      {/* Fristen-Radar */}
      <div className="card card-pad">
        <div className="pm-card-head"><h3 className="pm-card-title"><I.calendar size={17} /> Fristen-Radar · nächste 120 Tage</h3></div>
        <div className="pm-radar">
          {radar.map(c => {
            const urgent = c.tageBis <= 30;
            return (
              <div className={'pm-radar-row' + (urgent ? ' pm-radar-urgent' : '')} key={c.whg}>
                <div className="pm-radar-when">
                  <div className="pm-radar-days tnum">{c.tageBis}</div>
                  <div className="pm-radar-days-l">Tage</div>
                </div>
                <div className="pm-radar-bar-wrap">
                  <div className="pm-radar-line"><span className="pm-radar-fill" style={{ width: (100 - c.tageBis / 120 * 100) + '%' }} /></div>
                  <div className="pm-radar-meta"><b className="mono">{c.whg}</b> · {c.name} — Vertragsende {c.ende} · Kündigungsfrist {c.frist}</div>
                </div>
                {c.auto
                  ? <span className="chip chip-positive"><I.refresh size={12} /> verlängert autom.</span>
                  : <Button size="sm" variant={urgent ? 'primary' : 'ghost'} icon={<I.send size={14} />}>Handeln</Button>}
              </div>
            );
          })}
        </div>
      </div>

      {/* Vertragsfristen-Tabelle */}
      <div className="card pm-table-card">
        <div className="pm-ctr pm-ctr-head pm-ctr-fr">
          <div className="pm-ctd">Einheit</div>
          <div className="pm-ctd">Modell</div>
          <div className="pm-ctd">Laufzeit</div>
          <div className="pm-ctd">Vertragsende</div>
          <div className="pm-ctd">Kündigungsfrist</div>
          <div className="pm-ctd">Verlängerung</div>
          <div className="pm-ctd">Status</div>
        </div>
        {LC_CONTRACTS.map(c => (
          <div className="pm-ctr pm-ctr-fr" key={c.whg}>
            <div className="pm-ctd"><b className="mono">{c.whg}</b><span className="pm-ctd-loc">{c.name}</span></div>
            <div className="pm-ctd">{c.modell}</div>
            <div className="pm-ctd mono">{c.laufzeit}</div>
            <div className="pm-ctd"><span className={c.status === 'auslaufend' ? 'pm-due-warn' : ''}>{c.ende}</span></div>
            <div className="pm-ctd">{c.frist}</div>
            <div className="pm-ctd">{c.auto ? <span className="chip chip-positive"><I.check size={12} /> automatisch</span> : <span className="chip"><I.clock size={12} /> manuell</span>}</div>
            <div className="pm-ctd"><LcBadge s={c.status} /></div>
          </div>
        ))}
      </div>
      <p className="pm-cockpit-foot"><I.info size={14} /> Fristen, Laufzeiten & Kündigungen werden je Vertrag in <span className="mono">contract_obligations</span> geführt; jede Verlängerung erzeugt ein revisionssicheres <span className="mono">contract_event</span> mit eingefrorener Tarifversion.</p>
    </div>
  );
}

/* ---- Mieterwechsel (Mock) ---- */
const WECHSEL_STEPS = ['Auszug gemeldet', 'Schlussabrechnung', 'Vertrag beendet', 'Nachmieter eingeladen', 'Nachmieter aktiv'];
const WECHSEL_CASES = [
  { whg: 'W09', alt: 'Jonas Krüger', neu: 'Pending — Einladung offen', auszug: '31.07.2026', stage: 1, modell: 'Mieterstrom' },
  { whg: 'W03', alt: 'Tobias Wolf',  neu: 'Elif Demir',                auszug: '30.06.2026', stage: 3, modell: 'Mieterstrom' },
  { whg: 'W05', alt: 'Sofia Russo',  neu: 'Niklas Brandt',             auszug: '15.06.2026', stage: 4, modell: 'gGV' },
];

function MieterwechselView() {
  const [sel, setSel] = useLcS(WECHSEL_CASES[0]);
  return (
    <div className="pm-cockpit">
      <div className="pm-kpis pm-kpis-3">
        <KPI icon={<I.refresh />} value={WECHSEL_CASES.length} label="Aktive Wechsel" sub="in Bearbeitung" tone="accent" />
        <KPI icon={<I.receipt />} value={1} label="Schlussabrechnung offen" tone="warn" sub="zu erstellen" />
        <KPI icon={<I.user />} value={2} label="Nachmieter onboarding" sub="läuft" tone="positive" />
      </div>

      <div className="pm-weg-grid">
        {/* Fall-Liste */}
        <div className="card card-pad">
          <div className="pm-card-head"><h3 className="pm-card-title"><I.users size={17} /> Wechsel-Fälle</h3><Button size="sm" icon={<I.spark size={14} />}>Neuer Wechsel</Button></div>
          <div className="pm-caselist">
            {WECHSEL_CASES.map(c => (
              <button key={c.whg} className="pm-case" data-on={sel.whg === c.whg ? 'true' : 'false'} onClick={() => setSel(c)}>
                <span className="pm-avatar" style={{ background: avatarColor(c.alt), width: 34, height: 34, fontSize: 12 }}>{initials(c.alt)}</span>
                <div className="pm-case-main">
                  <div className="pm-case-t"><b className="mono">{c.whg}</b> · {c.alt}</div>
                  <div className="pm-case-s">Auszug {c.auszug} · {WECHSEL_STEPS[c.stage]}</div>
                </div>
                <div className="pm-case-prog tnum">{Math.round((c.stage) / (WECHSEL_STEPS.length - 1) * 100)}%</div>
              </button>
            ))}
          </div>
        </div>

        {/* Detail-Flow */}
        <div className="card card-pad">
          <div className="pm-card-head"><h3 className="pm-card-title"><I.refresh size={17} /> Ablauf · {sel.whg}</h3><span className="chip chip-accent">{sel.modell}</span></div>
          <div className="pm-handover">
            <div className="pm-handover-parties">
              <div className="pm-handover-p"><span className="pm-handover-p-l">Auszug</span><div className="pm-handover-p-n">{sel.alt}</div></div>
              <I.arrowR size={20} style={{ color: 'var(--text-3)', flex: 'none' }} />
              <div className="pm-handover-p"><span className="pm-handover-p-l">Nachmieter</span><div className="pm-handover-p-n">{sel.neu}</div></div>
            </div>
            <div className="pm-timeline" style={{ marginTop: 18 }}>
              {WECHSEL_STEPS.map((s, i) => {
                const state = i < sel.stage ? 'done' : i === sel.stage ? 'active' : 'todo';
                return (
                  <div className="pm-tl-item" data-state={state} key={i}>
                    <div className="pm-tl-rail">
                      <span className="pm-tl-node">{state === 'done' ? <I.check size={15} /> : state === 'active' ? <I.dot size={13} /> : i + 1}</span>
                      {i < WECHSEL_STEPS.length - 1 && <span className="pm-tl-bar" />}
                    </div>
                    <div className="pm-tl-body" style={{ paddingBottom: 16 }}>
                      <div className="pm-tl-title">{s}{state === 'active' && <span className="chip chip-accent" style={{ padding: '2px 8px', fontSize: 10.5 }}>aktuell</span>}</div>
                      <div className="pm-tl-desc">{[
                        'Mieter meldet Auszugsdatum — Vertrag wird zur Beendigung vorgemerkt.',
                        'Verbrauch bis Auszug abgelesen, Schlussrechnung erzeugt & versendet.',
                        'Altvertrag beendet, Dokumente archiviert (contract_events).',
                        'Nachmieter erhält QR-Einladung ins Objekt-Onboarding.',
                        'Nachmieter hat unterzeichnet — Belieferung nahtlos übernommen.',
                      ][i]}</div>
                    </div>
                  </div>
                );
              })}
            </div>
            <Button block icon={<I.arrowR size={15} />} style={{ marginTop: 6 }}>Nächsten Schritt auslösen</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- Automatisierung (Mock) ---- */
const AUTO_RULES_INIT = [
  { id: 'gen',    icon: 'spark',     name: 'Auto-Vertragserzeugung bei Registrierung', desc: 'Erzeugt automatisch die passende Vertragsstrecke je Modell (§ 42a / § 42b), sobald sich ein Bewohner registriert.', on: true },
  { id: 'renew',  icon: 'refresh',   name: 'Automatische Verlängerung', desc: 'Verträge ohne fristgerechte Kündigung 3 Monate vor Ablauf um die Laufzeit verlängern — mit eingefrorener Tarifversion.', on: true },
  { id: 'remind', icon: 'calendar',  name: 'Fristen-Erinnerung', desc: 'Hausverwaltung 90 / 60 / 30 Tage vor Vertragsende benachrichtigen.', on: true },
  { id: 'final',  icon: 'receipt',   name: 'Auto-Schlussabrechnung bei Auszug', desc: 'Bei gemeldetem Auszug Verbrauch ablesen und Schlussrechnung automatisch erzeugen.', on: false },
  { id: 'tariff', icon: 'bolt',      name: 'Tarifwechsel zum Jahreswechsel', desc: 'Neue Tarifversion automatisch zum 01.01. anwenden und Bewohner informieren.', on: false },
];
const AUTO_LOG = [
  { t: 'Vertrag W12 automatisch erzeugt (Mieterstrom v2.1)', when: 'Heute · 08:14', icon: 'spark', good: true },
  { t: 'Erinnerung an HV: 3 Verträge laufen in < 60 Tagen aus', when: 'Gestern · 06:00', icon: 'calendar' },
  { t: 'Vertrag W01 automatisch um 24 Monate verlängert', when: '21.06. · 00:01', icon: 'refresh', good: true },
  { t: 'Schlussabrechnung W05 — manuell ausgelöst (Regel inaktiv)', when: '18.06. · 14:32', icon: 'receipt', warn: true },
];

function AutomationView() {
  const [rules, setRules] = useLcS(AUTO_RULES_INIT);
  const toggle = id => setRules(rs => rs.map(r => r.id === id ? { ...r, on: !r.on } : r));
  const onCount = rules.filter(r => r.on).length;

  return (
    <div className="pm-cockpit">
      <div className="pm-gate pm-gate-ok">
        <span className="pm-gate-ic"><I.spark size={22} /></span>
        <div className="pm-gate-body">
          <div className="pm-gate-title">Automatisierung aktiv</div>
          <div className="pm-gate-sub">{onCount} von {rules.length} Regeln laufen. Powermieter erzeugt, verlängert und überwacht Verträge je Tarifmodell — die Hausverwaltung greift nur bei Ausnahmen ein.</div>
        </div>
        <div className="pm-gate-meter"><div className="pm-gate-meter-v tnum">{onCount}/{rules.length}</div><div className="pm-gate-meter-l">Regeln aktiv</div></div>
      </div>

      <div className="pm-weg-grid">
        {/* Regeln */}
        <div className="card card-pad">
          <div className="pm-card-head"><h3 className="pm-card-title"><I.filter size={17} /> Automatisierungs-Regeln</h3></div>
          <div className="pm-rules">
            {rules.map(r => (
              <div className="pm-rule" data-on={r.on ? 'true' : 'false'} key={r.id}>
                <span className="pm-rule-ic">{(I[r.icon] || I.dot)({ size: 18 })}</span>
                <div className="pm-rule-main">
                  <div className="pm-rule-name">{r.name}</div>
                  <div className="pm-rule-desc">{r.desc}</div>
                </div>
                <button className={'pm-switch' + (r.on ? ' pm-switch-on' : '')} onClick={() => toggle(r.id)} role="switch" aria-checked={r.on}><span className="pm-switch-knob" /></button>
              </div>
            ))}
          </div>
        </div>

        {/* Aktivitäts-Log */}
        <div className="card card-pad">
          <div className="pm-card-head"><h3 className="pm-card-title"><I.refresh size={17} /> Automatisierungs-Log</h3></div>
          <div className="pm-audit">
            {AUTO_LOG.map((e, i) => (
              <div className="pm-audit-row" key={i}>
                <span className={'pm-audit-ic' + (e.warn ? ' pm-audit-warn' : e.good ? ' pm-audit-good' : '')}>{(I[e.icon] || I.dot)({ size: 13 })}</span>
                <div className="pm-audit-body"><div className="pm-audit-t">{e.t}</div><div className="pm-audit-m">{e.when}</div></div>
              </div>
            ))}
          </div>
          <p className="pm-cockpit-foot" style={{ paddingTop: 14 }}><I.info size={14} /> Jede automatische Aktion ist im Audit-Log nachvollziehbar — wer/was/wann, inkl. genutzter Vertrags- und Tarifversion.</p>
        </div>
      </div>
    </div>
  );
}

/* ---- Lifecycle-Container mit Tabs ---- */
function Lifecycle({ initialTab = 'fristen' }) {
  const [tab, setTab] = useLcS(initialTab);
  return (
    <div>
      <div className="pm-lc-tabs">
        {[['fristen', 'Fristen & Kündigung', I.calendar], ['wechsel', 'Mieterwechsel', I.users], ['auto', 'Automatisierung', I.spark]].map(([v, l, Ic]) => (
          <button key={v} className="pm-lc-tab" data-on={tab === v ? 'true' : 'false'} onClick={() => setTab(v)}><Ic size={15} />{l}</button>
        ))}
      </div>
      {tab === 'fristen' && <FristenView />}
      {tab === 'wechsel' && <MieterwechselView />}
      {tab === 'auto' && <AutomationView />}
    </div>
  );
}

Object.assign(window, { Lifecycle });