window.FB = window.FB || {};

FB.SettingsTab = function SettingsTab({ lang, user }) {
  const { useState, useEffect } = React;
  const t = FB.makeT(lang);
  const L = (zh, en) => (lang === "zh" ? zh : en);
  const [pages, setPages] = useState(null);
  const [nav, setNav] = useState(null);
  const [staff, setStaff] = useState([]);
  const [form, setForm] = useState(null);
  const [busy, setBusy] = useState(false);
  const [saved, setSaved] = useState(false);
  const [navSaved, setNavSaved] = useState(false);

  function load() { FB.api.staffPages().then(setPages); FB.api.adminNav().then(setNav); FB.api.staffList().then(setStaff); }
  useEffect(() => { load(); }, []);

  async function saveNav(next) {
    setNav(next);
    if (!next.length) return;               // 清空只动本地; 选回 ≥1 个才保存, 线上导航先维持原样
    window.dispatchEvent(new CustomEvent("fb-admin-nav", { detail: next }));
    await FB.api.clockAttendance({ action: "set_admin_nav", pages: next });
    setNavSaved(true); setTimeout(() => setNavSaved(false), 1200);
  }
  function toggleNav(id) {
    if (!nav) return;
    if (nav.includes(id)) saveNav(nav.filter((x) => x !== id));
    else if (nav.length < 5) saveNav([...nav, id]);   // 满 5 个, 先取消一个再选
  }

  async function togglePage(id) {
    const next = pages.includes(id) ? pages.filter((x) => x !== id) : [...pages, id];
    setPages(next);
    await FB.api.clockAttendance({ action: "set_staff_pages", pages: next });
    setSaved(true); setTimeout(() => setSaved(false), 1200);
  }
  async function saveStaff() {
    setBusy(true);
    await FB.api.clockAttendance({ action: "staff_upsert", staff: form });
    setBusy(false); setForm(null); load();
  }

  return (
    <div className="px-3 py-3 max-w-md mx-auto pb-20">
      <h1 className="text-[20px] font-semibold text-stone-900 px-1 mb-4">{t("settings")}</h1>

      <p className="text-[11px] font-semibold text-stone-400 px-1 mb-2">
        {L("我的底部导航", "My bottom nav")}
      </p>
      <div className="rounded-xl border border-stone-200 bg-white p-3 mb-1">
        {!nav && <p className="text-sm text-stone-400">{t("loading")}</p>}
        {nav && (
          <div className="flex flex-wrap gap-2">
            {(FB.ADMIN_PAGES || []).map((id) => {
              const idx = nav.indexOf(id);
              const on = idx >= 0;
              return (
                <button key={id} onClick={() => toggleNav(id)}
                  className={"flex items-center gap-1.5 h-9 px-3 rounded-md border text-[13px] transition-colors " +
                    (on ? "border-red-700 bg-red-50 text-red-700 font-medium" : "border-stone-200 text-stone-500 active:bg-stone-50")}>
                  {on && (
                    <span className="w-4 h-4 rounded-full bg-red-700 text-white text-[10px] font-semibold flex items-center justify-center leading-none">
                      {idx + 1}
                    </span>
                  )}
                  <FB.UI.Icon name={id} size={14} />
                  {t(id)}
                </button>
              );
            })}
          </div>
        )}
        {nav && (
          <div className="flex gap-5 mt-3 px-1">
            <button onClick={() => setNav([])} className="text-[11px] text-stone-400 active:text-stone-600">
              {L("一键清空", "Clear all")}
            </button>
            <button onClick={() => saveNav(FB.NAV_BOTTOM.admin)} className="text-[11px] text-stone-400 active:text-stone-600">
              {L("恢复默认", "Reset to default")}
            </button>
          </div>
        )}
      </div>
      <p className="text-[11px] text-stone-400 px-1 mb-5">
        {navSaved ? "✓ " + L("已保存", "Saved")
          : nav && nav.length === 0
            ? L("已清空,重新点选;选第 1 个就开始保存", "Cleared — tap to rebuild; saves from the 1st pick")
            : L("按点选顺序排,最多 5 个;第 1 个是打开 app 的首页,没选的住 ☰ 菜单",
                "Tap order = nav order, max 5; #1 is the landing page, the rest live in ☰")}
      </p>

      <p className="text-[11px] font-semibold text-stone-400 px-1 mb-2">
        {L("员工能看到的页面", "Staff pages")}
      </p>
      <div className="rounded-xl border border-stone-200 bg-white overflow-hidden mb-1">
        {!pages && <p className="p-3 text-sm text-stone-400">{t("loading")}</p>}
        {pages && (FB.STAFF_OPTIONAL || []).map((id) => {
          const on = pages.includes(id);
          return (
            <button key={id} onClick={() => togglePage(id)}
              className="w-full flex items-center gap-3 px-4 py-3 border-b border-stone-50 last:border-0 active:bg-stone-50">
              <span className="w-10 h-6 rounded-full flex items-center px-0.5 transition-colors"
                style={{ background: on ? "#B91C1C" : "#E7E5E4", justifyContent: on ? "flex-end" : "flex-start" }}>
                <span className="w-5 h-5 rounded-full bg-white block" />
              </span>
              <span className="text-[15px]" style={{ color: on ? "#1C1917" : "#A8A29E" }}>{t(id)}</span>
            </button>
          );
        })}
      </div>
      <p className="text-[11px] text-stone-400 px-1 mb-5">
        {saved ? "✓ " + L("已保存", "Saved") : L("关掉的页面员工看不到，随时可以开", "Toggle anytime")}
      </p>

      <div className="flex justify-between items-center px-1 mb-2">
        <p className="text-[11px] font-semibold text-stone-400">{L("员工", "Staff")}</p>
        <button onClick={() => setForm({ name: "", name_vn: "", base_salary: "", bank_name: "Public Bank", bank_account: "", std_days: 26, ot_rate: 100 })}
          className="text-[12px] text-red-700">+ {L("加员工", "Add")}</button>
      </div>
      <div className="rounded-xl border border-stone-200 bg-white overflow-hidden">
        {staff.map((s) => (
          <button key={s.id} onClick={() => setForm({ ...s, base_salary: String(s.base_salary ?? "") })}
            className="w-full flex items-center gap-3 px-4 py-3 border-b border-stone-50 last:border-0 active:bg-stone-50 text-left">
            <div className="flex-1 min-w-0">
              <p className="text-[15px] text-stone-800">{s.name}</p>
              <p className="text-[11px] text-stone-400">RM {s.base_salary} · {s.bank_account}</p>
            </div>
            <span className="text-stone-300"><FB.UI.Icon name="chev" size={15} /></span>
          </button>
        ))}
      </div>

      {form && (
        <div className="fixed inset-0 z-40 flex items-end" style={{ background: "rgba(28,25,23,.45)" }}>
          <div className="bg-white w-full rounded-t-3xl p-4 pb-safe max-h-[85vh] overflow-y-auto">
            <p className="text-[16px] font-semibold text-stone-900 mb-3">
              {form.id ? L("改员工", "Edit") : L("加员工", "New staff")}
            </p>
            {[["name", L("名字", "Name")], ["name_vn", L("越南名", "VN name")],
              ["base_salary", L("底薪 RM", "Base salary")], ["bank_name", L("银行", "Bank")],
              ["bank_account", L("户口", "Account")]].map(([k, ph]) => (
              <input key={k} value={form[k] ?? ""} onChange={(e) => setForm({ ...form, [k]: e.target.value })}
                placeholder={ph} inputMode={k === "base_salary" || k === "bank_account" ? "numeric" : "text"}
                className="w-full h-11 px-3 rounded-xl border border-stone-300 text-sm mb-2" />
            ))}
            <div className="flex gap-2 mb-3">
              <div className="flex-1">
                <p className="text-[10px] text-stone-400 mb-1">{L("标准工作日", "Std days")}</p>
                <input value={form.std_days ?? 26} onChange={(e) => setForm({ ...form, std_days: e.target.value })}
                  type="number" className="w-full h-11 px-3 rounded-xl border border-stone-300 text-sm" />
              </div>
              <div className="flex-1">
                <p className="text-[10px] text-stone-400 mb-1">{L("OT 每天 RM", "OT rate")}</p>
                <input value={form.ot_rate ?? 100} onChange={(e) => setForm({ ...form, ot_rate: e.target.value })}
                  type="number" className="w-full h-11 px-3 rounded-xl border border-stone-300 text-sm" />
              </div>
            </div>
            {form.id && (
              <label className="flex items-center gap-2 mb-3 text-[13px] text-stone-600">
                <input type="checkbox" checked={form.active !== false}
                  onChange={(e) => setForm({ ...form, active: e.target.checked })} className="w-4 h-4 accent-red-700" />
                {L("在职", "Active")}
              </label>
            )}
            <div className="flex gap-2">
              <button onClick={() => setForm(null)} className="px-5 h-12 rounded-xl border border-stone-200 text-stone-500 text-sm">
                {L("取消", "Cancel")}
              </button>
              <button onClick={saveStaff} disabled={busy || !form.name}
                className="flex-1 h-12 rounded-xl bg-red-700 text-white font-medium disabled:opacity-40">
                {busy ? "…" : L("保存", "Save")}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};