// Settings screen
const { useState: stState } = React;

function Settings({ t, lang, role, prefs, setPref }) {
  const [tab, setTab] = stState('general');
  const toast = useToast();

  const tabs = [
    { key: 'general', label: t.set_general, icon: Icon.Gear },
    { key: 'categories', label: t.set_categories, icon: Icon.Tag },
    { key: 'locations', label: t.set_locations, icon: Icon.Map },
    { key: 'users', label: t.set_users, icon: Icon.User },
    { key: 'notifications', label: t.set_notifications, icon: Icon.Bell }
  ];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>{t.set_title}</h1>
          <div className="page-sub">{lang === 'th' ? 'ปรับการตั้งค่าระบบ' : 'Configure your inventory system'}</div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 20 }}>
        <div className="card" style={{ padding: 8, height: 'fit-content' }}>
          {tabs.map(tb => (
            <button
              key={tb.key}
              onClick={() => setTab(tb.key)}
              className="nav-item"
              style={{ background: tab === tb.key ? 'var(--accent-soft)' : 'transparent', color: tab === tb.key ? 'var(--accent-strong)' : 'var(--ink-2)', margin: '2px 0', width: '100%' }}
            >
              <tb.icon className="icon icon-sm" /> {tb.label}
            </button>
          ))}
        </div>

        <div>
          {tab === 'general' && <GeneralSettings t={t} lang={lang} prefs={prefs} setPref={setPref} toast={toast} />}
          {tab === 'categories' && <CategoriesSettings t={t} lang={lang} toast={toast} />}
          {tab === 'locations' && <LocationsSettings t={t} lang={lang} toast={toast} />}
          {tab === 'users' && <UsersSettings t={t} lang={lang} />}
          {tab === 'notifications' && <NotificationSettings t={t} lang={lang} toast={toast} />}
        </div>
      </div>
    </div>
  );
}

function GeneralSettings({ t, lang, prefs, setPref, toast }) {
  return (
    <div className="card">
      <div className="card-header"><h2>{t.set_general}</h2></div>
      <div className="card-body" style={{ display: 'grid', gap: 18 }}>
        <Row label={t.set_language} hint={lang === 'th' ? 'ภาษาเริ่มต้นเมื่อเปิดระบบ' : 'Default language on load'}>
          <div className="segmented">
            <button className={prefs.lang === 'th' ? 'active' : ''} onClick={() => setPref('lang', 'th')}>ไทย</button>
            <button className={prefs.lang === 'en' ? 'active' : ''} onClick={() => setPref('lang', 'en')}>English</button>
          </div>
        </Row>
        <Row label={t.set_currency}>
          <select className="select" style={{ width: 180 }} defaultValue="THB">
            <option value="THB">THB · บาท</option>
            <option value="USD">USD · $</option>
            <option value="EUR">EUR · €</option>
          </select>
        </Row>
        <Row label={t.set_low_threshold} hint={lang === 'th' ? 'แจ้งเตือนเมื่อสต๊อกต่ำกว่าจุดสั่งซื้อ' : 'Alert when stock falls below reorder point'}>
          <input type="number" className="input" style={{ width: 120 }} defaultValue="7" />
        </Row>
        <Row label={t.set_dead_threshold} hint={lang === 'th' ? 'จำนวนวันที่ไม่มียอดขาย' : 'Days without sales to count as dead'}>
          <input type="number" className="input" style={{ width: 120 }} defaultValue="30" />
        </Row>
        <div className="divider"></div>
        <Row label={lang === 'th' ? 'ชื่อบริษัท' : 'Company name'}>
          <input className="input" style={{ width: 280 }} defaultValue={lang === 'th' ? 'จักรวาล เซ็นเตอร์ จำกัด' : 'Chakawal Center Co., Ltd.'} />
        </Row>
        <Row label={lang === 'th' ? 'รหัสบริษัท' : 'Company code'}>
          <input className="input" style={{ width: 280 }} defaultValue="CKW-001" />
        </Row>
        <div style={{ marginTop: 8 }}>
          <button className="btn btn-primary" onClick={() => toast(t.toast_saved)}><Icon.Check className="icon icon-sm" /> {t.save}</button>
        </div>
      </div>
    </div>
  );
}

