/* ========== Settings ========== */
function SettingsView() {
  const state = useStore();
  const [tab, setTab] = useState('business');

  return (
    <div>
      <div className="detail-tabs">
        <button className={tab==='business' ? 'active' : ''} onClick={() => setTab('business')}><Icon name="building" size={14}/> Business info</button>
        <button className={tab==='pricing' ? 'active' : ''} onClick={() => setTab('pricing')}><Icon name="finance" size={14}/> Visa pricing</button>
        <button className={tab==='checklist' ? 'active' : ''} onClick={() => setTab('checklist')}><Icon name="check" size={14}/> Default checklist</button>
        <button className={tab==='data' ? 'active' : ''} onClick={() => setTab('data')}><Icon name="download" size={14}/> Backup &amp; data</button>
      </div>

      {tab === 'business' && <BusinessSettings business={state.business}/>}
      {tab === 'pricing' && <PricingSettings pricing={state.pricing}/>}
      {tab === 'checklist' && <ChecklistSettings docs={state.docTemplate}/>}
      {tab === 'data' && <DataSettings/>}
    </div>
  );
}

function BusinessSettings({ business }) {
  const [form, setForm] = useState({ ...business });
  const [saved, setSaved] = useState(false);

  const save = () => {
    window.PVStore.updateBusiness(form);
    setSaved(true);
    setTimeout(() => setSaved(false), 1500);
  };

  return (
    <div className="card">
      <div className="card-header"><h3>Business information</h3><div className="subtle">Shown on every invoice</div></div>
      <div className="card-body">
        <div className="row-gap">
          <div className="field">
            <label>Business name</label>
            <input value={form.name} onChange={e=>setForm({...form, name: e.target.value})}/>
          </div>
          <div className="form-row two">
            <div className="field">
              <label>Address</label>
              <input value={form.address} onChange={e=>setForm({...form, address: e.target.value})}/>
            </div>
            <div className="field">
              <label>City / country</label>
              <input value={form.city} onChange={e=>setForm({...form, city: e.target.value})}/>
            </div>
          </div>
          <div className="field">
            <label>Phone</label>
            <input value={form.phone} onChange={e=>setForm({...form, phone: e.target.value})}/>
          </div>
          <div className="divider"/>
          <h4 style={{ margin: '0 0 4px', fontSize: 13, fontWeight: 600, color: 'var(--ink-700)' }}>Bank details</h4>
          <div className="form-row two">
            <div className="field">
              <label>Account name</label>
              <input value={form.accountName} onChange={e=>setForm({...form, accountName: e.target.value})}/>
            </div>
            <div className="field">
              <label>Bank name</label>
              <input value={form.bankName} onChange={e=>setForm({...form, bankName: e.target.value})}/>
            </div>
          </div>
          <div className="form-row two">
            <div className="field">
              <label>LAK account no.</label>
              <input value={form.accountLak} onChange={e=>setForm({...form, accountLak: e.target.value})}/>
            </div>
            <div className="field">
              <label>USD account no.</label>
              <input value={form.accountUsd} onChange={e=>setForm({...form, accountUsd: e.target.value})}/>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 10 }}>
            <button className="btn primary" onClick={save}>Save changes</button>
            {saved && <span style={{ color: 'var(--green-600)', fontSize: 13, fontWeight: 500 }}><Icon name="check" size={13}/> Saved</span>}
          </div>
        </div>
      </div>
    </div>
  );
}

