/* Dashboard overview + sub-pages */

function DashboardOverview() {
  const { user, orders, stopAutoRenew, enableAutoRenew } = useApp();
  const active = orders.filter((o) => o.status === 'aktiv').length;
  const renewing = orders.filter((o) => o.autoRenew).length;

  return (
    <DashboardShell
      active="overview"
      title={`Willkommen zurück, ${user.first}.`}
      subtitle="Hier sehen Sie den Status aller von uns überwachten Domains."
      actions={<Link to="/dashboard/domains/new" className="btn btn-primary btn-sm"><Icon name="plus" size={14} /> Neue Domain</Link>}
    >
      <div className="stat-grid">
        <div className="stat"><div className="l">Aktive Verträge</div><div className="v">{active}</div><div className="d">davon {renewing} mit Auto-Verlängerung</div></div>
        <div className="stat"><div className="l">Überwachte Domains</div><div className="v">{orders.length}</div><div className="d">Prüfung alle 40 Tage</div></div>
        <div className="stat"><div className="l">Letzte Prüfung</div><div className="v">04.05.</div><div className="d">alle Prüfungen bestanden</div></div>
        <div className="stat"><div className="l">Offene Tickets</div><div className="v">1</div><div className="d">TCK-2045 · Verlängerung</div></div>
      </div>

      <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 20 }}>
        {/* Active services */}
        <div>
          <div className="row-between" style={{ marginBottom: 14 }}>
            <h3 style={{ fontSize: 17 }}>Aktive Services</h3>
            <Link to="/dashboard/orders" style={{ fontSize: 13.5, color: 'var(--navy-700)' }}>Alle ansehen →</Link>
          </div>
          <div className="stack-3">
            {orders.map((o) => (
              <OrderCard key={o.id} order={o} onStop={() => stopAutoRenew(o._uuid)} onResume={() => enableAutoRenew(o._uuid)} />
            ))}
          </div>
        </div>

        {/* Activity feed */}
        <div>
          <div className="row-between" style={{ marginBottom: 14 }}>
            <h3 style={{ fontSize: 17 }}>Letzte Aktivitäten</h3>
          </div>
          <div className="card" style={{ padding: 0 }}>
            <ActivityRow
              icon="check-circle"
              tone="green"
              title="Prüfung bestanden"
              detail="meine-firma.de · Zertifikat gültig bis 17.04.2026"
              when="04.05. · 03:21"
            />
            <ActivityRow
              icon="refresh"
              tone="blue"
              title="Automatische Prüfung gestartet"
              detail="shop.handwerk-mueller.de"
              when="28.04. · 02:00"
            />
            <ActivityRow
              icon="alert"
              tone="amber"
              title="Einrichtung in Bearbeitung"
              detail="praxis-bergmann.com · warten auf DNS-Bestätigung"
              when="26.04. · 11:14"
            />
            <ActivityRow
              icon="doc"
              tone="muted"
              title="Rechnung erstellt"
              detail="RE-2025-00418 · 14,50 €"
              when="18.04. · 09:02"
              last
            />
          </div>

          <div className="callout" style={{ marginTop: 14 }}>
            <Icon name="info" size={16} />
            <div>Sie können die <strong>automatische Verlängerung</strong> für jeden Service separat im jeweiligen Eintrag deaktivieren.</div>
          </div>
        </div>
      </div>
    </DashboardShell>
  );
}

