/* ============ Settings ============ */

function Settings() {
  const { settings, clients, signings, mileage } = useStore();
  const toast = useToast();
  const set = (patch) => Store.Settings.update(patch);

  const resetAll = () => {
    if (confirm('Reset ALL data and settings to defaults? This cannot be undone.')) {
      Store.resetAll();
      toast('Data reset');
    }
  };

  const clearStorage = () => {
    if (confirm('Permanently delete all data from this device?')) {
      localStorage.removeItem('notaryStudio.v1');
      localStorage.removeItem('notaryData');
      location.reload();
    }
  };

  return (
    <div style={{ maxWidth: 720 }}>
      <Card title="Practice details" sub="Used across reports and exports.">
        <div className="row" style={{ gap: 16, marginBottom: 16 }}>
          <img src="assets/middlesex-logo.png" alt="Middlesex Notary Co"
               style={{ width: 84, height: 84, borderRadius: 14, background: 'white', border: '1px solid var(--line)', objectFit: 'cover', flexShrink: 0 }} />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em' }}>{settings.businessName || 'Middlesex Notary Co'}</div>
            <div className="muted" style={{ fontSize: 13 }}>{settings.notaryName || 'Add notary name below'} · {settings.state || '—'}</div>
            <div className="row" style={{ gap: 6, marginTop: 8 }}>
              <Pill tone="green">Autosave on</Pill>
              <Pill tone="blue">Daily backups</Pill>
            </div>
          </div>
        </div>
        <div className="col" style={{ gap: 14 }}>
          <Field label="Business name"><Input value={settings.businessName} onChange={e => set({ businessName: e.target.value })}/></Field>
          <div className="field-row">
            <Field label="Notary name"><Input value={settings.notaryName} onChange={e => set({ notaryName: e.target.value })} placeholder="Jane Notary"/></Field>
            <Field label="State"><Input value={settings.state} onChange={e => set({ state: e.target.value })} placeholder="CA"/></Field>
          </div>
          <Field label="Home office address"><Input value={settings.baseAddress} onChange={e => set({ baseAddress: e.target.value })} placeholder="Used as default 'From' on mileage logs"/></Field>
        </div>
      </Card>

      <div style={{ height: 14 }}></div>

      <Card title="Pricing & mileage" sub="Defaults applied to new entries.">
        <div className="field-row">
          <Field label="Default signing fee (USD)"><Input type="number" value={settings.defaultFee} onChange={e => set({ defaultFee: parseFloat(e.target.value)||0 })}/></Field>
          <Field label="Mileage rate (USD/mi)"><Input type="number" step="0.001" value={settings.mileageRate} onChange={e => set({ mileageRate: parseFloat(e.target.value)||0 })}/></Field>
        </div>
        <div className="muted" style={{ fontSize: 12, marginTop: 8 }}>
          Current IRS standard for business mileage is <b className="mono" style={{ color: 'var(--text)' }}>$0.670/mi</b>. Update annually.
        </div>
      </Card>

      <div style={{ height: 14 }}></div>

      <Card title="Appearance" sub="Accent color used across the app.">
        <div className="row" style={{ gap: 10 }}>
          {[
            { id: 'navy',   color: '#1F3A66' },
            { id: 'blue',   color: '#007AFF' },
            { id: 'indigo', color: '#5856D6' },
            { id: 'purple', color: '#AF52DE' },
            { id: 'pink',   color: '#FF2D55' },
            { id: 'orange', color: '#FF9500' },
            { id: 'green',  color: '#34C759' },
          ].map(a => (
            <button key={a.id}
              onClick={() => { set({ accent: a.id }); document.body.dataset.accent = a.id; }}
              className={'swatch' + (settings.accent === a.id ? ' active' : '')}
              style={{ background: a.color, width: 28, height: 28, borderRadius: '50%', border: '2px solid ' + (settings.accent === a.id ? 'var(--text)' : 'transparent'), cursor: 'pointer' }}
              title={a.id} />
          ))}
        </div>
      </Card>

      <div style={{ height: 14 }}></div>

      <Card title="Storage" sub={`${clients.length} clients · ${signings.length} signings · ${mileage.length} trips — saved automatically on this device`}>
        <div className="row" style={{ flexWrap: 'wrap', gap: 8 }}>
          <Button variant="bordered" icon="trash" onClick={resetAll}>Reset to sample data</Button>
          <Button variant="danger" icon="trash" onClick={clearStorage}>Clear all data on this device</Button>
        </div>
      </Card>

      <div style={{ height: 14 }}></div>

      <div className="muted" style={{ fontSize: 12, textAlign: 'center' }}>
        Notary Studio · Everything autosaves to this browser's local storage. Use <b>Reports → Backup</b> to export an offline copy.
      </div>
    </div>
  );
}

window.Settings = Settings;