function SupportPage() {
  const { tickets } = useApp();
  const [active, setActive] = useState(tickets[0]?.id);
  const ticket = tickets.find((t) => t.id === active) || tickets[0];

  return (
    <DashboardShell
      active="support"
      title="Support-Tickets"
      subtitle="Verlauf Ihrer Anfragen und neue Tickets erstellen."
      actions={<Link to="/dashboard/support/new" className="btn btn-primary btn-sm"><Icon name="plus" size={14} /> Neues Ticket</Link>}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '340px 1fr', gap: 18 }}>
        {/* Ticket list */}
        <div className="card" style={{ padding: 0, height: 'fit-content' }}>
          <div style={{ padding: 14, borderBottom: '1px solid var(--border)' }}>
            <div className="input-prefix">
              <span className="pfx"><Icon name="search" size={13} /></span>
              <input className="input" placeholder="Tickets durchsuchen" style={{ paddingLeft: 32 }} />
            </div>
          </div>
          {tickets.map((t) => (
            <button
              key={t.id}
              onClick={() => setActive(t.id)}
              style={{
                width: '100%', textAlign: 'left', padding: 14, border: 0,
                background: active === t.id ? 'var(--surface)' : 'transparent',
                borderBottom: '1px solid var(--border-2)',
                cursor: 'pointer', display: 'block',
              }}
            >
              <div className="row-between" style={{ marginBottom: 4 }}>
                <span className="mono" style={{ fontSize: 11.5, color: 'var(--muted-2)' }}>{t.id}</span>
                <TicketStatus status={t.status} />
              </div>
              <div style={{ fontWeight: 500, fontSize: 14, color: 'var(--navy-900)', lineHeight: 1.3 }}>{t.subject}</div>
              <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 4 }}>{t.category} · {t.updated}</div>
            </button>
          ))}
        </div>

        {/* Ticket detail */}
        {ticket ? <TicketDetail ticket={ticket} /> : null}
      </div>
    </DashboardShell>
  );
}

function TicketStatus({ status }) {
  if (status === 'offen') return <span className="badge badge-amber"><span className="dot" /> offen</span>;
  if (status === 'in Bearbeitung') return <span className="badge badge-blue"><span className="dot" /> in Bearbeitung</span>;
  if (status === 'beantwortet') return <span className="badge badge-green"><span className="dot" /> beantwortet</span>;
  if (status === 'geschlossen') return <span className="badge"><span className="dot" /> geschlossen</span>;
  return <span className="badge">{status}</span>;
}

function TicketDetail({ ticket }) {
  const [reply, setReply] = useState('');
  return (
    <div className="card" style={{ padding: 0 }}>
      <div style={{ padding: 20, borderBottom: '1px solid var(--border)' }}>
        <div className="row" style={{ marginBottom: 6 }}>
          <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{ticket.id}</span>
          <TicketStatus status={ticket.status} />
          <span className="badge">{ticket.category}</span>
          {ticket.domain !== '—' ? <span className="badge"><Icon name="globe" size={11} /> {ticket.domain}</span> : null}
        </div>
        <h3 style={{ fontSize: 19 }}>{ticket.subject}</h3>
        <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>Zuletzt aktualisiert: {ticket.updated}</div>
      </div>

      {/* Messages */}
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 16, maxHeight: 460, overflow: 'auto' }}>
        {ticket.messages.length === 0 ? (
          <div style={{ color: 'var(--muted)', fontSize: 14, textAlign: 'center', padding: 40 }}>
            Keine Nachrichten in diesem Ticket.
          </div>
        ) : ticket.messages.map((m, i) => (
          <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <div className="avatar" style={{ background: m.from === 'Support' ? 'var(--green-ink)' : 'var(--navy-900)' }}>
              {m.from === 'Support' ? <Icon name="support" size={14} /> : 'TW'}
            </div>
            <div style={{ flex: 1 }}>
              <div className="row" style={{ gap: 8, marginBottom: 4 }}>
                <strong style={{ fontSize: 14 }}>{m.from === 'Support' ? 'ReadySSL Support' : 'Sie'}</strong>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted-2)' }}>{m.date}</span>
              </div>
              <div style={{
                background: m.from === 'Support' ? 'var(--green-soft)' : 'var(--surface)',
                border: '1px solid ' + (m.from === 'Support' ? 'oklch(0.88 0.05 155)' : 'var(--border)'),
                borderRadius: 10, padding: 12, fontSize: 14, lineHeight: 1.55,
                color: m.from === 'Support' ? 'var(--green-ink)' : 'var(--ink)',
              }}>
                {m.body}
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Reply */}
      {ticket.status !== 'geschlossen' ? (
        <div style={{ padding: 20, borderTop: '1px solid var(--border)', background: 'var(--surface)' }}>
          <textarea className="textarea" placeholder="Ihre Antwort an den Support…" value={reply} onChange={(e) => setReply(e.target.value)} style={{ minHeight: 80 }} />
          <div className="row-between" style={{ marginTop: 10 }}>
            <button className="btn btn-ghost btn-sm"><Icon name="paperclip" size={13} /> Datei anhängen</button>
            <button className="btn btn-primary btn-sm" disabled={!reply.trim()}>Antwort senden <Icon name="arrow-right" size={13} /></button>
          </div>
        </div>
      ) : (
        <div style={{ padding: 16, borderTop: '1px solid var(--border)', background: 'var(--surface)', textAlign: 'center', fontSize: 13.5, color: 'var(--muted)' }}>
          Dieses Ticket ist geschlossen. <a href="#" style={{ color: 'var(--navy-700)' }}>Wieder öffnen</a> oder neues Ticket erstellen.
        </div>
      )}
    </div>
  );
}

