---
import Admin from '../../../layouts/Admin.astro';
import { getOrderById, updateOrderStatus } from '../../../lib/store.js';
import { formatPrice } from '../../../lib/seed.js';
const { id } = Astro.params;
if (Astro.request.method === 'POST') {
  const f = await Astro.request.formData();
  await updateOrderStatus(id, String(f.get('status') || 'pending'));
  return Astro.redirect(`/admin/bestellungen/${id}?ok=1`);
}
const o = await getOrderById(id);
if (!o) return Astro.redirect('/admin/bestellungen');
const ok = Astro.url.searchParams.get('ok');
const badge = (s) => ({ fulfilled:['green','Erfüllt'], pending:['amber','Offen'], cancelled:['gray','Storniert'], refunded:['blue','Erstattet'] }[s] || ['gray', s]);
const [bc, bl] = badge(o.status);
const subtotal = o.items.reduce((s,i)=>s+i.priceCents*i.qty,0);
const shipping = o.total_cents - subtotal;
const fmtDate = (s) => new Date(s).toLocaleDateString('de-DE', { day:'2-digit', month:'long', year:'numeric', hour:'2-digit', minute:'2-digit' });
---
<Admin title={`#${o.number}`} active="bestellungen" crumbs={[{label:'Bestellungen',href:'/admin/bestellungen'},{label:'#'+o.number}]}>
  <a slot="actions" href="/admin/bestellungen" class="s-btn">← Zurück</a>
  {ok && <div class="s-flash">✓ Status aktualisiert</div>}
  <div class="s-two-col">
    <div class="s-stack">
      <div class="s-card">
        <div class="s-card-head"><span>Artikel</span><span class={`s-badge ${bc}`}>{bl}</span></div>
        <div class="s-table-wrap"><table class="s-table">
          <thead><tr><th>Produkt</th><th>Größe</th><th>Menge</th><th class="num">Einzel</th><th class="num">Summe</th></tr></thead>
          <tbody>
            {o.items.map((i) => (
              <tr style="cursor:default">
                <td><span class="s-prodcell">{i.image && <img src={i.image} alt=""/>}<span class="nm">{i.name}</span></span></td>
                <td>{i.size || '—'}</td><td>{i.qty}</td>
                <td class="num">{formatPrice(i.priceCents)}</td>
                <td class="num">{formatPrice(i.priceCents*i.qty)}</td>
              </tr>
            ))}
          </tbody>
        </table></div>
        <div class="s-card-pad" style="border-top:1px solid var(--s-border)">
          <div style="display:flex;justify-content:space-between;padding:4px 0;color:var(--s-subtle)"><span>Zwischensumme</span><span>{formatPrice(subtotal)}</span></div>
          <div style="display:flex;justify-content:space-between;padding:4px 0;color:var(--s-subtle)"><span>Versand</span><span>{shipping<=0?'Kostenlos':formatPrice(shipping)}</span></div>
          <div style="display:flex;justify-content:space-between;padding:8px 0 0;font-weight:700;color:var(--s-ink);font-size:16px"><span>Gesamt</span><span>{formatPrice(o.total_cents)}</span></div>
        </div>
      </div>
    </div>
    <div class="s-stack">
      <div class="s-card s-card-pad">
        <p class="s-section-title">Status ändern</p>
        <form method="POST" style="display:flex;gap:8px;margin-top:8px">
          <select name="status" class="s-select">
            <option value="pending" selected={o.status==='pending'}>Offen</option>
            <option value="fulfilled" selected={o.status==='fulfilled'}>Erfüllt</option>
            <option value="cancelled" selected={o.status==='cancelled'}>Storniert</option>
            <option value="refunded" selected={o.status==='refunded'}>Erstattet</option>
          </select>
          <button class="s-btn s-btn-primary" type="submit">Speichern</button>
        </form>
      </div>
      <div class="s-card s-card-pad">
        <p class="s-section-title">Kunde</p>
        <p style="margin:6px 0 2px;font-weight:600;color:var(--s-ink)">{o.customer_name || '—'}</p>
        <p class="s-muted" style="font-size:13px">{o.email || '—'}</p>
        <p class="s-section-title" style="margin-top:16px">Lieferadresse</p>
        <p class="s-muted" style="font-size:13px">{o.address || 'keine Angabe'}</p>
        <p class="s-section-title" style="margin-top:16px">Bestellt am</p>
        <p class="s-muted" style="font-size:13px">{fmtDate(o.created_at)}</p>
      </div>
    </div>
  </div>
</Admin>
