// OrdersList + OrderDetail — live data from WooCommerce via /api/orders.

function useQueryParam(key) {
  const [value, setValue] = React.useState(() => {
    const h = window.location.hash.split('?')[1] || '';
    return new URLSearchParams(h).get(key) || '';
  });
  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.split('?')[1] || '';
      setValue(new URLSearchParams(h).get(key) || '');
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, [key]);
  return value;
}

function OrdersList() {
  const initialStatus = useQueryParam('status') || 'all';
  const [status, setStatus] = React.useState(initialStatus);
  const [search, setSearch] = React.useState('');
  const [page, setPage] = React.useState(1);
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  const canEdit = window.hasPerm ? window.hasPerm('orders.edit') : false;

  async function reload() {
    setLoading(true);
    const r = await API.listOrders({ status, search, page, per_page: 25 });
    setLoading(false);
    if (r.status === 503 && r.body.error === 'woocommerce_not_configured') {
      setError('not_configured');
      return;
    }
    if (!r.ok) { setError(r.body.message || 'Chyba pri načítaní.'); return; }
    setError(null);
    setData(r.body);
  }
  React.useEffect(() => { reload(); /* eslint-disable-next-line */ }, [status, page]);

  React.useEffect(() => {
    const id = setTimeout(() => { setPage(1); reload(); }, 350);
    return () => clearTimeout(id);
    // eslint-disable-next-line
  }, [search]);

  async function changeStatus(id, next) {
    if (!canEdit) return;
    if (!confirm(`Zmeniť stav objednávky na "${STATUS_MAP[next]?.label || next}"?`)) return;
    const r = await API.updateOrder(id, { status: next });
    if (r.ok) reload();
    else alert('Nepodarilo sa aktualizovať: ' + (r.body.message || r.body.error));
  }

  if (error === 'not_configured') {
    return (
      <AppShell active="orders" crumbs={['ERP', 'Objednávky']}>
        <div className="page-head"><div><h1>Objednávky</h1></div></div>
        <NotConnected/>
      </AppShell>
    );
  }

  const orders = data?.orders || [];
  const totalPages = data?.totalPages || 1;
  const total = data?.total || 0;

  return (
    <AppShell active="orders" crumbs={['ERP', 'Objednávky']}>
      <div className="page-head">
        <div>
          <h1>Objednávky</h1>
          <p>{total} objednávok · synchronizované z WooCommerce</p>
        </div>
        <div className="page-head-actions">
          <button className="btn" onClick={reload}><Ico.refresh/>Obnoviť</button>
        </div>
      </div>

      <div className="filters">
        <div style={{position:'relative', flex:1, maxWidth:320}}>
          <Ico.search style={{position:'absolute', left:10, top:9, color:'var(--ink-400)'}}/>
          <input
            className="input"
            placeholder="Hľadať podľa ID, e-mailu, mena…"
            style={{paddingLeft:30, width:'100%'}}
            value={search}
            onChange={e => setSearch(e.target.value)}
          />
        </div>
        <select className="select" value={status} onChange={e => { setStatus(e.target.value); setPage(1); }}>
          <option value="all">Všetky stavy</option>
          <option value="on-hold">Čaká na úhradu</option>
          <option value="processing">Spracúva sa</option>
          <option value="completed">Dokončené</option>
          <option value="pending">Nespracované</option>
          <option value="cancelled">Zrušené</option>
          <option value="refunded">Refundované</option>
          <option value="failed">Zlyhané</option>
        </select>
      </div>

      <div className="card" style={{overflow:'hidden'}}>
        {loading && <div style={{padding:20}} className="muted">Načítavam…</div>}
        {!loading && (
          <div style={{overflow:'auto'}}>
            <table className="tbl">
              <thead><tr>
                <th>Objednávka</th><th>Dátum</th><th>Zákazník</th><th>Firma</th><th style={{textAlign:'right'}}>Suma</th><th>Stav</th><th></th>
              </tr></thead>
              <tbody>
                {orders.length === 0 && (
                  <tr><td colSpan={7} style={{textAlign:'center', padding:30, color:'var(--ink-500)'}}>Žiadne objednávky.</td></tr>
                )}
                {orders.map(o => {
                  const s = STATUS_MAP[o.status] || { label: o.status, cls: 'gray' };
                  return (
                    <tr key={o.id}>
                      <td><span className="mono" style={{color:'var(--navy-700)', fontWeight:600}}>#{o.number}</span></td>
                      <td className="small">{formatDate(o.date)}</td>
                      <td>{o.customer_name}<div className="small muted">{o.email}</div></td>
                      <td>{o.company || (o.is_company ? 'áno' : '—')}{o.company_ico && <div className="small muted">IČO {o.company_ico}</div>}</td>
                      <td style={{textAlign:'right', fontWeight:600}}>{formatCurrency(parseFloat(o.total), o.currency)}</td>
                      <td>
                        {canEdit ? (
                          <select
                            className="select"
                            value={o.status}
                            style={{height:26, fontSize:11.5, padding:'0 4px'}}
                            onChange={e => changeStatus(o.id, e.target.value)}
                          >
                            {Object.entries(STATUS_MAP).map(([k, v]) => (
                              <option key={k} value={k}>{v.label}</option>
                            ))}
                          </select>
                        ) : <span className={`chip dot ${s.cls}`}>{s.label}</span>}
                      </td>
                      <td><a className="btn btn-xs" href={`#/order?id=${o.id}`}>Otvoriť</a></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
        {totalPages > 1 && (
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 14px', borderTop:'1px solid var(--border)', fontSize:12}}>
            <span className="muted">Strana {page} z {totalPages} · {total} záznamov</span>
            <div className="hstack">
              <button className="btn btn-xs" disabled={page <= 1} onClick={() => setPage(p => Math.max(1, p - 1))}>← Prev</button>
              <button className="btn btn-xs" disabled={page >= totalPages} onClick={() => setPage(p => Math.min(totalPages, p + 1))}>Next →</button>
            </div>
          </div>
        )}
      </div>
    </AppShell>
  );
}

function ShippingEditor({ order, canEdit, onSaved }) {
  const [editing, setEditing] = React.useState(false);
  const [cost, setCost] = React.useState(order.shipping || '0');
  const [title, setTitle] = React.useState(order.shipping_method || '');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');

  const current = parseFloat(order.shipping || '0');
  const methodLabel = order.shipping_method || '—';
  // Show editor ONLY when shipping method says "doprava bude dopočítaná" — for other
  // methods (Osobný odber, paušálna sadzba, …) we don't want to clutter the detail.
  const isTBD = /dopo[čc][íi]tan/i.test(methodLabel);
  if (!isTBD) return null;

  React.useEffect(() => {
    setCost(order.shipping || '0');
    setTitle(order.shipping_method || '');
  }, [order.shipping, order.shipping_method]);

  async function save() {
    setBusy(true); setErr('');
    const r = await API.updateOrder(order.id, {
      shipping_cost: String(cost).replace(',', '.'),
      shipping_title: title,
    });
    setBusy(false);
    if (r.ok) { setEditing(false); onSaved && onSaved(); }
    else setErr(r.body.message || r.body.error || 'Nepodarilo sa uložiť.');
  }

  return (
    <div className="card" style={isTBD ? { borderLeft: '4px solid var(--amber-500)' } : {}}>
      <div className="card-head">
        <h3>Doprava</h3>
        {isTBD && <span className="chip amber dot">Potrebuje dopočítanie</span>}
      </div>
      <div className="card-body">
        {!editing ? (
          <div className="hstack" style={{alignItems:'flex-start'}}>
            <div style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:500}}>{methodLabel}</div>
              <div style={{fontSize:18, fontWeight:700, marginTop:4}}>{formatCurrency(current, order.currency)}</div>
              {isTBD && <div className="small muted" style={{marginTop:4}}>Zadajte skutočnú cenu dopravy — zmení sa aj v súčte objednávky.</div>}
            </div>
            {canEdit && (
              <button className="btn btn-sm btn-primary" onClick={() => setEditing(true)}>
                <Ico.construction style={{width:12, height:12}}/>
                {current === 0 ? 'Zadať cenu dopravy' : 'Upraviť'}
              </button>
            )}
          </div>
        ) : (
          <div>
            {err && <div className="auth-alert" role="alert"><span>{err}</span></div>}
            <div style={{display:'grid', gridTemplateColumns:'2fr 1fr auto', gap:10, alignItems:'end'}}>
              <div className="field">
                <label>Popis dopravy</label>
                <input className="input" value={title} onChange={e => setTitle(e.target.value)} placeholder="Napr. Paleta 1200×800, Žilina → Trnava"/>
              </div>
              <div className="field">
                <label>Cena (bez DPH, {order.currency || 'EUR'})</label>
                <input className="input" value={cost} onChange={e => setCost(e.target.value)} inputMode="decimal" placeholder="0.00"/>
              </div>
              <div className="hstack">
                <button className="btn btn-primary btn-sm" onClick={save} disabled={busy}>{busy ? 'Ukladám…' : 'Uložiť'}</button>
                <button className="btn btn-sm" onClick={() => setEditing(false)} disabled={busy}>Zrušiť</button>
              </div>
            </div>
            <div className="small muted" style={{marginTop:8}}>
              Zmena sa okamžite prejaví vo WooCommerce — prepočíta sa total objednávky. Zákazníkovi sa odporúča poslať novú zálohovku / faktúru so správnou sumou.
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function PickupCard({ order, canEdit, onSaved }) {
  const [pickup, setPickup] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [editing, setEditing] = React.useState(false);
  const [form, setForm] = React.useState({});
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');

  const isPickupOrder = /osobn|pickup|odber/i.test(order.shipping_method || '');

  // Lazy fetch pickup meta from bridge (WC REST doesn't expose private meta).
  async function load() {
    setLoading(true);
    const r = await API.getOrderPickup(order.id);
    setLoading(false);
    if (r.ok) {
      setPickup(r.body);
      setForm({
        pickup_date:   r.body.pickup_date   || '',
        pickup_time:   r.body.pickup_time   || '',
        pickup_person: r.body.pickup_person || '',
        pickup_spz:    r.body.pickup_spz    || '',
        pickup_status: r.body.pickup_status || 'pending',
      });
    }
  }
  React.useEffect(() => { if (isPickupOrder) load(); /* eslint-disable-next-line */ }, [order.id, isPickupOrder]);

  async function save() {
    setBusy(true); setErr('');
    const r = await API.updateOrderPickup(order.id, form);
    setBusy(false);
    if (r.ok) { setEditing(false); load(); onSaved && onSaved(); }
    else setErr(r.body.message || 'Chyba.');
  }
  async function setStatus(next) {
    setBusy(true);
    const r = await API.updateOrderPickup(order.id, { pickup_status: next });
    setBusy(false);
    if (r.ok) load();
  }

  if (!isPickupOrder) return null;

  const statusChip = (s) => {
    const map = {
      pending:   { label: 'Čaká na potvrdenie', cls: 'amber' },
      confirmed: { label: 'Potvrdené',          cls: 'green' },
      suggested: { label: 'Navrhnutý nový termín', cls: 'navy' },
      picked_up: { label: 'Vyzdvihnuté',        cls: 'green' },
    };
    const v = map[s] || map.pending;
    return <span className={`chip dot ${v.cls}`}>{v.label}</span>;
  };

  return (
    <div className="card" style={{borderLeft: '4px solid var(--amber-500)'}}>
      <div className="card-head">
        <h3>Osobný odber</h3>
        {pickup && statusChip(pickup.pickup_status)}
      </div>
      <div className="card-body">
        {loading && !pickup && <div className="muted">Načítavam…</div>}
        {pickup && !loading && !editing && (
          <>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap:14, fontSize:13}}>
              <div><div className="small muted">Dátum</div><b>{pickup.pickup_date || '—'}</b></div>
              <div><div className="small muted">Čas</div><b>{pickup.pickup_time || '—'}</b></div>
              <div><div className="small muted">Osoba</div><b>{pickup.pickup_person || '—'}</b></div>
              <div><div className="small muted">ŠPZ</div><b style={{textTransform:'uppercase'}}>{pickup.pickup_spz || '—'}</b></div>
            </div>
            {canEdit && (
              <div className="hstack" style={{marginTop:12, gap:6}}>
                {pickup.pickup_status !== 'confirmed' && (
                  <button className="btn btn-sm" style={{background:'var(--green-100)', color:'#135e37', borderColor:'transparent'}}
                          onClick={() => setStatus('confirmed')} disabled={busy}>
                    <Ico.check/>Potvrdiť termín
                  </button>
                )}
                {pickup.pickup_status !== 'picked_up' && (
                  <button className="btn btn-sm" onClick={() => setStatus('picked_up')} disabled={busy}>
                    Vyzdvihnuté
                  </button>
                )}
                <button className="btn btn-sm" style={{marginLeft:'auto'}} onClick={() => setEditing(true)}>
                  Upraviť
                </button>
              </div>
            )}
          </>
        )}
        {editing && (
          <>
            {err && <div className="auth-alert"><span>{err}</span></div>}
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
              <div className="field">
                <label>Dátum</label>
                <input className="input" type="text" value={form.pickup_date} onChange={e => setForm(f => ({...f, pickup_date: e.target.value}))} placeholder="YYYY-MM-DD alebo DD.MM.YYYY"/>
              </div>
              <div className="field">
                <label>Čas</label>
                <input className="input" type="text" value={form.pickup_time} onChange={e => setForm(f => ({...f, pickup_time: e.target.value}))} placeholder="HH:MM"/>
              </div>
              <div className="field">
                <label>Osoba na vyzdvihnutie</label>
                <input className="input" value={form.pickup_person} onChange={e => setForm(f => ({...f, pickup_person: e.target.value}))}/>
              </div>
              <div className="field">
                <label>ŠPZ vozidla</label>
                <input className="input mono" value={form.pickup_spz} onChange={e => setForm(f => ({...f, pickup_spz: e.target.value.toUpperCase()}))}/>
              </div>
              <div className="field" style={{gridColumn:'span 2'}}>
                <label>Stav pickup-u</label>
                <select className="select" value={form.pickup_status} onChange={e => setForm(f => ({...f, pickup_status: e.target.value}))}>
                  <option value="pending">Čaká na potvrdenie</option>
                  <option value="confirmed">Potvrdené</option>
                  <option value="suggested">Navrhnutý nový termín</option>
                  <option value="picked_up">Vyzdvihnuté</option>
                </select>
              </div>
            </div>
            <div className="hstack" style={{marginTop:10}}>
              <button className="btn btn-primary btn-sm" onClick={save} disabled={busy}>{busy ? 'Ukladám…' : 'Uložiť'}</button>
              <button className="btn btn-sm" onClick={() => setEditing(false)} disabled={busy}>Zrušiť</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function OrderDetail() {
  const id = useQueryParam('id');
  const [order, setOrder] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const canEdit = window.hasPerm ? window.hasPerm('orders.edit') : false;

  async function reload() {
    if (!id) { setError('Chýba ID objednávky.'); setLoading(false); return; }
    setLoading(true);
    const r = await API.getOrder(id);
    setLoading(false);
    if (r.ok) { setOrder(r.body.order); setError(''); }
    else setError(r.body.message || 'Nepodarilo sa načítať.');
  }
  React.useEffect(() => { reload(); /* eslint-disable-next-line */ }, [id]);

  if (loading) return <AppShell active="orders" crumbs={['ERP','Objednávky','…']}><div style={{padding:20}} className="muted">Načítavam…</div></AppShell>;
  if (error) return <AppShell active="orders" crumbs={['ERP','Objednávky']}><div className="card" style={{padding:20, color:'var(--red-500)'}}>{error}</div></AppShell>;
  if (!order) return null;

  const s = STATUS_MAP[order.status] || { label: order.status, cls: 'gray' };

  return (
    <AppShell active="orders" crumbs={['ERP', 'Objednávky', `#${order.number}`]}>
      <div className="page-head">
        <div>
          <div className="hstack" style={{marginBottom:4}}>
            <h1 style={{margin:0}}>Objednávka <span className="mono" style={{color:'var(--navy-700)'}}>#{order.number}</span></h1>
            <span className={`chip dot ${s.cls}`}>{s.label}</span>
            {order.is_company && <span className="chip navy dot">B2B</span>}
          </div>
          <p>{formatDate(order.date)} · {order.payment_method} · {order.shipping_method}</p>
        </div>
        <div className="page-head-actions">
          <a href="#/orders" className="btn">Späť</a>
          {canEdit && (
            <select
              className="select"
              value={order.status}
              onChange={async e => {
                const r = await API.updateOrder(order.id, { status: e.target.value });
                if (r.ok) reload(); else alert('Chyba: ' + (r.body.message || r.body.error));
              }}
            >
              {Object.entries(STATUS_MAP).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
            </select>
          )}
        </div>
      </div>

      <div className="split">
        <div className="vstack" style={{gap:14}}>
          <div className="card">
            <div className="card-head"><h3>Položky</h3><span className="muted">{order.items.length} položiek</span></div>
            <table className="tbl">
              <thead><tr><th>Produkt</th><th>SKU</th><th>Množstvo</th><th style={{textAlign:'right'}}>Spolu</th></tr></thead>
              <tbody>
                {order.items.map(li => (
                  <tr key={li.id}>
                    <td>{li.name}</td>
                    <td className="mono small">{li.sku || '—'}</td>
                    <td>{li.quantity} ks</td>
                    <td style={{textAlign:'right', fontWeight:600}}>{formatCurrency(parseFloat(li.total), order.currency)}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr><td colSpan={3} style={{textAlign:'right'}} className="muted small">Medzisúčet</td><td style={{textAlign:'right'}}>{formatCurrency(parseFloat(order.subtotal || 0), order.currency)}</td></tr>
                <tr><td colSpan={3} style={{textAlign:'right'}} className="muted small">Doprava</td><td style={{textAlign:'right'}}>{formatCurrency(parseFloat(order.shipping || 0), order.currency)}</td></tr>
                <tr><td colSpan={3} style={{textAlign:'right'}} className="muted small">DPH</td><td style={{textAlign:'right'}}>{formatCurrency(parseFloat(order.tax || 0), order.currency)}</td></tr>
                <tr><td colSpan={3} style={{textAlign:'right', fontWeight:700}}>Celkom</td><td style={{textAlign:'right', fontWeight:700, fontSize:15}}>{formatCurrency(parseFloat(order.total), order.currency)}</td></tr>
              </tfoot>
            </table>
          </div>

          <ShippingEditor order={order} canEdit={canEdit} onSaved={reload}/>

          {order.notes && (
            <div className="card">
              <div className="card-head"><h3>Poznámka zákazníka</h3></div>
              <div className="card-body"><div style={{whiteSpace:'pre-wrap'}}>{order.notes}</div></div>
            </div>
          )}

          <PickupCard order={order} canEdit={canEdit} onSaved={reload}/>
        </div>

        <div className="vstack" style={{gap:14}}>
          <div className="card">
            <div className="card-head"><h3>Zákazník</h3></div>
            <div className="card-body">
              <div style={{fontSize:14, fontWeight:600}}>{order.customer_name}</div>
              <div className="small muted">{order.email}</div>
              {order.phone && <div className="small">{order.phone}</div>}
              <div className="divider"/>
              <div className="small muted" style={{textTransform:'uppercase', letterSpacing:'0.06em'}}>Fakturačná adresa</div>
              <div>{order.billing_address || '—'}</div>
              {order.shipping_address && order.shipping_address !== order.billing_address && (
                <>
                  <div className="small muted" style={{textTransform:'uppercase', letterSpacing:'0.06em', marginTop:8}}>Dodacia adresa</div>
                  <div>{order.shipping_address}</div>
                </>
              )}
              {order.is_company && (
                <>
                  <div className="divider"/>
                  <div><b>{order.company}</b></div>
                  {order.company_ico   && <div className="small">IČO: <span className="mono">{order.company_ico}</span></div>}
                  {order.company_icdph && <div className="small">IČ DPH: <span className="mono">{order.company_icdph}</span></div>}
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </AppShell>
  );
}

Object.assign(window, { OrdersList, OrderDetail });