/* admin.jsx - AdminLogin, AdminDashboard, OrderCard wired to D1 APIs. */

const STATUS_TABS = [
  { id: 'pending',   label: 'Pending'   },
  { id: 'confirmed', label: 'Confirmed' },
  { id: 'completed', label: 'Completed' },
  { id: 'canceled',  label: 'Canceled'  },
];

const FLAVOR_NAMES = {
  original: 'Original',
  cinnamon_crumble: 'Cinnamon Crumble',
  pumpkin_spice: 'Pumpkin Spice',
  chocolate_chip: 'Chocolate Chip',
  nutella: 'Nutella',
};
const PAYMENT_NAMES = {
  cash_app: 'Cash App',
  apple_pay: 'Apple Pay',
  paypal: 'PayPal',
  cash: 'Cash',
};

function formatCreated(iso) {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return '';
  const opts = { month: 'short', day: 'numeric' };
  const time = d.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
  return `${d.toLocaleDateString([], opts)} ${time.toLowerCase()}`;
}

function KebabMenu({ items }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const off = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('pointerdown', off, true);
    return () => document.removeEventListener('pointerdown', off, true);
  }, [open]);

  return (
    <div className="lb-kebab" ref={ref}>
      <button type="button" className="lb-kebab__btn" onClick={() => setOpen((v) => !v)} aria-label="More actions" aria-haspopup="menu" aria-expanded={open}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><circle cx="3" cy="8" r="1.6" /><circle cx="8" cy="8" r="1.6" /><circle cx="13" cy="8" r="1.6" /></svg>
      </button>
      {open && (
        <div className="lb-kebab__menu" role="menu">
          {items.map((it, i) => (
            <button key={i} type="button" role="menuitem" className={'lb-kebab__item' + (it.danger ? ' is-danger' : '')} onClick={() => { setOpen(false); it.onClick && it.onClick(); }} disabled={it.disabled}>
              {it.icon}<span>{it.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function OrderCard({ order, onUpdateStatus, onEdit }) {
  const firstName = (order.name || 'there').split(' ')[0] || 'there';
  const smsPhone = order.smsPhone || order.normalizedPhone || order.phone || '';
  const sms = `sms:${smsPhone}?&body=${encodeURIComponent("Hey! This is Laurel’s Bakehouse. I got your banana bread order request and will confirm details with you here.")}`;
  const tel = `tel:${smsPhone || (order.phone || '').replace(/\D/g,'')}`;

  const showConfirm = order.status === 'pending';
  const showComplete = order.status === 'confirmed';
  const canCancel = order.status === 'pending' || order.status === 'confirmed';
  const canReopen = order.status === 'canceled' || order.status === 'completed';

  const menuItems = [
    {
      label: 'Edit details',
      icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>,
      onClick: () => onEdit && onEdit(order.id),
    },
    {
      label: 'Copy phone',
      icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></svg>,
      onClick: () => navigator.clipboard && navigator.clipboard.writeText(order.phone),
    },
    canReopen && {
      label: 'Move back to pending',
      icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" /></svg>,
      onClick: () => onUpdateStatus(order.id, 'pending'),
    },
    canCancel && {
      label: 'Cancel order',
      icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" /></svg>,
      onClick: () => onUpdateStatus(order.id, 'canceled'),
      danger: true,
    },
  ].filter(Boolean);

  const lineLine = order.custom ? 'Custom request' : (order.itemSummary || [order.largeCount > 0 && `${order.largeCount}× large`, order.smallCount > 0 && `${order.smallCount}× regular`].filter(Boolean).join(' · '));

  return (
    <div className="lb-order-card">
      <div className="lb-order-card__top">
        <div style={{ minWidth: 0 }}>
          <h3 className="lb-order-card__name">{order.name}</h3>
          <div className="lb-order-card__phone"><Icon.phone size={11} />{order.phone}</div>
        </div>
        <span className={`lb-status lb-status--${order.status}`}>{order.status}</span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '10px 0', borderTop: '1px dashed var(--lb-rule)', borderBottom: '1px dashed var(--lb-rule)' }}>
        <div className="lb-order-card__qty">
          <strong>{lineLine || order.itemSummary || 'No loaves'}</strong>
          {!order.custom && !order.itemSummary && order.flavor && (
            <span style={{ fontFamily: 'var(--lb-font-display)', fontSize: 9, letterSpacing: '0.26em', textTransform: 'uppercase', color: 'var(--lb-vintage-clay)', marginLeft: 10 }}>
              {FLAVOR_NAMES[order.flavor]}
              {order.mixIns && order.mixIns.length > 0 ? ` + ${order.mixIns.map((m) => FLAVOR_NAMES[m]).join(', ')}` : ''}
            </span>
          )}
        </div>
        {!order.custom && <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2 }}><div className="lb-order-card__price">${order.net}</div>{order.saved > 0 && <div style={{ fontFamily: 'var(--lb-font-serif)', fontStyle: 'italic', fontSize: 11, color: 'var(--lb-rust-petal)' }}>saved ${order.saved}</div>}</div>}
        {order.custom && <div style={{ fontFamily: 'var(--lb-font-serif)', fontStyle: 'italic', fontSize: 13, color: 'var(--lb-vintage-clay)' }}>tbd</div>}
      </div>

      {order.pickup && <div style={{ marginTop: 10, fontFamily: 'var(--lb-font-body)', fontSize: 12.5, color: 'var(--lb-midnight-espresso)', opacity: 0.78, letterSpacing: '0.02em' }}><span style={{ fontFamily: 'var(--lb-font-display)', fontSize: 9, letterSpacing: '0.30em', textTransform: 'uppercase', color: 'var(--lb-vintage-clay)', marginRight: 8 }}>Delivery</span>{order.pickup}</div>}

      {order.paymentPref && <div style={{ marginTop: 6, fontFamily: 'var(--lb-font-body)', fontSize: 12.5, color: 'var(--lb-midnight-espresso)', opacity: 0.78 }}><span style={{ fontFamily: 'var(--lb-font-display)', fontSize: 9, letterSpacing: '0.30em', textTransform: 'uppercase', color: 'var(--lb-vintage-clay)', marginRight: 8 }}>Pays via</span>{PAYMENT_NAMES[order.paymentPref]}{order.paymentPref === 'cash' ? ' (on delivery)' : ''}</div>}

      {(order.notes || order.idea) && <div className="lb-order-card__notes">“{order.idea || order.notes}”</div>}

      <div className="lb-order-card__meta"><span>{formatCreated(order.createdAt)}</span><span style={{ fontFamily: 'var(--lb-font-serif)', fontStyle: 'italic', color: 'var(--lb-vintage-clay)' }}>#{order.displayId || order.id}</span></div>

      <div className="lb-card-actions">
        <div className="lb-card-actions__contact"><a className="lb-iconaction" href={sms} title={`Text ${firstName}`}><Icon.message size={14} /><span className="lb-iconaction__label">Text</span></a><a className="lb-iconaction" href={tel} title={`Call ${firstName}`}><Icon.phone size={14} /><span className="lb-iconaction__label">Call</span></a></div>
        <div className="lb-card-actions__status">
          {showConfirm && <button className="lb-statusbtn lb-statusbtn--primary" onClick={() => onUpdateStatus(order.id, 'confirmed')}><Icon.check size={13} />Confirm</button>}
          {showComplete && <button className="lb-statusbtn lb-statusbtn--primary" onClick={() => onUpdateStatus(order.id, 'completed')}><Icon.check size={13} />Complete</button>}
          <KebabMenu items={menuItems} />
        </div>
      </div>
    </div>
  );
}

function AdminLogin({ onLogin }) {
  const [password, setPassword] = React.useState('');
  const [err, setErr] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (!password) { setErr('Password, please.'); return; }
    setLoading(true);
    setErr('');
    try {
      await onLogin(password);
    } catch {
      setErr('Unable to sign in.');
    } finally {
      setLoading(false);
    }
  };
  return (
    <div className="lb-login">
      <img src="assets/wheat-flower.png" alt="" aria-hidden="true" style={{ position: 'absolute', top: 24, right: -16, width: 110, opacity: 0.18, transform: 'rotate(14deg)' }} />
      <img src="assets/wheat-flower.png" alt="" aria-hidden="true" style={{ position: 'absolute', bottom: 22, left: -18, width: 100, opacity: 0.15, transform: 'rotate(-160deg)' }} />
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, marginBottom: 14 }}>
        <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--lb-paper)', color: 'var(--lb-mulberry-wine)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--lb-shadow-sm)', marginBottom: 8 }}><Icon.lock size={20} /></div>
        <div className="lb-login__title">Bakehouse</div>
        <div style={{ fontFamily: 'var(--lb-font-display)', fontSize: 10, letterSpacing: '0.42em', textTransform: 'uppercase', color: 'var(--lb-vintage-clay)', marginTop: 2 }}>Admin</div>
        <div className="lb-login__sub">Welcome back, Laurel.</div>
      </div>
      <form className="lb-login__form" onSubmit={submit}>
        <div className={'lb-field' + (err ? ' lb-field--error' : '')}>
          <label>Password</label>
          <input type="password" value={password} onChange={(e) => { setPassword(e.target.value); setErr(''); }} placeholder="••••••••" autoFocus />
          {err && <div className="lb-field-error">{err}</div>}
        </div>
        <button type="submit" className="lb-btn lb-btn--primary" style={{ marginTop: 4 }} disabled={loading}>{loading ? 'Signing in' : 'Sign in'}<Heart size={11} /></button>
        <div style={{ fontFamily: 'var(--lb-font-serif)', fontStyle: 'italic', fontSize: 12, color: 'var(--lb-vintage-clay)', textAlign: 'center', marginTop: 2 }}>Use Laurel’s admin password.</div>
      </form>
    </div>
  );
}

