// Settings.jsx — Portal preferences.

const Settings = () => {
  const [prefs, setPrefs] = usePersistent('portal_settings_v1', {
    shopName: 'Snap Operation — Main St',
    timezone: 'America/Los_Angeles',
    requireAck: true,
    autoLock: 5,
    weeklyReport: true,
  });
  const [toast, setToast] = useState('');

  const set = (k, v) => setPrefs(p => ({ ...p, [k]: v }));

  return (
    <div className="portal-page-wide" style={{ maxWidth: 920 }}>
      <div className="portal-page-header">
        <div>
          <h1 className="portal-page-title">Settings</h1>
          <div className="portal-page-subtitle">Portal preferences, schedule, and integrations.</div>
        </div>
        <PBtn variant="primary" icon="save" onClick={() => setToast('Settings saved')}>Save changes</PBtn>
      </div>

      <Section title="Shop">
        <Row label="Shop name">
          <input className="portal-input" value={prefs.shopName} onChange={e => set('shopName', e.target.value)} style={{ height: 34, maxWidth: 360 }} />
        </Row>
        <Row label="Timezone">
          <select className="portal-input" value={prefs.timezone} onChange={e => set('timezone', e.target.value)} style={{ height: 34, maxWidth: 280 }}>
            <option value="America/Los_Angeles">Pacific (Los Angeles)</option>
            <option value="America/Denver">Mountain (Denver)</option>
            <option value="America/Chicago">Central (Chicago)</option>
            <option value="America/New_York">Eastern (New York)</option>
          </select>
        </Row>
      </Section>

      <Section title="Daily Schedule">
        <Row label="Auto-lock iPad after" hint="Idle minutes before PIN re-prompt">
          <select className="portal-input" value={prefs.autoLock} onChange={e => set('autoLock', parseInt(e.target.value))} style={{ height: 34, width: 130 }}>
            {[2,5,10,15,30].map(n => <option key={n} value={n}>{n} min</option>)}
          </select>
        </Row>
      </Section>

      <Section title="Notifications">
        <Toggle label="Require broadcast acknowledgment" hint="Urgent broadcasts block the iPad until acknowledged" value={prefs.requireAck} onChange={v => set('requireAck', v)} />
        <Toggle label="Weekly summary email" hint="Sent every Monday at 8 AM with the prep rollup" value={prefs.weeklyReport} onChange={v => set('weeklyReport', v)} />
      </Section>

      <Section title="Danger zone">
        <Row label="Reset portal data" hint="Clears all locally-saved overrides — staff, prep, broadcasts, settings">
          <PBtn variant="danger" size="sm" icon="trash" onClick={() => {
            if (confirm('This wipes all portal data and reloads. Continue?')) {
              localStorage.clear();
              window.location.reload();
            }
          }}>Reset all data</PBtn>
        </Row>
      </Section>

      <PToast message={toast} open={!!toast} onClose={() => setToast('')} />
    </div>
  );
};

const Section = ({ title, children }) => (
  <div className="portal-card" style={{ marginBottom: 18 }}>
    <div className="portal-card-header"><div className="portal-card-title">{title}</div></div>
    <div style={{ padding: '4px 18px 16px' }}>{children}</div>
  </div>
);

const Row = ({ label, hint, children }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 18, padding: '14px 0', borderBottom: '1px solid var(--border-2)', alignItems: 'flex-start' }}>
    <div>
      <div style={{ fontSize: 13, fontWeight: 500 }}>{label}</div>
      {hint && <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 4, lineHeight: 1.45 }}>{hint}</div>}
    </div>
    <div>{children}</div>
  </div>
);

const Toggle = ({ label, hint, value, onChange }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 18, padding: '14px 0', borderBottom: '1px solid var(--border-2)', alignItems: 'center' }}>
    <div>
      <div style={{ fontSize: 13, fontWeight: 500 }}>{label}</div>
      {hint && <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 4, lineHeight: 1.45 }}>{hint}</div>}
    </div>
    <button
      onClick={() => onChange(!value)}
      style={{
        width: 38, height: 22, borderRadius: 999,
        background: value ? 'var(--fg-1)' : 'var(--border-1)',
        position: 'relative', transition: 'background 160ms',
        padding: 0,
      }}
    >
      <div style={{
        position: 'absolute', top: 2, left: value ? 18 : 2,
        width: 18, height: 18, borderRadius: 999, background: '#fff',
        transition: 'left 160ms',
        boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
      }} />
    </button>
  </div>
);

window.Settings = Settings;