/* Dashboard: mehrere Domains anlegen & buchen */

function DomainsNewPage() {
  const { showToast, user } = useApp();

  const [text, setText] = useState('');
  const [term, setTerm] = useState(12);
  const [techMode, setTechMode] = useState('credentials');
  const [autoRenew, setAutoRenew] = useState(true);
  const [loading, setLoading] = useState(false);
  const [embed, setEmbed] = useState(null); // { clientSecret, publishableKey } fuer eingebettetes Bezahlfeld

  const { valid, invalid } = useMemo(() => parseDomains(text), [text]);
  const count = valid.length;
  const unit = 14.50 * (term / 12);
  const total = unit * count;
  const fmt = (n) => n.toFixed(2).replace('.', ',');

  const removeDomain = (dom) => {
    // rebuild textarea without that domain
    const next = valid.filter((d) => d !== dom).concat(invalid);
    setText(next.join('\n'));
  };

  // Bezahlung ueber Stripe starten. Die Domains werden erst nach erfolgreicher
  // Zahlung angelegt (siehe OrdersPage, liest cg.pendingBooking nach Rueckkehr).
  async function book() {
    if (count === 0 || loading) return;
    setLoading(true);
    try {
      sessionStorage.setItem('cg.pendingBooking', JSON.stringify({ domains: valid, term, autoRenew }));
      const res = await fetch('/api/create-checkout-session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          term,
          quantity: count,
          domains: valid.join(','),
          userId: user.id,
          email: user.email,
          name: `${user.first} ${user.last}`.trim(),
          company: (user.company && user.company.name) || '',
          customerType: 'company',
          returnTo: '/dashboard/orders'
        })
      });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || (!json.clientSecret && !json.url)) {
        throw new Error(json.error || 'Die Zahlung konnte nicht gestartet werden.');
      }
      if (json.clientSecret) {
        // Eingebettetes Bezahlfeld direkt im Dashboard anzeigen (kein Wechsel zu Stripe)
        setEmbed({ clientSecret: json.clientSecret, publishableKey: json.publishableKey });
        setLoading(false);
        window.scrollTo({ top: 0, behavior: 'instant' });
      } else {
        window.location.href = json.url; // Fallback: Weiterleitung
      }
    } catch (err) {
      setLoading(false);
      showToast(err.message || 'Die Zahlung konnte nicht gestartet werden.');
    }
  }

  if (embed) {
    return (
      <DashboardShell active="add-domain" title="Sichere Zahlung" subtitle="Bezahlung mit Kreditkarte oder SEPA-Lastschrift — Sie bleiben auf ready-ssl.com.">
        <div className="row-between" style={{ marginBottom: 16 }}>
          <span className="muted" style={{ fontSize: 13 }}>{count} {count === 1 ? 'Domain' : 'Domains'} · {fmt(total)} € heute</span>
          <button className="btn btn-ghost btn-sm" onClick={() => setEmbed(null)}>
            <Icon name="arrow-right" size={14} style={{ transform: 'rotate(180deg)' }} /> Zurück
          </button>
        </div>
        <div className="section-card" style={{ padding: 16 }}>
          <StripeEmbeddedCheckout
            clientSecret={embed.clientSecret}
            publishableKey={embed.publishableKey}
            onError={(m) => { showToast(m); setEmbed(null); }}
          />
        </div>
      </DashboardShell>
    );
  }

  return (
    <DashboardShell
      active="add-domain"
      title="Domains anlegen & buchen"
      subtitle="Fügen Sie eine oder mehrere Domains hinzu — wir richten das SSL-Zertifikat je Domain ein und überwachen es."
    >
      <div className="checkout-grid" style={{ marginTop: 4 }}>
        <div className="stack-6">
          {/* Domains */}
          <div className="section-card">
            <h3>Domains</h3>
            <p className="sub">Eine Domain pro Zeile — oder mehrere durch Komma / Leerzeichen getrennt. <code>https://</code> und <code>www.</code> werden automatisch entfernt.</p>

            <div className="field">
              <div className="row-between" style={{ marginBottom: 6 }}>
                <label className="label" style={{ marginBottom: 0 }}>Domainliste</label>
                {text.trim() ? (
                  <button className="btn btn-ghost btn-sm" onClick={() => setText('')}>Leeren</button>
                ) : (
                  <button className="btn btn-ghost btn-sm" onClick={() => setText('meine-firma.de\nshop.meine-firma.de\npraxis-bergmann.com')}>Beispiel einfügen</button>
                )}
              </div>
              <textarea
                className="textarea mono"
                style={{ minHeight: 150, fontSize: 14 }}
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder={'meine-firma.de\nshop.meine-firma.de\nwww.kunde-xyz.de'}
              />
              <span className="help">{count} gültige {count === 1 ? 'Domain' : 'Domains'} erkannt{invalid.length ? ` · ${invalid.length} ungültig` : ''}.</span>
            </div>

            {count > 0 ? (
              <div className="domain-chips">
                {valid.map((d) => (
                  <span key={d} className="domain-chip">
                    <Icon name="globe" size={13} />
                    <span className="mono">{d}</span>
                    <button type="button" aria-label="Entfernen" onClick={() => removeDomain(d)}><Icon name="x" size={12} /></button>
                  </span>
                ))}
              </div>
            ) : null}

            {invalid.length ? (
              <div className="callout" style={{ marginTop: 14, background: 'var(--amber-soft)', borderColor: 'transparent' }}>
                <Icon name="alert" size={16} />
                <div>
                  <strong>Nicht erkannt:</strong> <span className="mono">{invalid.join(', ')}</span>. Bitte als reine Domain angeben (z. B. <span className="mono">firma.de</span>).
                </div>
              </div>
            ) : null}
          </div>

          {/* Laufzeit */}
          <div className="section-card">
            <h3>Laufzeit</h3>
            <p className="sub">Gilt für alle hinzugefügten Domains. Verlängerung jederzeit pro Domain steuerbar.</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
              {[12, 24, 36].map((t) => (
                <label key={t} className={'radio-card' + (term === t ? ' selected' : '')}>
                  <span className="radio-dot" />
                  <span>
                    <div style={{ fontWeight: 500 }}>{t} Monate</div>
                    <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{fmt(14.50 * (t / 12))} € / Domain</div>
                  </span>
                  <input type="radio" name="dom-term" checked={term === t} onChange={() => setTerm(t)} style={{ display: 'none' }} />
                </label>
              ))}
            </div>
            <label className="check" style={{ marginTop: 16 }}>
              <input type="checkbox" checked={autoRenew} onChange={(e) => setAutoRenew(e.target.checked)} />
              <span>Automatische Verlängerung um jeweils 12 Monate aktivieren (jederzeit pro Domain deaktivierbar).</span>
            </label>
          </div>

          {/* Einrichtungsweg */}
          <div className="section-card">
            <h3>Einrichtungsweg</h3>
            <p className="sub">Wie sollen wir das Zertifikat einrichten? Sie können Details später je Domain im Support nachreichen.</p>
            <div className="row">
              <label className={'radio-card' + (techMode === 'credentials' ? ' selected' : '')} style={{ flex: 1 }}>
                <span className="radio-dot" />
                <span><div style={{ fontWeight: 500 }}>Mit Zugangsdaten</div><div style={{ fontSize: 12.5, color: 'var(--muted)' }}>verschlüsselt übermittelt</div></span>
                <input type="radio" checked={techMode === 'credentials'} onChange={() => setTechMode('credentials')} style={{ display: 'none' }} />
              </label>
              <label className={'radio-card' + (techMode === 'remote' ? ' selected' : '')} style={{ flex: 1 }}>
                <span className="radio-dot" />
                <span><div style={{ fontWeight: 500 }}>Per Fernwartung</div><div style={{ fontSize: 12.5, color: 'var(--muted)' }}>TeamViewer / AnyDesk</div></span>
                <input type="radio" checked={techMode === 'remote'} onChange={() => setTechMode('remote')} style={{ display: 'none' }} />
              </label>
            </div>
          </div>
        </div>

        {/* Zusammenfassung */}
        <div className="checkout-sticky">
          <div className="summary">
            <div className="summary-head">
              <div className="row" style={{ gap: 10 }}>
                <span className="feature-icon" style={{ width: 36, height: 36, marginBottom: 0 }}><Icon name="globe" size={18} /></span>
                <div>
                  <div style={{ fontWeight: 600, color: 'var(--navy-900)' }}>SSL-Service buchen</div>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>Sammelbuchung</div>
                </div>
              </div>
            </div>
            <div className="summary-body">
              <div className="summary-row"><span className="muted">Domains</span><span style={{ fontWeight: 500 }}>{count}</span></div>
              <div className="summary-row"><span className="muted">Laufzeit</span><span>{term} Monate</span></div>
              <div className="summary-row"><span className="muted">Einrichtung</span><span>{techMode === 'credentials' ? 'Zugangsdaten' : 'Fernwartung'}</span></div>
              <div className="summary-row"><span className="muted">Prüfintervall</span><span>alle 40 Tage</span></div>
              <div className="summary-row" style={{ borderTop: '1px dashed var(--border)', marginTop: 8, paddingTop: 12 }}>
                <span className="muted">{count} × {fmt(unit)} €</span><span>{fmt(total)} €</span>
              </div>
              <div className="summary-row summary-total"><span>Gesamt</span><span>{fmt(total)} €</span></div>
            </div>
          </div>

          <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 14 }} disabled={count === 0 || loading} onClick={book}>
            {loading
              ? <React.Fragment>Weiterleitung zu Stripe … <Icon name="lock" size={14} /></React.Fragment>
              : <React.Fragment>{count <= 1 ? 'Domain buchen' : `${count} Domains buchen`} ({fmt(total)} €) <Icon name="lock" size={14} /></React.Fragment>}
          </button>

          {count > 0 ? (
            <div className="summary-row" style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 10 }}>
              <span>Danach</span><span>{fmt(14.50 * count)} € / Jahr ({count} × 14,50 €)</span>
            </div>
          ) : null}

          <div className="callout" style={{ marginTop: 14 }}>
            <Icon name="card" size={16} />
            <div style={{ fontSize: 13 }}>Sichere Bezahlung über <strong>Stripe</strong> (Kreditkarte &amp; SEPA-Lastschrift). Rechnung ohne MwSt.</div>
          </div>
        </div>
      </div>
    </DashboardShell>
  );
}

window.DomainsNewPage = DomainsNewPage;