// 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={['CRM', '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={['CRM', '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.upload/>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 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={['CRM','Objednávky','…']}><div style={{padding:20}} className="muted">Načítavam…</div></AppShell>;
  if (error) return <AppShell active="orders" crumbs={['CRM','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={['CRM', '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>

          {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>
          )}

          {(order.pickup_date || order.pickup_time) && (
            <div className="card" style={{borderLeft:'4px solid var(--amber-500)'}}>
              <div className="card-head"><h3>Osobný odber</h3></div>
              <div className="card-body" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, fontSize:13}}>
                <div><div className="small muted">Dátum</div><b>{order.pickup_date}</b></div>
                <div><div className="small muted">Čas</div><b>{order.pickup_time}</b></div>
                <div><div className="small muted">Osoba</div><b>{order.pickup_person || '—'}</b></div>
                <div><div className="small muted">ŠPZ</div><b>{order.pickup_spz || '—'}</b></div>
              </div>
            </div>
          )}
        </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 });