// admin/pages/settings.jsx — business identity, GST, invoice, shipping

function SettingsPage() {
  const admin = useAdmin();
  const [s, setS] = React.useState(() => admin.getSettings());
  const setB = (patch) => setS(p => ({ ...p, business: { ...p.business, ...patch } }));
  const setG = (patch) => setS(p => ({ ...p, gst: { ...p.gst, ...patch } }));
  const setI = (patch) => setS(p => ({ ...p, invoice: { ...p.invoice, ...patch } }));
  const setSh = (patch) => setS(p => ({ ...p, shipping: { ...p.shipping, ...patch } }));
  const save = () => { admin.saveSettings(s); HAPStore && HAPStore.notify && HAPStore.notify('Settings saved'); };

  return (
    <div style={{ maxWidth: 880, display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div className="card">
        <div className="panel-head"><h2>Business identity</h2></div>
        <div className="card-pad form-grid">
          <div className="field span2"><label>Business name</label><input className="inp" value={s.business.name} onChange={e => setB({ name: e.target.value })} /></div>
          <div className="field span2"><label>Address</label><textarea className="ta" value={s.business.address} onChange={e => setB({ address: e.target.value })} /></div>
          <div className="field"><label>Phone</label><input className="inp" value={s.business.phone} onChange={e => setB({ phone: e.target.value })} /></div>
          <div className="field"><label>Alt phone</label><input className="inp" value={s.business.altPhone} onChange={e => setB({ altPhone: e.target.value })} /></div>
          <div className="field"><label>Email</label><input className="inp" value={s.business.email} onChange={e => setB({ email: e.target.value })} /></div>
          <div className="field"><label>Bank details (on invoice)</label><input className="inp" value={s.business.bank} onChange={e => setB({ bank: e.target.value })} /></div>
        </div>
      </div>

      <div className="card">
        <div className="panel-head"><h2>GST</h2>
          <label className="row" style={{ gap: 8, fontSize: '.84rem' }}>{s.gst.enabled ? 'Enabled' : 'Disabled'}<input type="checkbox" checked={s.gst.enabled} onChange={e => setG({ enabled: e.target.checked })} /></label>
        </div>
        <div className="card-pad form-grid">
          <div className="field"><label>GSTIN</label><input className="inp" value={s.business.gstin} onChange={e => setB({ gstin: e.target.value })} /></div>
          <div className="field"><label>Home state (for CGST/SGST vs IGST)</label><input className="inp" value={s.gst.homeState} onChange={e => setG({ homeState: e.target.value })} /></div>
          <div className="field"><label>GST mode</label>
            <select className="sel" value={s.gst.mode} onChange={e => setG({ mode: e.target.value })}>
              <option value="flat">Flat rate (all products)</option>
              <option value="per-product">Per product (use HSN/rate)</option>
            </select>
          </div>
          <div className="field"><label>Default rate (%)</label>
            <select className="sel" value={s.gst.rate} onChange={e => setG({ rate: +e.target.value })}>{[0, 5, 12, 18, 28].map(r => <option key={r} value={r}>{r}%</option>)}</select>
          </div>
          <div className="field span2">
            <label className="row" style={{ gap: 8 }}><input type="checkbox" checked={s.gst.inclusive} onChange={e => setG({ inclusive: e.target.checked })} /> Prices are GST-inclusive</label>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="panel-head"><h2>Invoice</h2></div>
        <div className="card-pad form-grid">
          <div className="field"><label>Invoice prefix</label><input className="inp" value={s.invoice.prefix} onChange={e => setI({ prefix: e.target.value })} /></div>
          <div className="field"><label>Next invoice number</label><input className="inp" type="number" value={s.invoice.nextNumber} onChange={e => setI({ nextNumber: +e.target.value })} /></div>
          <div className="field span2"><label>Terms & conditions</label><textarea className="ta" value={s.invoice.terms} onChange={e => setI({ terms: e.target.value })} /></div>
          <div className="field span2"><label>Footer note</label><input className="inp" value={s.invoice.footer} onChange={e => setI({ footer: e.target.value })} /></div>
        </div>
      </div>

      <div className="card">
        <div className="panel-head"><h2>Shipping</h2></div>
        <div className="card-pad form-grid">
          <div className="field"><label>Free shipping above (₹)</label><input className="inp" type="number" value={s.shipping.freeAbove} onChange={e => setSh({ freeAbove: +e.target.value })} /></div>
          <div className="field"><label>Standard charge (₹)</label><input className="inp" type="number" value={s.shipping.flat} onChange={e => setSh({ flat: +e.target.value })} /></div>
          <div className="field"><label>Express charge (₹)</label><input className="inp" type="number" value={s.shipping.express} onChange={e => setSh({ express: +e.target.value })} /></div>
        </div>
      </div>

      <div className="card">
        <div className="panel-head"><h2>Staff role preview (demo)</h2></div>
        <div className="card-pad">
          <p className="muted" style={{ fontSize: '.84rem', marginBottom: 12 }}>
            Filters owner navigation by <code>ROLE_PERMISSIONS</code>. Session identity stays <b>admin_legacy</b> — real multi-user invites remain blocked.
          </p>
          <label>Preview as</label>
          <select className="sel" defaultValue={(typeof sessionStorage !== 'undefined' && sessionStorage.getItem('apg.owner.rolePreview')) || 'admin_legacy'}
            onChange={(e) => { sessionStorage.setItem('apg.owner.rolePreview', e.target.value); location.reload(); }}>
            <option value="admin_legacy">admin_legacy (default full)</option>
            <option value="owner">owner</option>
            <option value="admin">admin</option>
            <option value="manager">manager</option>
            <option value="inventory_staff">inventory_staff</option>
            <option value="fulfilment_staff">fulfilment_staff</option>
            <option value="support_staff">support_staff</option>
            <option value="sales_staff">sales_staff</option>
            <option value="fulfilment">fulfilment (legacy alias)</option>
            <option value="finance">finance</option>
            <option value="readonly">readonly</option>
          </select>
        </div>
      </div>

      <div className="card">
        <div className="panel-head"><h2>Purchase approval rules</h2></div>
        <div className="card-pad form-grid">
          <div className="field">
            <label>Owner approval threshold (₹)</label>
            <input
              className="inp"
              type="number"
              defaultValue={(window.OwnerErpOps && OwnerErpOps.approvalRules().ownerApprovalThreshold) || 25000}
              onBlur={(e) => {
                if (!window.OwnerErpOps) return;
                const cur = OwnerErpOps.approvalRules();
                OwnerErpOps.saveApprovalRules({
                  ...cur,
                  ownerApprovalThreshold: Number(e.target.value) || 25000,
                });
              }}
            />
          </div>
          <p className="muted span2" style={{ fontSize: '.8rem' }}>
            Stored in <code>apg.purchase.approval.rules.v1</code> — not hardcoded in purchase UI logic.
          </p>
        </div>
      </div>

      <div className="card card-pad">
        <div className="section-title">Data</div>
        <p className="muted" style={{ fontSize: '.84rem', marginBottom: 12 }}>Back up or restore the full store (products, orders, customers, finance, settings).</p>
        <div className="row">
          <button className="btn btn-soft" onClick={exportData}><AIcon name="download" size={15} />Export backup (JSON)</button>
          <label className="btn btn-soft" style={{ cursor: 'pointer' }}><AIcon name="layers" size={15} />Import backup<input type="file" accept="application/json" hidden onChange={importData} /></label>
          <button className="btn btn-danger" onClick={resetData}>Reset demo data</button>
        </div>
      </div>

      <div className="row" style={{ justifyContent: 'flex-end', position: 'sticky', bottom: 0, padding: '12px 0' }}>
        <button className="btn btn-primary" onClick={save}><AIcon name="check" size={15} />Save settings</button>
      </div>
    </div>
  );
}

function exportData() {
  const keys = Object.values(APG.KEYS);
  const dump = {};
  keys.forEach(k => { const v = localStorage.getItem(k); if (v) dump[k] = JSON.parse(v); });
  const blob = new Blob([JSON.stringify(dump, null, 2)], { type: 'application/json' });
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob); a.download = 'ambady-backup-' + Date.now() + '.json'; a.click();
}
function importData(e) {
  const f = e.target.files[0]; if (!f) return;
  const r = new FileReader();
  r.onload = () => {
    try { const data = JSON.parse(r.result); Object.entries(data).forEach(([k, v]) => localStorage.setItem(k, JSON.stringify(v))); alert('Backup restored. Reloading…'); location.reload(); }
    catch { alert('Invalid backup file.'); }
  };
  r.readAsText(f);
}
function resetData() {
  if (!confirm('Reset all admin data (products, orders, customers, finance) to demo defaults? This cannot be undone.')) return;
  Object.values(APG.KEYS).forEach(k => localStorage.removeItem(k));
  location.reload();
}
window.SettingsPage = SettingsPage;