function PricingSettings({ pricing }) {
  const [items, setItems] = useState(pricing);
  const [saved, setSaved] = useState(false);

  const update = (code, patch) => {
    setItems(items.map(it => it.code === code ? { ...it, ...patch } : it));
  };
  const save = () => {
    items.forEach(it => window.PVStore.updatePricing(it.code, { price: it.price }));
    setSaved(true);
    setTimeout(() => setSaved(false), 1500);
  };

  return (
    <div className="card">
      <div className="card-header"><h3>Visa pricing</h3><div className="subtle">Default amounts when creating a new visa order</div></div>
      <div style={{ padding: 0 }}>
        <table className="tbl">
          <thead>
            <tr>
              <th></th>
              <th>Country</th>
              <th className="num">Price (USD)</th>
            </tr>
          </thead>
          <tbody>
            {items.map(it => (
              <tr key={it.code}>
                <td style={{ fontSize: 20, width: 40 }}>{it.flag}</td>
                <td><b>{it.name}</b></td>
                <td className="num" style={{ width: 160 }}>
                  <input
                    type="number"
                    value={it.price}
                    onChange={e=>update(it.code, { price: parseFloat(e.target.value)||0 })}
                    style={{ width: 110, padding: '6px 10px', textAlign: 'right', border: '1px solid var(--ink-200)', borderRadius: 6, outline: 'none' }}
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ padding: '14px 18px', borderTop: '1px solid var(--ink-100)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <button className="btn primary" onClick={save}>Save changes</button>
        {saved && <span style={{ color: 'var(--green-600)', fontSize: 13, fontWeight: 500 }}><Icon name="check" size={13}/> Saved</span>}
      </div>
    </div>
  );
}

function ChecklistSettings({ docs }) {
  const [items, setItems] = useState(docs);
  const [newItem, setNewItem] = useState('');
  const [saved, setSaved] = useState(false);

  const remove = (i) => setItems(items.filter((_,j) => j !== i));
  const add = () => {
    if (!newItem.trim()) return;
    setItems([...items, newItem.trim()]);
    setNewItem('');
  };
  const move = (i, dir) => {
    const next = items.slice();
    const j = i + dir;
    if (j < 0 || j >= next.length) return;
    [next[i], next[j]] = [next[j], next[i]];
    setItems(next);
  };
  const save = () => {
    window.PVStore.updateDocTemplate(items);
    setSaved(true);
    setTimeout(() => setSaved(false), 1500);
  };

  return (
    <div className="card">
      <div className="card-header">
        <h3>Default document checklist</h3>
        <div className="subtle">Auto-applied to new visa orders</div>
      </div>
      <div className="card-body">
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 10px', border: '1px solid var(--ink-200)',
            borderRadius: 7, marginBottom: 6, background: '#fff'
          }}>
            <span style={{ color: 'var(--ink-400)', fontFamily: 'var(--font-mono)', fontSize: 11, width: 24 }}>{i+1}.</span>
            <span style={{ flex: 1, fontSize: 13 }}>{it}</span>
            <button className="btn ghost icon sm" onClick={() => move(i, -1)} disabled={i===0}><Icon name="chevronUp" size={12}/></button>
            <button className="btn ghost icon sm" onClick={() => move(i, 1)} disabled={i===items.length-1}><Icon name="chevronDown" size={12}/></button>
            <button className="btn ghost icon sm" onClick={() => remove(i)}><Icon name="trash" size={12}/></button>
          </div>
        ))}
        <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
          <input
            value={newItem}
            onChange={e=>setNewItem(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') add(); }}
            placeholder="Add a checklist item…"
            style={{ flex: 1, padding: '9px 12px', borderRadius: 7, border: '1px solid var(--ink-200)', outline: 'none' }}
          />
          <button className="btn" onClick={add}><Icon name="plus" size={12}/> Add</button>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 16 }}>
          <button className="btn primary" onClick={save}>Save changes</button>
          {saved && <span style={{ color: 'var(--green-600)', fontSize: 13, fontWeight: 500 }}><Icon name="check" size={13}/> Saved</span>}
        </div>
      </div>
    </div>
  );
}

function DataSettings() {
  const [importText, setImportText] = useState('');
  const [showToast, toastEl] = useToast();

  const handleExport = () => {
    const json = window.PVStore.exportJson();
    const blob = new Blob([json], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `prime-visa-ops-backup-${new Date().toISOString().slice(0,10)}.json`;
    a.click();
    URL.revokeObjectURL(url);
    showToast('Backup downloaded');
  };

  const handleImport = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const text = await file.text();
    if (window.PVStore.importJson(text)) {
      showToast('Data imported successfully');
    } else {
      alert('Invalid backup file');
    }
    e.target.value = '';
  };

  const handleReset = () => {
    if (confirm('This will reset ALL data back to sample data. Are you sure?')) {
      if (confirm('Really sure? This cannot be undone.')) {
        window.PVStore.resetAll();
        showToast('Data reset to defaults');
      }
    }
  };

  // Storage size estimate
  const sizeKb = useMemo(() => {
    try {
      return Math.round(new Blob([JSON.stringify(window.PVStore.state)]).size / 1024);
    } catch { return 0; }
  }, []);

  return (
    <div className="row-gap">
      <div className="card">
        <div className="card-header"><h3>Backup &amp; restore</h3></div>
        <div className="card-body">
          <p style={{ fontSize: 13, color: 'var(--ink-700)', margin: '0 0 14px' }}>
            All your data is stored in your browser. Export regularly to keep a safe copy.
            Current size: <b>{sizeKb} KB</b>.
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button className="btn primary" onClick={handleExport}>
              <Icon name="download" size={14}/> Export backup (JSON)
            </button>
            <label className="btn" style={{ cursor: 'pointer' }}>
              <Icon name="upload" size={14}/> Import backup
              <input type="file" accept="application/json" onChange={handleImport} style={{ display: 'none' }}/>
            </label>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header"><h3>Danger zone</h3></div>
        <div className="card-body">
          <p style={{ fontSize: 13, color: 'var(--ink-700)', margin: '0 0 14px' }}>
            Reset everything back to sample data. Export a backup first if you want to keep anything.
          </p>
          <button className="btn danger" onClick={handleReset}>
            <Icon name="refresh" size={14}/> Reset all data
          </button>
        </div>
      </div>

      <div className="card">
        <div className="card-header"><h3>How storage works</h3></div>
        <div className="card-body" style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--ink-700)' }}>
          <p style={{ margin: '0 0 8px' }}>
            <b>Local-only:</b> nothing is sent over the internet. Customer info, files, and finances live in this browser's storage on this computer.
          </p>
          <p style={{ margin: '0 0 8px' }}>
            <b>Files:</b> uploads are stored as base64 inside the browser. Best for documents under a few MB. For large scans, keep originals in a folder and link from the order notes.
          </p>
          <p style={{ margin: 0 }}>
            <b>Backup discipline:</b> export the JSON file weekly and keep copies on a USB or Drive. Clearing the browser cache will wipe data — backups are your safety net.
          </p>
        </div>
      </div>
      {toastEl}
    </div>
  );
}

window.SettingsView = SettingsView;