// Odstúpenia od zmluvy (§20a) + editor e-mailových šablón stavov objednávok.
// Dáta z WP bridge v1.2.0 (/api/withdrawals, /api/order-emails).

// ── Odstúpenia od zmluvy ────────────────────────────────────────────────
function Withdrawals() {
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');

  async function reload() {
    setLoading(true);
    const r = await API.listWithdrawals(200);
    setLoading(false);
    if (r.status === 503) { setError('not_configured'); return; }
    if (!r.ok) { setError(r.body.message || r.body.error || 'Chyba pri načítaní.'); return; }
    setError(''); setData(r.body);
  }
  React.useEffect(() => { reload(); }, []);

  const rules = data?.rules;
  const eligible = data?.eligible || [];
  const submitted = data?.submitted || [];

  function daysChip(d, expired) {
    if (expired || d == null) return <span className="chip red dot">po lehote</span>;
    const cls = d <= 2 ? 'red' : (d <= 5 ? 'amber' : 'green');
    return <span className={`chip ${cls} dot`}>{d} dní</span>;
  }

  return (
    <AppShell active="withdrawals" crumbs={['ERP', 'Odstúpenia od zmluvy']}>
      <div className="page-head">
        <div>
          <h1>Odstúpenie od zmluvy</h1>
          <p>§ 20a zák. 108/2024 Z. z. · nárok má len spotrebiteľ (nie B2B)</p>
        </div>
        <div className="page-head-actions">
          <button className="btn" onClick={reload}><Ico.refresh/>Obnoviť</button>
        </div>
      </div>

      {error === 'not_configured' && <NotConnected/>}
      {error && error !== 'not_configured' && <div className="card" style={{padding:20, color:'var(--red-500)'}}>{error}</div>}

      {rules && (
        <div className="card" style={{padding:'10px 14px', marginBottom:12, fontSize:13}}>
          <b>Pravidlá:</b> lehota <b>{rules.days} dní</b> od dokončenia objednávky ·
          nárok len pri stavoch: {(rules.eligible_statuses || []).map(s => STATUS_MAP[s]?.label || s).join(', ')} ·
          B2B (firemné objednávky) nárok nemajú ·
          zdroj pravidiel: <span className="mono">{rules.source === 'plugin' ? 'plugin na webe' : 'fallback'}</span>
        </div>
      )}

      {loading && <div className="card" style={{padding:20}} className="muted">Načítavam…</div>}

      {data && (
        <>
          <div className="card" style={{overflow:'hidden', marginBottom:16}}>
            <div className="card-head">
              <h3>Majú nárok (v lehote) — {eligible.length}</h3>
              <span className="muted">objednávky, ktoré ešte môžu odstúpiť</span>
            </div>
            <div style={{overflow:'auto'}}>
              <table className="tbl">
                <thead><tr><th>Objednávka</th><th>Zákazník</th><th>Dokončená</th><th>Uplynie</th><th>Zostáva</th><th style={{textAlign:'right'}}>Suma</th></tr></thead>
                <tbody>
                  {eligible.length === 0 && <tr><td colSpan={6} style={{textAlign:'center', padding:24, color:'var(--ink-500)'}}>Žiadne objednávky v lehote.</td></tr>}
                  {eligible.map(o => (
                    <tr key={o.order_id}>
                      <td><a className="mono" style={{color:'var(--navy-700)', fontWeight:600}} href={`#/order?id=${o.order_id}`}>#{o.order_number}</a></td>
                      <td>{o.customer_name || '—'}<div className="small muted">{o.email}</div></td>
                      <td className="small">{o.completed_at ? formatDate(o.completed_at) : '—'}</td>
                      <td className="small">{o.deadline ? formatDate(o.deadline) : '—'}</td>
                      <td>{daysChip(o.days_left, o.expired)}</td>
                      <td style={{textAlign:'right', fontWeight:600}}>{o.order_total}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          <div className="card" style={{overflow:'hidden'}}>
            <div className="card-head">
              <h3>Podané odstúpenia — {submitted.length}</h3>
              <span className="muted">už podané žiadosti (+ PDF doklad)</span>
            </div>
            <div style={{overflow:'auto'}}>
              <table className="tbl">
                <thead><tr><th>Objednávka</th><th>Zákazník</th><th>Firma</th><th>Podané</th><th>Doklad</th></tr></thead>
                <tbody>
                  {submitted.length === 0 && <tr><td colSpan={5} style={{textAlign:'center', padding:24, color:'var(--ink-500)'}}>Zatiaľ žiadne podané odstúpenia.</td></tr>}
                  {submitted.map(o => (
                    <tr key={o.order_id}>
                      <td><a className="mono" style={{color:'var(--navy-700)', fontWeight:600}} href={`#/order?id=${o.order_id}`}>#{o.order_number}</a></td>
                      <td>{o.customer_name || '—'}<div className="small muted">{o.email}</div></td>
                      <td>{o.company || (o.is_business ? 'áno' : '—')}</td>
                      <td className="small">{o.created_at ? formatDate(o.created_at) : '—'}</td>
                      <td>{o.pdf_url ? <a className="btn btn-xs" href={o.pdf_url} target="_blank" rel="noreferrer">PDF</a> : '—'}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}
    </AppShell>
  );
}

// ── Editor e-mailových šablón stavov objednávok ─────────────────────────
const OSTAT_LIST = [
  { key: 'dd-potvrdena',   label: 'Potvrdená' },
  { key: 'dd-pripravuje',  label: 'Pripravuje sa' },
  { key: 'dd-pripravena',  label: 'Pripravená (odber/expedícia)' },
  { key: 'dd-odoslana',    label: 'Odoslaná' },
  { key: 'dd-vyzdvihnuta', label: 'Vyzdvihnutá' },
];
const ostatKey = (k, suffix) => 'dd_ostat_' + k.replace(/-/g, '_') + '_' + suffix;

function OrderEmailSettings() {
  const [settings, setSettings] = React.useState(null);
  const [form, setForm] = React.useState({});
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [saved, setSaved] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const canEdit = window.hasPerm ? window.hasPerm('orders.edit') : false;

  async function reload() {
    setLoading(true);
    const r = await API.getOrderEmails();
    setLoading(false);
    if (r.status === 503) { setError('not_configured'); return; }
    if (!r.ok) { setError(r.body.message || r.body.error || 'Chyba pri načítaní.'); return; }
    setError('');
    const s = r.body.settings || {};
    setSettings(s);
    const f = {};
    for (const k of Object.keys(s)) f[k] = s[k]?.value ?? '';
    setForm(f);
  }
  React.useEffect(() => { reload(); }, []);

  function set(k, v) { setForm(f => ({ ...f, [k]: v })); setSaved(''); }

  async function saveStatus(k) {
    setBusy(true); setSaved('');
    const patch = {};
    for (const suf of ['enabled', 'subject', 'heading', 'body']) {
      const key = ostatKey(k, suf);
      patch[key] = form[key] ?? '';
    }
    const r = await API.saveOrderEmails(patch);
    setBusy(false);
    if (r.ok) { setSaved(k); reload(); }
    else alert('Nepodarilo sa uložiť: ' + (r.body.message || r.body.error));
  }
  async function saveLockdown(v) {
    setBusy(true);
    const r = await API.saveOrderEmails({ dd_ostat_security_lockdown: v ? 1 : 0 });
    setBusy(false);
    if (r.ok) { set('dd_ostat_security_lockdown', v ? '1' : '0'); }
  }

  const bool = (v) => v === 1 || v === '1' || v === true;

  return (
    <AppShell active="order-emails" crumbs={['ERP', 'Maily objednávok']}>
      <div className="page-head">
        <div>
          <h1>E-maily stavov objednávok</h1>
          <p>Zákaznícke maily pri zmene stavu · dizajn ddenergy (Kadence) sa aplikuje automaticky</p>
        </div>
        <div className="page-head-actions"><button className="btn" onClick={reload}><Ico.refresh/>Obnoviť</button></div>
      </div>

      {error === 'not_configured' && <NotConnected/>}
      {error && error !== 'not_configured' && <div className="card" style={{padding:20, color:'var(--red-500)'}}>{error}</div>}
      {loading && <div className="card muted" style={{padding:20}}>Načítavam…</div>}

      {settings && (
        <>
          <div className="card" style={{padding:'10px 14px', marginBottom:12, fontSize:12.5}}>
            Zástupné znaky: <span className="mono">{'{order_number}'}</span> <span className="mono">{'{customer_first_name}'}</span> <span className="mono">{'{order_total}'}</span> <span className="mono">{'{tracking_number}'}</span> <span className="mono">{'{tracking_carrier}'}</span> <span className="mono">{'{site_title}'}</span>. Súhrn objednávky + tlačidlo sa pridávajú automaticky.
          </div>

          {OSTAT_LIST.map(st => {
            const kEnabled = ostatKey(st.key, 'enabled');
            const kSubject = ostatKey(st.key, 'subject');
            const kHeading = ostatKey(st.key, 'heading');
            const kBody    = ostatKey(st.key, 'body');
            return (
              <div className="card" key={st.key} style={{marginBottom:12}}>
                <div className="card-head">
                  <h3>{st.label}</h3>
                  <label className="hstack" style={{gap:6, fontSize:13}}>
                    <input type="checkbox" checked={bool(form[kEnabled])} disabled={!canEdit}
                           onChange={e => set(kEnabled, e.target.checked ? 1 : 0)}/>
                    Posielať e-mail
                  </label>
                </div>
                <div className="card-body">
                  <div className="field">
                    <label>Predmet</label>
                    <input className="input" value={form[kSubject] || ''} disabled={!canEdit}
                           onChange={e => set(kSubject, e.target.value)} placeholder={settings[kSubject]?.label || ''}/>
                  </div>
                  <div className="field">
                    <label>Nadpis (v tele mailu)</label>
                    <input className="input" value={form[kHeading] || ''} disabled={!canEdit}
                           onChange={e => set(kHeading, e.target.value)}/>
                  </div>
                  <div className="field">
                    <label>Telo</label>
                    <textarea className="input" rows={5} value={form[kBody] || ''} disabled={!canEdit}
                              onChange={e => set(kBody, e.target.value)} style={{fontFamily:'inherit', resize:'vertical'}}/>
                  </div>
                  {canEdit && (
                    <div className="hstack">
                      <button className="btn btn-primary btn-sm" onClick={() => saveStatus(st.key)} disabled={busy}>
                        {busy ? 'Ukladám…' : 'Uložiť'}
                      </button>
                      {saved === st.key && <span className="chip green dot">Uložené</span>}
                      <span className="small muted" style={{marginLeft:'auto'}}>
                        Prázdne pole = použije sa preddefinovaná šablóna.
                      </span>
                    </div>
                  )}
                </div>
              </div>
            );
          })}

          <div className="card" style={{borderLeft:'4px solid var(--amber-500)'}}>
            <div className="card-head"><h3>Bezpečnosť</h3></div>
            <div className="card-body">
              <label className="hstack" style={{gap:8}}>
                <input type="checkbox" checked={bool(form['dd_ostat_security_lockdown'])} disabled={!canEdit}
                       onChange={e => saveLockdown(e.target.checked)}/>
                Zamknúť neautentifikované (nopriv) AJAX akcie na webe (odporúčané)
              </label>
              <div className="small muted" style={{marginTop:6}}>
                Blokuje volania <span className="mono">create_wc_order</span>, <span className="mono">search_users</span>, <span className="mono">get_user_details</span>, <span className="mono">get_products_for_user</span> bez prihlásenia.
              </div>
            </div>
          </div>
        </>
      )}
    </AppShell>
  );
}

// ── Cena dopravy za kus per produkt (_shipping_price_per_unit) ──────────
function ShippingPrices() {
  const [rows, setRows] = React.useState(null);
  const [edited, setEdited] = React.useState({});   // product_id → string price
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const [search, setSearch] = React.useState('');
  const [onlySet, setOnlySet] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [toast, setToast] = React.useState('');
  const canEdit = window.hasPerm ? window.hasPerm('products.edit') : false;

  async function reload() {
    setLoading(true);
    const r = await API.listShippingPrices(onlySet);
    setLoading(false);
    if (r.status === 503) { setError('not_configured'); return; }
    if (!r.ok) { setError(r.body.message || r.body.error || 'Chyba pri načítaní.'); return; }
    setError(''); setRows(r.body.products || []); setEdited({});
  }
  React.useEffect(() => { reload(); /* eslint-disable-next-line */ }, [onlySet]);

  function setPrice(id, v) { setEdited(e => ({ ...e, [id]: v })); setToast(''); }

  const changed = React.useMemo(() => {
    if (!rows) return [];
    return rows
      .filter(p => edited[p.product_id] !== undefined)
      .map(p => {
        const raw = String(edited[p.product_id]).replace(',', '.').trim();
        const cur = p.shipping_unit == null ? '' : String(p.shipping_unit);
        return { product_id: p.product_id, price: raw, orig: cur };
      })
      .filter(c => c.price !== c.orig);
  }, [rows, edited]);

  async function save() {
    if (changed.length === 0) return;
    setBusy(true); setToast('');
    const r = await API.saveShippingPrices(changed.map(c => ({ product_id: c.product_id, price: c.price === '' ? null : c.price })));
    setBusy(false);
    if (r.ok) { setToast(`Uložených ${r.body.count ?? changed.length} cien.`); reload(); }
    else alert('Nepodarilo sa uložiť: ' + (r.body.message || r.body.error));
  }

  const filtered = React.useMemo(() => {
    if (!rows) return [];
    const s = search.toLowerCase();
    return rows.filter(p => !s || (p.name || '').toLowerCase().includes(s) || (p.sku || '').toLowerCase().includes(s));
  }, [rows, search]);

  return (
    <AppShell active="shipping-prices" crumbs={['ERP', 'Cena dopravy']}>
      <div className="page-head">
        <div>
          <h1>Cena dopravy za kus</h1>
          <p>Meta <span className="mono">_shipping_price_per_unit</span> na produkte (plugin Doprava k produktom)</p>
        </div>
        <div className="page-head-actions">
          <button className="btn" onClick={reload}><Ico.refresh/>Obnoviť</button>
          {canEdit && <button className="btn btn-primary" onClick={save} disabled={busy || changed.length === 0}>{busy ? 'Ukladám…' : `Uložiť zmeny (${changed.length})`}</button>}
        </div>
      </div>

      {error === 'not_configured' && <NotConnected/>}
      {error && error !== 'not_configured' && <div className="card" style={{padding:20, color:'var(--red-500)'}}>{error}</div>}

      {rows && (
        <>
          <div className="filters">
            <div style={{position:'relative', flex:1, maxWidth:320}}>
              <input className="input" placeholder="Hľadať názov / SKU…" value={search} onChange={e => setSearch(e.target.value)} style={{width:'100%'}}/>
            </div>
            <label className="hstack" style={{gap:6, fontSize:13}}>
              <input type="checkbox" checked={onlySet} onChange={e => setOnlySet(e.target.checked)}/> Len s nastavenou cenou
            </label>
            {toast && <span className="chip green dot" style={{marginLeft:'auto'}}>{toast}</span>}
          </div>

          <div className="card" style={{overflow:'hidden'}}>
            {loading ? <div className="muted" style={{padding:20}}>Načítavam…</div> : (
              <div style={{overflow:'auto', maxHeight:'70vh'}}>
                <table className="tbl">
                  <thead><tr><th>Produkt</th><th>SKU</th><th style={{textAlign:'right', width:160}}>Doprava / ks (€)</th></tr></thead>
                  <tbody>
                    {filtered.length === 0 && <tr><td colSpan={3} style={{textAlign:'center', padding:24, color:'var(--ink-500)'}}>Žiadne produkty.</td></tr>}
                    {filtered.map(p => {
                      const val = edited[p.product_id] !== undefined ? edited[p.product_id] : (p.shipping_unit == null ? '' : String(p.shipping_unit));
                      const dirty = changed.some(c => c.product_id === p.product_id);
                      return (
                        <tr key={p.product_id} style={dirty ? { background:'var(--blue-50)' } : {}}>
                          <td>{p.name}</td>
                          <td className="mono small">{p.sku || '—'}</td>
                          <td style={{textAlign:'right'}}>
                            <input className="input" style={{width:120, textAlign:'right', height:28}} inputMode="decimal"
                                   value={val} disabled={!canEdit}
                                   placeholder="—"
                                   onChange={e => setPrice(p.product_id, e.target.value)}/>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </div>
          <div className="small muted" style={{marginTop:8}}>
            Prázdne pole = odstrániť cenu dopravy pre produkt. Zmeny sa uložia hromadne tlačidlom hore.
          </div>
        </>
      )}
    </AppShell>
  );
}

Object.assign(window, { Withdrawals, OrderEmailSettings, ShippingPrices });