/* Powermieter — WEG-/Eigentümer-Freigabe (Hausverwaltung) */
function WegFreigabe({ model, tweaks }) {
  const quote = tweaks.quote != null ? tweaks.quote : 58;
  const quorumOk = quote >= 50;
  const gate = tweaks.goLiveGate === 'erfuellt';

  const beschluss = [
    { t: 'Beschlussvorlage erstellt', d: 'Wirtschaftlichkeit & Vertragsmodell aufbereitet.', state: 'done' },
    { t: 'An Eigentümer versendet', d: '12 Eigentümer · digitale Einladung zur Abstimmung.', state: 'done' },
    { t: 'Abstimmung läuft', d: `${quote}% Zustimmung — Quorum ${quorumOk ? 'erreicht' : 'noch offen'}.`, state: gate ? 'done' : 'active' },
    { t: 'Beschluss gefasst & freigegeben', d: 'Rahmen- und Betreiberverträge werden aktiviert.', state: gate ? 'done' : 'todo' },
  ];

  const wirtschaft = [
    { v: '38 kWp', l: 'PV-Dachleistung' },
    { v: '~ 41 MWh', l: 'Solarertrag / Jahr' },
    { v: '≈ 180 €', l: 'Ersparnis / Haushalt / Jahr', tone: 'positive' },
    { v: '7,5 Jahre', l: 'Amortisation' },
  ];

  const rahmen = ROLE_CONTRACTS.verwaltung.items.filter(i => i.req || model !== 'pre').slice(0, 6).map((it, i) => ({
    ...it, status: gate ? 'gegengezeichnet' : i < 3 ? 'unterzeichnet' : i < 5 ? 'versendet' : 'bereit',
  }));

  return (
    <div className="pm-weg">
      <div className="pm-weg-hero card">
        <div className="pm-weg-hero-glow" />
        <div className="pm-weg-hero-in">
          <span className="eyebrow" style={{ color: 'var(--accent-300)' }}>WEG- / Eigentümer-Freigabe</span>
          <h2 className="pm-weg-hero-t">Objekt rechtlich, kaufmännisch & abrechnungsfähig aktivieren</h2>
          <p className="pm-weg-hero-s">{VERTRAGSMODELLE[model].label} · {VERTRAGSMODELLE[model].legal} — Freigabe der Rahmenverträge durch die Eigentümergemeinschaft {OBJEKT.name}.</p>
        </div>
        <div className="pm-weg-hero-quote">
          <div className="pm-weg-ring" style={{ '--p': quote }}>
            <span className="tnum">{quote}%</span>
          </div>
          <div className="pm-weg-ring-l">Zustimmungs-<br />quote{quorumOk ? ' · Quorum ✓' : ''}</div>
        </div>
      </div>

      <div className="pm-weg-grid">
        {/* Freigabestatus */}
        <div className="card card-pad">
          <h3 className="pm-card-title" style={{ marginBottom: 18 }}><I.checkBold size={18} /> Freigabestatus</h3>
          <div className="pm-timeline">
            {beschluss.map((s, i) => (
              <div className="pm-tl-item" data-state={s.state} key={i}>
                <div className="pm-tl-rail">
                  <span className="pm-tl-node">{s.state === 'done' ? <I.check size={16} /> : s.state === 'active' ? <I.dot size={14} /> : i + 1}</span>
                  {i < beschluss.length - 1 && <span className="pm-tl-bar" />}
                </div>
                <div className="pm-tl-body" style={{ paddingBottom: 20 }}>
                  <div className="pm-tl-title">{s.t}{s.state === 'active' && <span className="chip chip-accent" style={{ padding: '3px 9px', fontSize: 11 }}>läuft</span>}</div>
                  <div className="pm-tl-desc">{s.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Wirtschaftlichkeit */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card card-pad">
            <h3 className="pm-card-title" style={{ marginBottom: 14 }}><I.chart size={18} /> Wirtschaftlichkeitsanalyse</h3>
            <div className="pm-weg-econ">
              {wirtschaft.map(w => (
                <div className="pm-weg-econ-i" key={w.l}>
                  <div className="pm-weg-econ-v tnum" style={w.tone ? { color: `var(--${w.tone})` } : null}>{w.v}</div>
                  <div className="pm-weg-econ-l">{w.l}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="card card-pad pm-weg-go" data-ok={gate ? 'true' : 'false'}>
            <div>
              <div className="pm-weg-go-t">{gate ? 'Projekt freigegeben' : 'Projekt-Go-Live ausstehend'}</div>
              <div className="pm-weg-go-s">{gate ? 'Beschluss gefasst, Rahmenverträge aktiv. Bewohner-Onboarding läuft.' : `Freigabe nach Beschluss & ${quorumOk ? 'erfülltem' : 'fehlendem'} Quorum.`}</div>
            </div>
            <Button variant={gate ? 'ghost' : 'primary'} icon={gate ? <I.check size={16} /> : <I.lock size={16} />}>{gate ? 'Freigegeben' : 'Freigabe anstoßen'}</Button>
          </div>
        </div>
      </div>

      {/* Beschlussunterlagen + Vertragsübersicht */}
      <div className="pm-weg-grid">
        <div className="card card-pad">
          <h3 className="pm-card-title" style={{ marginBottom: 14 }}><I.doc size={18} /> Beschlussunterlagen</h3>
          <div className="pm-grid pm-grid-2" style={{ gap: 12 }}>
            {['Beschlussvorlage WEG', 'Wirtschaftlichkeitsanlage', 'Vertragsübersicht (Rahmen)', 'Gestattungsvertrag Dach'].map(n => (
              <div className="pm-dl" key={n}>
                <span className="pm-dl-ic"><I.doc size={18} /></span>
                <div style={{ minWidth: 0 }}><div className="pm-dl-name">{n}</div><div className="pm-dl-meta">PDF · freigabebereit</div></div>
                <I.download size={18} style={{ color: 'var(--text-3)', marginLeft: 'auto', flex: 'none' }} />
              </div>
            ))}
          </div>
        </div>

        <div className="card card-pad">
          <h3 className="pm-card-title" style={{ marginBottom: 14 }}><I.signature size={18} /> Rahmenverträge</h3>
          <div className="pm-doclist">
            {rahmen.map((r, i) => (
              <div className="pm-docrow" key={i}>
                <span className="pm-docrow-ic" data-tone={CSTATUS[r.status].tone}><I.doc size={15} /></span>
                <div className="pm-docrow-main"><div className="pm-docrow-name">{r.name}</div>{r.hint && <div className="pm-docrow-meta">{r.hint}</div>}</div>
                <CStatusBadge s={r.status} size="sm" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WegFreigabe });