function ActivityRow({ icon, title, detail, when, tone, last }) {
  const colors = {
    green: { bg: 'var(--green-soft)', fg: 'var(--green-ink)' },
    amber: { bg: 'var(--amber-soft)', fg: 'var(--amber-ink)' },
    blue: { bg: 'oklch(0.94 0.025 250)', fg: 'var(--navy-700)' },
    muted: { bg: 'var(--surface-2)', fg: 'var(--muted)' },
  };
  const c = colors[tone] || colors.muted;
  return (
    <div style={{ padding: 14, borderBottom: last ? 0 : '1px solid var(--border-2)', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
      <span style={{ width: 30, height: 30, borderRadius: 8, background: c.bg, color: c.fg, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
        <Icon name={icon} size={15} />
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 500, fontSize: 14 }}>{title}</div>
        <div style={{ fontSize: 13, color: 'var(--muted)' }}>{detail}</div>
      </div>
      <div className="mono" style={{ fontSize: 11.5, color: 'var(--muted-2)', whiteSpace: 'nowrap' }}>{when}</div>
    </div>
  );
}

function OrderCard({ order, onStop, onResume, expanded }) {
  const [showStop, setShowStop] = useState(false);
  return (
    <div className="card" style={{ padding: 18 }}>
      <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
        <span style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--surface-2)', color: 'var(--navy-900)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <Icon name="lock-check" size={18} />
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="row" style={{ marginBottom: 4, flexWrap: 'wrap' }}>
            <span style={{ fontWeight: 600, color: 'var(--navy-900)', fontSize: 16 }}>{order.domain}</span>
            <StatusBadge status={order.status} />
            {order.autoRenew
              ? <span className="badge badge-blue"><Icon name="refresh" size={11} /> Auto-Verlängerung aktiv</span>
              : <span className="badge"><Icon name="x" size={11} /> Auto-Verlängerung deaktiviert</span>}
          </div>
          <div style={{ fontSize: 13, color: 'var(--muted)' }}>{order.product} · Auftrag {order.id}</div>

          <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, fontSize: 13 }}>
            <KV label="Laufzeit" value={`${order.term} Monate`} />
            <KV label="Startdatum" value={order.start} />
            <KV label="Ablaufdatum" value={order.end} />
            <KV label="Nächste Prüfung" value={order.nextCheck} />
          </div>
        </div>
      </div>

      <div className="row-between" style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--border-2)' }}>
        <div className="row" style={{ gap: 10 }}>
          <Link to={'/dashboard/orders'} className="btn btn-secondary btn-sm"><Icon name="eye" size={13} /> Details</Link>
          <Link to="/dashboard/support" className="btn btn-secondary btn-sm"><Icon name="support" size={13} /> Support-Ticket</Link>
        </div>
        {order.autoRenew ? (
          <button className="btn btn-danger btn-sm" onClick={() => setShowStop(true)}>
            <Icon name="x" size={13} /> Automatische Verlängerung stoppen
          </button>
        ) : (
          <button className="btn btn-ghost btn-sm" onClick={onResume}>
            <Icon name="refresh" size={13} /> Verlängerung wieder aktivieren
          </button>
        )}
      </div>

      {showStop ? (
        <div className="modal-back" onClick={() => setShowStop(false)}>
          <div className="modal" onClick={(e) => e.stopPropagation()}>
            <div className="row" style={{ gap: 12, marginBottom: 12 }}>
              <span style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--amber-soft)', color: 'var(--amber-ink)', display: 'grid', placeItems: 'center' }}>
                <Icon name="alert" size={18} />
              </span>
              <h3 style={{ margin: 0 }}>Automatische Verlängerung stoppen?</h3>
            </div>
            <p style={{ color: 'var(--ink-2)', fontSize: 14 }}>
              Wenn Sie bestätigen, wird die automatische Verlängerung für <strong>{order.domain}</strong> deaktiviert.
              Ihr Service läuft regulär bis zum Ende der aktuellen Vertragslaufzeit (<strong>{order.end}</strong>) weiter
              und wird anschließend nicht erneuert.
            </p>
            <div className="row" style={{ justifyContent: 'flex-end', marginTop: 18, gap: 10 }}>
              <button className="btn btn-ghost" onClick={() => setShowStop(false)}>Abbrechen</button>
              <button className="btn btn-primary" onClick={() => { onStop(); setShowStop(false); }}>Verlängerung stoppen</button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

function KV({ label, value }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--muted-2)', letterSpacing: '0.04em', textTransform: 'uppercase' }}>{label}</div>
      <div style={{ marginTop: 3, fontWeight: 500 }}>{value}</div>
    </div>
  );
}