function NewTicketPage() {
  const { go } = useRouter();
  const { orders, createTicket } = useApp();
  const [data, setData] = useState({
    subject: '',
    category: 'SSL-Einrichtung',
    domain: '',
    message: '',
  });
  const [loading, setLoading] = useState(false);
  const update = (k, v) => setData((p) => ({ ...p, [k]: v }));
  const valid = data.subject.trim() && data.message.trim();

  const submit = async (e) => {
    e.preventDefault();
    if (!valid || loading) return;
    setLoading(true);
    await createTicket(data);
    setLoading(false);
    go('/dashboard/support');
  };

  return (
    <DashboardShell
      active="support"
      title="Neues Ticket erstellen"
      subtitle="Schildern Sie Ihr Anliegen — wir antworten in der Regel innerhalb von 24 Stunden."
    >
      <form className="section-card" style={{ maxWidth: 760 }} onSubmit={submit}>
        <div className="field-row cols-2">
          <div className="field"><label className="label">Betreff</label><input className="input" value={data.subject} onChange={(e) => update('subject', e.target.value)} placeholder="Kurze Beschreibung des Anliegens" /></div>
          <div className="field"><label className="label">Kategorie</label>
            <select className="select" value={data.category} onChange={(e) => update('category', e.target.value)}>
              <option>SSL-Einrichtung</option>
              <option>Zugangsdaten / Hosting</option>
              <option>Rechnung / Zahlung</option>
              <option>Kündigung / Verlängerung</option>
              <option>Technisches Problem</option>
              <option>Sonstiges</option>
            </select>
          </div>
        </div>

        <div className="field" style={{ marginTop: 14 }}>
          <label className="label">Bezug zu einem Kauf / Domain <span className="opt">optional</span></label>
          <select className="select" value={data.domain} onChange={(e) => update('domain', e.target.value)}>
            <option value="">— Kein Bezug —</option>
            {orders.map((o) => <option key={o.id} value={o.domain}>{o.domain} ({o.id})</option>)}
          </select>
        </div>

        <div className="field" style={{ marginTop: 14 }}>
          <label className="label">Nachricht</label>
          <textarea className="textarea" value={data.message} onChange={(e) => update('message', e.target.value)} placeholder="Beschreiben Sie Ihr Anliegen so detailliert wie möglich. Welche Schritte haben Sie bereits versucht?" />
        </div>

        <div className="field" style={{ marginTop: 14 }}>
          <label className="label">Anhang <span className="opt">optional</span></label>
          <div style={{ border: '1.5px dashed var(--border)', borderRadius: 10, padding: 22, textAlign: 'center', background: 'var(--surface)' }}>
            <div style={{ color: 'var(--muted)' }}><Icon name="paperclip" size={18} /></div>
            <div style={{ fontSize: 13.5, color: 'var(--ink-2)', marginTop: 6 }}>
              Datei hier ablegen oder <a href="#" style={{ color: 'var(--navy-700)' }}>auswählen</a>
            </div>
            <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>PDF, PNG, JPG · max. 10 MB</div>
          </div>
        </div>

        <div className="row-between" style={{ marginTop: 22 }}>
          <Link to="/dashboard/support" className="btn btn-ghost">Abbrechen</Link>
          <button type="submit" className="btn btn-primary" disabled={!valid || loading}>{loading ? 'Wird gesendet …' : <React.Fragment>Ticket senden <Icon name="arrow-right" size={14} /></React.Fragment>}</button>
        </div>
      </form>
    </DashboardShell>
  );
}

window.SupportPage = SupportPage;
window.NewTicketPage = NewTicketPage;