function Row({ label, hint, children }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 20, alignItems: 'center' }}>
      <div>
        <div style={{ fontWeight: 600, fontSize: 14 }}>{label}</div>
        {hint && <div className="t-muted" style={{ fontSize: 12.5, marginTop: 2 }}>{hint}</div>}
      </div>
      <div>{children}</div>
    </div>
  );
}

function CategoriesSettings({ t, lang, toast }) {
  const [items, setItems] = stState([
    { key: 'service', label_th: 'บริการ', label_en: 'Service', count: 10, color: 'var(--purple)' },
    { key: 'packaging', label_th: 'บรรจุภัณฑ์', label_en: 'Packaging', count: 118, color: 'var(--accent)' },
    { key: 'parts', label_th: 'อะไหล่', label_en: 'Spare parts', count: 91, color: 'var(--ok)' },
    { key: 'equipment', label_th: 'เครื่องจักร', label_en: 'Equipment', count: 12, color: 'var(--warn)' },
    { key: 'consumables', label_th: 'วัตถุดิบ', label_en: 'Consumables', count: 0, color: 'var(--bad)' },
    { key: 'other', label_th: 'อื่นๆ', label_en: 'Other', count: 132, color: 'var(--ink-3)' }
  ]);
  return (
    <div className="card">
      <div className="card-header">
        <h2>{t.set_categories}</h2>
        <span className="spacer"></span>
        <button className="btn btn-primary" onClick={() => toast(t.toast_saved)}><Icon.Plus className="icon icon-sm" /> {lang === 'th' ? 'เพิ่มหมวด' : 'Add category'}</button>
      </div>
      <div style={{ padding: '4px 0' }}>
        {items.map(it => (
          <div key={it.key} className="movement-row" style={{ padding: '14px 20px' }}>
            <div style={{ width: 12, height: 12, borderRadius: 4, background: it.color }}></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 600 }}>{lang === 'th' ? it.label_th : it.label_en}</div>
              <div className="t-muted" style={{ fontSize: 12 }}>{lang === 'th' ? it.label_en : it.label_th} · <span className="mono">{it.key}</span></div>
            </div>
            <span className="chip">{it.count} {t.items}</span>
            <button className="btn-icon btn-ghost"><Icon.Edit className="icon icon-sm" /></button>
            <button className="btn-icon btn-ghost"><Icon.Trash className="icon icon-sm" style={{ color: 'var(--bad)' }} /></button>
          </div>
        ))}
      </div>
    </div>
  );
}