function OrdersPage() {
  const { orders, stopAutoRenew, enableAutoRenew, reloadOrders, showToast } = useApp();
  const [filter, setFilter] = useState('alle');
  const filtered = filter === 'alle' ? orders : orders.filter(o => o.status === filter || (filter === 'auto-aus' && !o.autoRenew));

  // Rueckkehr von Stripe auswerten: nach erfolgreicher Zahlung die gebuchten Domains anlegen
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const state = params.get('checkout');
    if (state === 'success') {
      showToast('Zahlung erfolgreich — Ihre Buchung wird verarbeitet.');
      sessionStorage.removeItem('cg.pendingBooking');
      // Bestellung wird per Stripe-Webhook in der DB angelegt; kurz nachladen
      reloadOrders();
      setTimeout(() => reloadOrders(), 3500);
      window.history.replaceState(null, '', window.location.pathname + window.location.hash);
    } else if (state === 'cancel') {
      showToast('Zahlung abgebrochen — Buchung nicht abgeschlossen.');
      window.history.replaceState(null, '', window.location.pathname + window.location.hash);
    }
  }, []);

  return (
    <DashboardShell
      active="orders"
      title="Meine Käufe"
      subtitle="Alle gebuchten SSL-Services im Überblick. Jeder Eintrag kann separat verwaltet werden."
      actions={<Link to="/dashboard/domains/new" className="btn btn-primary btn-sm"><Icon name="plus" size={14} /> Neue Domain</Link>}
    >
      <div className="tabs">
        {[
          ['alle', 'Alle'],
          ['aktiv', 'Aktiv'],
          ['in Bearbeitung', 'In Bearbeitung'],
          ['auto-aus', 'Verlängerung gestoppt'],
        ].map(([k, l]) => (
          <button key={k} className={'tab' + (filter === k ? ' active' : '')} onClick={() => setFilter(k)}>{l}</button>
        ))}
      </div>

      <div className="stack-3">
        {filtered.map((o) => (
          <OrderCard key={o.id} order={o} onStop={() => stopAutoRenew(o._uuid)} onResume={() => enableAutoRenew(o._uuid)} />
        ))}
        {filtered.length === 0 ? (
          <div className="card" style={{ textAlign: 'center', padding: 48, color: 'var(--muted)' }}>
            Keine Einträge in dieser Ansicht.
          </div>
        ) : null}
      </div>
    </DashboardShell>
  );
}

