// Settings.jsx — Admin settings page
function SettingsPage() {
  const [tab, setTab] = React.useState('company');
  const [savedTab, setSavedTab] = React.useState(null);
  const tabs = [
    { id: 'company', label: 'Company', icon: 'Briefcase' },
    { id: 'pricing', label: 'Pricing & Surcharges', icon: 'DollarSign' },
    { id: 'integrations', label: 'Integrations', icon: 'Settings' },
    { id: 'security', label: 'Security', icon: 'Shield' },
  ];
  const flagSaved = (k) => { setSavedTab(k); setTimeout(() => setSavedTab(null), 1800); };

  return (
    <div className="content">
      <div style={{display: 'grid', gridTemplateColumns: '220px 1fr', gap: 24}}>
        <div>
          <div style={{display: 'flex', flexDirection: 'column', gap: 4}}>
            {tabs.map(t => {
              const Ico = window[t.icon];
              return (
                <button key={t.id} className={"nav-item " + (tab === t.id ? 'nav-item--active' : '')} onClick={() => setTab(t.id)} style={{justifyContent: 'flex-start'}}>
                  <Ico size={16}/> <span>{t.label}</span>
                </button>
              );
            })}
          </div>
        </div>

        <div>
          {tab === 'company' ? (
            <div className="card">
              <div className="card__head"><div className="card__title">Company Profile</div></div>
              <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14}}>
                <div className="field"><label>Company name</label><input defaultValue="Pow Lee Crane & Engineering Sdn. Bhd."/></div>
                <div className="field"><label>SSM No.</label><input defaultValue="200401012345 (654321-A)"/></div>
                <div className="field"><label>SST No.</label><input defaultValue="W10-1808-32000123"/></div>
                <div className="field"><label>Office phone</label><input defaultValue="+60 7-555 1234"/></div>
                <div className="field" style={{gridColumn: '1 / -1'}}><label>Address</label><input defaultValue="No. 12, Jalan Industri 5, Tampoi, 81200 Johor Bahru, Johor"/></div>
                <div className="field"><label>Operating hours</label><input defaultValue="Mon–Sat, 07:00 – 19:00"/></div>
                <div className="field"><label>24/7 dispatch line</label><input defaultValue="+60 12-555 0000"/></div>
              </div>
              <div style={{marginTop: 20, display: 'flex', gap: 8, justifyContent: 'flex-end'}}>
                <button className="btn btn--ghost">Discard</button>
                {savedTab === 'company' ? <span className="status status--green">Saved</span> : null}
                <button className="btn btn--primary" onClick={() => window.askAdminPassword('Save company profile', () => flagSaved('company'))}><Check size={14}/> Save Changes</button>
              </div>
            </div>
          ) : null}

          {tab === 'pricing' ? (
            <div className="card">
              <div className="card__head"><div className="card__title">Pricing & Diesel Surcharge</div></div>
              <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14}}>
                <div className="field"><label>Half-day rate (25t)</label><input defaultValue="RM 1,800"/></div>
                <div className="field"><label>Full-day rate (25t)</label><input defaultValue="RM 2,400"/></div>
                <div className="field"><label>Half-day rate (50t)</label><input defaultValue="RM 3,200"/></div>
                <div className="field"><label>Full-day rate (50t)</label><input defaultValue="RM 4,800"/></div>
                <div className="field"><label>Half-day rate (100t)</label><input defaultValue="RM 5,400"/></div>
                <div className="field"><label>Full-day rate (100t)</label><input defaultValue="RM 8,500"/></div>
                <div className="field"><label>Diesel surcharge (RM/L)</label><input defaultValue="RM 0.18"/></div>
                <div className="field"><label>Mileage rate (RM/km)</label><input defaultValue="RM 4.50"/></div>
                <div className="field"><label>Overtime hourly rate</label><input defaultValue="RM 280/hr"/></div>
                <div className="field"><label>Cancellation fee</label><input defaultValue="50% of day rate"/></div>
              </div>
              <div style={{marginTop: 20, padding: 12, background: 'rgba(217,179,8,0.1)', border: '1px solid rgba(217,179,8,0.3)', borderRadius: 8, fontSize: 13, color: 'var(--color-grey-700)'}}>
                <AlertTriangle size={14} style={{verticalAlign: 'middle', color: 'var(--color-yellow-dark)'}}/> Changes apply only to new work orders. Existing quotes keep their current pricing.
              </div>
              <div style={{marginTop: 20, display: 'flex', gap: 8, justifyContent: 'flex-end'}}>
                <button className="btn btn--ghost">Discard</button>
                {savedTab === 'pricing' ? <span className="status status--green">Saved</span> : null}
                <button className="btn btn--primary" onClick={() => window.askAdminPassword('Save pricing & surcharges', () => flagSaved('pricing'))}><Check size={14}/> Save Pricing</button>
              </div>
            </div>
          ) : null}

          {tab === 'integrations' ? (
            <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
              {[
                { name: 'AutoCount Accounting', status: 'Connected', desc: 'Field mapping configured · last sync 14 min ago', color: 'green' },
                { name: 'WhatsApp Business API', status: 'Connected', desc: 'Sender +60 12-555 0000 · 2,140 msgs this month', color: 'green' },
                { name: 'Web Push Notifications', status: 'Connected', desc: 'VAPID keys configured · 18 active subscriptions', color: 'green' },
                { name: 'Cloudflare Turnstile', status: 'Connected', desc: 'Bot protection on login · 0 challenges failed today', color: 'green' },
                { name: 'Google Workspace SSO', status: 'Not Connected', desc: 'Optional — sign in with @powleecrane.com Google accounts', color: 'gray' },
                { name: 'SMS Gateway (Maxis)', status: 'Not Connected', desc: 'Optional — fallback if WhatsApp fails', color: 'gray' },
              ].map(i => (
                <div key={i.name} className="card" style={{padding: 16, marginBottom: 0}}>
                  <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
                    <div>
                      <div style={{fontWeight: 700, color: 'var(--color-navy)', marginBottom: 4}}>{i.name}</div>
                      <div style={{fontSize: 13, color: 'var(--color-grey-500)'}}>{i.desc}</div>
                    </div>
                    <div style={{display: 'flex', alignItems: 'center', gap: 12}}>
                      <span className={"badge badge--" + i.color}>{i.status}</span>
                      <button className="btn btn--ghost btn--sm">Configure</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : null}

          {tab === 'security' ? (
            <div className="card">
              <div className="card__head"><div className="card__title">Security & Sessions</div></div>
              <div style={{display: 'flex', flexDirection: 'column', gap: 18}}>
                <label style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12}}>
                  <div>
                    <div style={{fontWeight: 600, color: 'var(--color-navy)'}}>Require Cloudflare Turnstile on login</div>
                    <div style={{fontSize: 13, color: 'var(--color-grey-500)'}}>Bot protection — recommended.</div>
                  </div>
                  <input type="checkbox" defaultChecked style={{transform: 'scale(1.4)'}}/>
                </label>
                <label style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12}}>
                  <div>
                    <div style={{fontWeight: 600, color: 'var(--color-navy)'}}>Require 2FA for Admin / Finance</div>
                    <div style={{fontSize: 13, color: 'var(--color-grey-500)'}}>Six-digit code via authenticator app on every sign-in.</div>
                  </div>
                  <input type="checkbox" defaultChecked style={{transform: 'scale(1.4)'}}/>
                </label>
                <label style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12}}>
                  <div>
                    <div style={{fontWeight: 600, color: 'var(--color-navy)'}}>Auto-logout after inactivity</div>
                    <div style={{fontSize: 13, color: 'var(--color-grey-500)'}}>Operators in the field stay signed in indefinitely; office sessions time out.</div>
                  </div>
                  <select style={{width: 140}}><option>30 minutes</option><option>1 hour</option><option>4 hours</option><option>Never</option></select>
                </label>
                <label style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12}}>
                  <div>
                    <div style={{fontWeight: 600, color: 'var(--color-navy)'}}>Audit log</div>
                    <div style={{fontSize: 13, color: 'var(--color-grey-500)'}}>Every create / edit / delete action is logged with user + timestamp.</div>
                  </div>
                  <input type="checkbox" defaultChecked style={{transform: 'scale(1.4)'}}/>
                </label>
              </div>
              <div style={{marginTop: 24, display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center'}}>
                {savedTab === 'security' ? <span className="status status--green">Saved</span> : null}
                <button className="btn btn--primary" onClick={() => window.askAdminPassword('Save security settings', () => flagSaved('security'))}><Check size={14}/> Save Settings</button>
              </div>
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SettingsPage });