function LocationsSettings({ t, lang, toast }) {
  return (
    <div className="card">
      <div className="card-header">
        <h2>{t.set_locations}</h2>
      </div>
      <div className="card-body">
        <div className="alert info" style={{ marginBottom: 16 }}>
          <div className="icon-circle"><Icon.InfoCircle className="icon icon-sm" /></div>
          <div>
            <div className="alert-title">{lang === 'th' ? 'ปัจจุบันใช้คลังเดียว' : 'Single-warehouse mode'}</div>
            <div className="alert-body">{lang === 'th' ? 'หากต้องการใช้หลายคลัง สามารถเปิดใช้งานได้ในแผนระดับสูง' : 'Multi-warehouse is available on higher tiers.'}</div>
          </div>
        </div>
        <div style={{ display: 'grid', gap: 12 }}>
          <div className="card" style={{ padding: 16, display: 'flex', gap: 12, alignItems: 'center', borderColor: 'var(--accent)', borderWidth: 2 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}>
              <Icon.Map />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 15 }}>{lang === 'th' ? 'คลังหลัก — จักรวาล เซ็นเตอร์' : 'Main warehouse — Chakawal Center'}</div>
              <div className="t-muted" style={{ fontSize: 13, marginTop: 2 }}>{lang === 'th' ? 'นนทบุรี, ประเทศไทย' : 'Nonthaburi, Thailand'}</div>
            </div>
            <span className="chip chip-ok"><span className="chip-dot"></span> {lang === 'th' ? 'ใช้งานอยู่' : 'Active'}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function UsersSettings({ t, lang }) {
  const { state } = useStore();
  return (
    <div className="card">
      <div className="card-header">
        <h2>{t.set_users}</h2>
        <span className="spacer"></span>
        <button className="btn btn-primary"><Icon.Plus className="icon icon-sm" /> {lang === 'th' ? 'เชิญผู้ใช้' : 'Invite user'}</button>
      </div>
      <table className="tbl">
        <thead><tr>
          <th>{lang === 'th' ? 'ผู้ใช้' : 'User'}</th>
          <th>{lang === 'th' ? 'รหัส' : 'Code'}</th>
          <th>{lang === 'th' ? 'ใบกำกับ' : 'Invoices'}</th>
          <th>{lang === 'th' ? 'ยอดขาย' : 'Revenue'}</th>
          <th>{lang === 'th' ? 'สิทธิ์' : 'Role'}</th>
        </tr></thead>
        <tbody>
          {state.reps.map(r => (
            <tr key={r.code}>
              <td>
                <div className="row">
                  <div className="avatar">{(r.name || '?').slice(0,1)}</div>
                  <div>
                    <div style={{ fontWeight: 600 }}>{r.name}</div>
                    <div className="t-muted" style={{ fontSize: 12 }}>{r.code.toLowerCase()}@ckw.co.th</div>
                  </div>
                </div>
              </td>
              <td className="mono">{r.code}</td>
              <td className="num">{fmtThousands(r.invoices)}</td>
              <td className="num">{fmtCurrency(r.revenue)}</td>
              <td><span className="chip">{r.code === 'SV-000' ? t.role_officer : t.role_sales}</span></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function NotificationSettings({ t, lang, toast }) {
  const [opts, setOpts] = stState({
    lowstock: true, dead: true, audit: true, dailyDigest: false, email: true, line: false
  });
  function tog(k) { setOpts({ ...opts, [k]: !opts[k] }); }
  const NotifRow = ({ label, hint, k }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: '1px solid var(--border)' }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600 }}>{label}</div>
        <div className="t-muted" style={{ fontSize: 12.5 }}>{hint}</div>
      </div>
      <button
        onClick={() => tog(k)}
        style={{
          width: 44, height: 24,
          background: opts[k] ? 'var(--accent)' : 'var(--border-strong)',
          borderRadius: 12,
          position: 'relative',
          transition: 'background .2s'
        }}
      >
        <span style={{
          position: 'absolute',
          left: opts[k] ? 22 : 2, top: 2,
          width: 20, height: 20, borderRadius: 50,
          background: 'white',
          transition: 'left .2s',
          boxShadow: '0 1px 3px rgba(0,0,0,0.2)'
        }}></span>
      </button>
    </div>
  );
  return (
    <div className="card">
      <div className="card-header"><h2>{t.set_notifications}</h2></div>
      <div className="card-body">
        <div className="h-section">{lang === 'th' ? 'เหตุการณ์' : 'Events'}</div>
        <NotifRow label={lang === 'th' ? 'แจ้งเตือนสต๊อกใกล้หมด' : 'Low stock alerts'} hint={lang === 'th' ? 'แจ้งเตือนเมื่อต่ำกว่าจุดสั่งซื้อ' : 'When item falls below reorder point'} k="lowstock" />
        <NotifRow label={lang === 'th' ? 'แจ้งเตือนสินค้านิ่ง' : 'Dead stock alerts'} hint={lang === 'th' ? 'แจ้งเตือนสินค้าที่ไม่เคลื่อนไหวนาน' : 'Items not sold in 30+ days'} k="dead" />
        <NotifRow label={lang === 'th' ? 'แจ้งเตือนข้อมูลผิดปกติ' : 'Audit anomalies'} hint={lang === 'th' ? 'ข้อมูลที่ต้องตรวจสอบ' : 'Discrepancies and mismatches'} k="audit" />
        <NotifRow label={lang === 'th' ? 'รายงานประจำวัน' : 'Daily digest'} hint={lang === 'th' ? 'ส่งสรุปประจำวันทุก 08:00' : 'Summary email at 08:00'} k="dailyDigest" />
        <div style={{ height: 16 }}></div>
        <div className="h-section">{lang === 'th' ? 'ช่องทาง' : 'Channels'}</div>
        <NotifRow label="Email" hint="someone@ckw.co.th" k="email" />
        <NotifRow label="LINE" hint={lang === 'th' ? 'แจ้งผ่าน LINE Notify' : 'LINE Notify'} k="line" />
        <div style={{ marginTop: 16 }}>
          <button className="btn btn-primary" onClick={() => toast(t.toast_saved)}><Icon.Check className="icon icon-sm" /> {t.save}</button>
        </div>
      </div>
    </div>
  );
}

window.Settings = Settings;