function InvoicesPage() {
  const { invoices, showToast } = useApp();
  return (
    <DashboardShell
      active="invoices"
      title="Rechnungen"
      subtitle="Alle Rechnungen werden ohne Ausweis von Umsatzsteuer ausgestellt (US LLC)."
    >
      <div className="callout" style={{ marginBottom: 18 }}>
        <Icon name="info" size={16} />
        <div>
          <strong>Rechnung ohne Ausweis von Umsatzsteuer.</strong> Die Abrechnung erfolgt über die Vitalarista LLC mit Sitz in den USA.
        </div>
      </div>

      <div className="table-wrap">
        <table className="table">
          <thead>
            <tr>
              <th>Rechnungsnr.</th>
              <th>Datum</th>
              <th>Zugehörige Bestellung</th>
              <th>Zahlungsart</th>
              <th>Status</th>
              <th style={{ textAlign: 'right' }}>Betrag</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {invoices.map((inv) => (
              <tr key={inv.id}>
                <td><span className="mono" style={{ color: 'var(--navy-900)', fontWeight: 500 }}>{inv.id}</span></td>
                <td className="mono" style={{ color: 'var(--ink-2)' }}>{inv.date}</td>
                <td className="mono" style={{ color: 'var(--muted)' }}>{inv.order}</td>
                <td>{inv.method}</td>
                <td><span className="badge badge-green"><Icon name="check" size={11} /> {inv.status}</span></td>
                <td style={{ textAlign: 'right', fontWeight: 500 }}>{inv.amount.toFixed(2).replace('.', ',')} €</td>
                <td style={{ textAlign: 'right' }}>
                  <button className="btn btn-secondary btn-sm" onClick={() => showToast('Rechnung als PDF heruntergeladen.')}>
                    <Icon name="download" size={13} /> PDF
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{ marginTop: 18, fontSize: 13, color: 'var(--muted)' }}>
        Alle Beträge in Euro. Bei Fragen zur Rechnung erstellen Sie bitte ein <Link to="/dashboard/support" style={{ color: 'var(--navy-700)' }}>Support-Ticket</Link>.
      </div>
    </DashboardShell>
  );
}

function ProfilePage() {
  const { user, updateProfile } = useApp();
  const [draft, setDraft] = useState(user);
  const dirty = JSON.stringify(draft) !== JSON.stringify(user);

  return (
    <DashboardShell
      active="profile"
      title="Kundendaten"
      subtitle="Verwalten Sie Ihre persönlichen Kontaktdaten."
    >
      <div className="section-card" style={{ maxWidth: 720 }}>
        <h3>Persönliche Daten</h3>
        <p className="sub">Diese Daten werden für Vertrags- und Rechnungszwecke verwendet.</p>

        <div className="field-row cols-2">
          <div className="field"><label className="label">Vorname</label><input className="input" value={draft.first} onChange={(e) => setDraft({ ...draft, first: e.target.value })} /></div>
          <div className="field"><label className="label">Name</label><input className="input" value={draft.last} onChange={(e) => setDraft({ ...draft, last: e.target.value })} /></div>
        </div>
        <div className="field" style={{ marginTop: 14 }}><label className="label">E-Mail-Adresse</label><input className="input" type="email" value={draft.email} onChange={(e) => setDraft({ ...draft, email: e.target.value })} /></div>
        <div className="field" style={{ marginTop: 14 }}><label className="label">Telefonnummer <span className="opt">optional</span></label><input className="input" value={draft.phone} onChange={(e) => setDraft({ ...draft, phone: e.target.value })} /></div>

        <h4 style={{ marginTop: 26, marginBottom: 12 }}>Adresse</h4>
        <div className="field-row cols-2" style={{ gridTemplateColumns: '2fr 1fr' }}>
          <div className="field"><label className="label">Straße &amp; Hausnummer</label><input className="input" value={draft.street} onChange={(e) => setDraft({ ...draft, street: e.target.value })} /></div>
          <div className="field"><label className="label">PLZ</label><input className="input" value={draft.zip} onChange={(e) => setDraft({ ...draft, zip: e.target.value })} /></div>
        </div>
        <div className="field-row cols-2" style={{ marginTop: 14 }}>
          <div className="field"><label className="label">Ort</label><input className="input" value={draft.city} onChange={(e) => setDraft({ ...draft, city: e.target.value })} /></div>
          <div className="field"><label className="label">Land</label>
            <select className="select" value={draft.country} onChange={(e) => setDraft({ ...draft, country: e.target.value })}>
              <option>Deutschland</option><option>Österreich</option><option>Schweiz</option><option>Luxemburg</option>
            </select>
          </div>
        </div>

        <div className="row-between" style={{ marginTop: 22 }}>
          <span style={{ fontSize: 13, color: 'var(--muted)' }}>{dirty ? 'Es gibt nicht gespeicherte Änderungen.' : 'Alle Daten sind aktuell.'}</span>
          <div className="row">
            <button className="btn btn-ghost" disabled={!dirty} onClick={() => setDraft(user)}>Verwerfen</button>
            <button className="btn btn-primary" disabled={!dirty} onClick={() => updateProfile(draft)}>Änderungen speichern</button>
          </div>
        </div>
      </div>

      {/* Security card */}
      <div className="section-card" style={{ maxWidth: 720, marginTop: 18 }}>
        <h3>Sicherheit</h3>
        <p className="sub">Anmelde-Sicherheit und Zwei-Faktor-Verifizierung.</p>

        <div className="row-between" style={{ padding: '12px 0', borderTop: '1px solid var(--border-2)' }}>
          <div>
            <div style={{ fontWeight: 500 }}>Anmeldung</div>
            <div style={{ fontSize: 13, color: 'var(--muted)' }}>Passwortlos — Anmeldung per einmaligem E-Mail-Code</div>
          </div>
          <span className="badge badge-green"><Icon name="check" size={11} /> aktiv</span>
        </div>

        <div className="row-between" style={{ padding: '12px 0', borderTop: '1px solid var(--border-2)' }}>
          <div>
            <div style={{ fontWeight: 500 }}>2-Faktor-Verifizierung per E-Mail</div>
            <div style={{ fontSize: 13, color: 'var(--muted)' }}>Aktiv · Code wird bei Login an {user.email} gesendet</div>
          </div>
          <span className="badge badge-green"><Icon name="check" size={11} /> aktiv</span>
        </div>
      </div>
    </DashboardShell>
  );
}

function CompanyPage() {
  const { user, updateCompany } = useApp();
  const [draft, setDraft] = useState(user.company);
  const dirty = JSON.stringify(draft) !== JSON.stringify(user.company);

  return (
    <DashboardShell
      active="company"
      title="Firmendaten"
      subtitle="Daten für die Geschäftsabwicklung und Rechnungsstellung."
    >
      <div className="section-card" style={{ maxWidth: 720 }}>
        <h3>Firmendaten</h3>
        <p className="sub">Diese Angaben erscheinen auf Ihren Rechnungen und Verträgen.</p>

        <div className="field"><label className="label">Firmenname</label><input className="input" value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} /></div>
        <div className="field-row cols-2" style={{ marginTop: 14 }}>
          <div className="field"><label className="label">Rechtsform</label>
            <select className="select" value={draft.form} onChange={(e) => setDraft({ ...draft, form: e.target.value })}>
              <option>GmbH</option><option>UG</option><option>AG</option><option>OHG</option><option>KG</option><option>e.K.</option><option>GbR</option><option>Einzelunternehmer</option>
            </select>
          </div>
          <div className="field"><label className="label">Steuernummer / VAT-ID <span className="opt">optional</span></label><input className="input mono" value={draft.vat} onChange={(e) => setDraft({ ...draft, vat: e.target.value })} /></div>
        </div>
        <div className="field" style={{ marginTop: 14 }}><label className="label">Rechnungsadresse</label><input className="input" value={draft.addr} onChange={(e) => setDraft({ ...draft, addr: e.target.value })} /></div>
        <div className="field" style={{ marginTop: 14 }}><label className="label">Ansprechpartner</label><input className="input" value={draft.contact} onChange={(e) => setDraft({ ...draft, contact: e.target.value })} /></div>

        <div className="callout" style={{ marginTop: 18 }}>
          <Icon name="info" size={16} />
          <div>Bei Änderungen der Rechnungsdaten werden bereits ausgestellte Rechnungen <strong>nicht</strong> rückwirkend angepasst.</div>
        </div>

        <div className="row-between" style={{ marginTop: 22 }}>
          <span style={{ fontSize: 13, color: 'var(--muted)' }}>{dirty ? 'Nicht gespeicherte Änderungen.' : 'Alle Daten sind aktuell.'}</span>
          <div className="row">
            <button className="btn btn-ghost" disabled={!dirty} onClick={() => setDraft(user.company)}>Verwerfen</button>
            <button className="btn btn-primary" disabled={!dirty} onClick={() => updateCompany(draft)}>Änderungen speichern</button>
          </div>
        </div>
      </div>
    </DashboardShell>
  );
}

window.DashboardOverview = DashboardOverview;
window.OrdersPage = OrdersPage;
window.InvoicesPage = InvoicesPage;
window.ProfilePage = ProfilePage;
window.CompanyPage = CompanyPage;
window.OrderCard = OrderCard;