const Settings = () => {
  const t = (k) => window.__t ? window.__t(k) : k;
  return (
    <div className="content view">
      <div className="section-head">
        <div>
          <div className="sub">{t('set.sub')}</div>
          <h2><em>{t('set.title')}</em></h2>
        </div>
      </div>
      <div className="grid cols-2">
        <div className="card">
          <div className="card-head">
            <div>
              <div className="sub">{t('set.hours.sub')}</div>
              <h3>{t('set.hours.title').replace(t('set.hours.title.em'), '').trim()} <em>{t('set.hours.title.em')}</em></h3>
            </div>
            <span className="tag accent">{t('set.hours.active')}</span>
          </div>
          <div className="card-body">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { day: t('set.day.sun'), hours: '08:00 – 20:00' },
                { day: t('set.day.mon'), hours: '08:00 – 20:00' },
                { day: t('set.day.tue'), hours: '08:00 – 20:00' },
                { day: t('set.day.wed'), hours: '08:00 – 20:00' },
                { day: t('set.day.thu'), hours: '08:00 – 20:00' },
                { day: t('set.day.fri'), hours: '10:00 – 13:00' },
                { day: t('set.day.sat'), hours: '10:00 – 13:00' }
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, padding: '8px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
                  <span style={{ color: 'var(--fg-2)' }}>{r.day}</span>
                  <span className="mono" style={{ fontWeight: 500 }}>{r.hours}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="sub">{t('set.ai.sub')}</div>
              <h3>{t('set.ai.title').replace(t('set.ai.title.em'), '').trim()} <em>{t('set.ai.title.em')}</em></h3>
            </div>
          </div>
          <div className="card-body">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                { label: 'Languages',         value: 'English · العربية (auto-detect)' },
                { label: 'Fallback language', value: 'English' },
                { label: 'Message buffering', value: '10-second window' },
                { label: 'Analysis cadence',  value: 'Every 30 seconds for idle conversations' },
                { label: 'Max tool loops',    value: '3 (then AI replies with best-available info)' },
                { label: 'Diagnosis policy',  value: 'STRICT — never diagnose, always book a doctor' },
                { label: 'Emergency policy',  value: 'OFF — treat all as routine; advisor escalation on request' }
              ].map((r, i) => (
                <div key={i} style={{ borderTop: i === 0 ? 'none' : '1px solid var(--line)', paddingTop: i === 0 ? 0 : 14 }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{r.label}</div>
                  <div style={{ fontSize: 13, marginTop: 4 }}>{r.value}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="sub">{t('set.notif.sub')}</div>
              <h3>{t('set.notif.title').replace(t('set.notif.title.em'), '').trim()} <em>{t('set.notif.title.em')}</em></h3>
            </div>
          </div>
          <div className="card-body">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { label: 'New booking',                 on: true },
                { label: 'Reschedule / cancellation',   on: true },
                { label: 'No-show flagged',             on: true },
                { label: 'SLA breach (response > 5m)',  on: true },
                { label: 'Daily ops digest',            on: true },
                { label: 'Weekly SWOT refresh',         on: false },
                { label: 'Insurance pre-auth event',    on: true }
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13, padding: '8px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
                  <span>{r.label}</span>
                  <span className={`tag ${r.on ? 'pos' : ''}`} style={r.on ? {} : { opacity: 0.5 }}>{r.on ? 'ON' : 'OFF'}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="sub">{t('set.slots.sub')}</div>
              <h3>{t('set.slots.title').replace(t('set.slots.title.em'), '').trim()} <em>{t('set.slots.title.em')}</em></h3>
            </div>
          </div>
          <div className="card-body">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { label: 'Default slot duration',   value: '20 minutes' },
                { label: 'Dentistry slot',          value: '15 minutes' },
                { label: 'Psychiatry slot',         value: '30 minutes' },
                { label: 'Booking horizon',         value: 'Up to 60 days ahead' },
                { label: 'Same-day booking cutoff', value: '60 min before slot' },
                { label: 'Cancellation policy',     value: 'Free up to 4 hours before · 50% fee within 4h' },
                { label: 'Reminder cadence',        value: 'SMS at T-24h + T-2h' }
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, padding: '8px 0', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
                  <span style={{ color: 'var(--fg-2)' }}>{r.label}</span>
                  <span className="mono" style={{ fontSize: 11.5 }}>{r.value}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Settings = Settings;