function AdminDashboard({ orders, onUpdateStatus, onSignOut, loading, error }) {
  const [tab, setTab] = React.useState('pending');
  const counts = React.useMemo(() => {
    const c = {};
    STATUS_TABS.forEach((t) => (c[t.id] = 0));
    orders.forEach((o) => (c[o.status] = (c[o.status] || 0) + 1));
    return c;
  }, [orders]);
  const visible = orders.filter((o) => o.status === tab);
  const today = new Date().toLocaleDateString([], { weekday: 'long', month: 'short', day: 'numeric' });

  return (
    <div className="lb-admin">
      <div className="lb-admin-h">
        <div className="lb-admin-brand"><img src="assets/wheat-flower.png" alt="" aria-hidden="true" className="lb-admin-brand__sprig" /><div className="lb-admin-brand__words"><div className="lb-admin-brand__row1">Laurel’s</div><div className="lb-admin-brand__row2">Bakehouse</div></div></div>
        <button onClick={onSignOut} className="lb-btn lb-btn--ghost" style={{ padding: '6px 6px', whiteSpace: 'nowrap' }} title="Sign out">Sign out</button>
      </div>
      <div className="lb-admin-sub"><span>Admin</span><Heart size={7} color="var(--lb-vintage-clay)" /><span>{today}</span></div>
      <div className="lb-tabs">{STATUS_TABS.map((t) => <button key={t.id} onClick={() => setTab(t.id)} className={'lb-tab' + (tab === t.id ? ' is-on' : '')}>{t.label}<span className="lb-tab-count">{counts[t.id]}</span></button>)}</div>
      {error && <div style={{ background: 'var(--lb-paper)', border: '1px solid var(--lb-rule)', borderRadius: 14, padding: '12px 14px', marginBottom: 12, fontFamily: 'var(--lb-font-serif)', fontStyle: 'italic', color: 'var(--lb-rust-petal)' }}>{error}</div>}
      {loading && visible.length === 0 ? <div style={{ background: 'var(--lb-paper)', border: '1px dashed var(--lb-rule)', borderRadius: 16, padding: '34px 18px', textAlign: 'center', fontFamily: 'var(--lb-font-serif)', fontStyle: 'italic', color: 'var(--lb-vintage-clay)' }}>Loading orders</div> : visible.length === 0 ? (
        <div style={{ background: 'var(--lb-paper)', border: '1px dashed var(--lb-rule)', borderRadius: 16, padding: '34px 18px', textAlign: 'center' }}><div style={{ color: 'var(--lb-vintage-clay)', display: 'inline-flex', justifyContent: 'center', marginBottom: 10 }}><Heart size={20} color="var(--lb-vintage-clay)" /></div><div style={{ fontFamily: 'var(--lb-font-display)', fontSize: 14, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--lb-mulberry-wine)' }}>Nothing here yet</div><div style={{ fontFamily: 'var(--lb-font-serif)', fontStyle: 'italic', fontSize: 13, color: 'var(--lb-vintage-clay)', marginTop: 6 }}>New requests will land in Pending.</div></div>
      ) : visible.map((o) => <OrderCard key={o.id} order={o} onUpdateStatus={onUpdateStatus} onEdit={(id) => console.log('[admin] edit', id)} />)}
    </div>
  );
}

Object.assign(window, { AdminLogin, AdminDashboard, OrderCard, KebabMenu, STATUS_TABS, FLAVOR_NAMES, PAYMENT_NAMES, MOCK_ORDERS: [] });