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

// 「考勤」 = 签到 + 考勤表合并成一页 (2026-09-04 她定)。
// 🔴 员工只看到签到页, 连分段器都不画 —— 考勤表里有底薪和银行户口 (SettingsTab 那份 staff 表),
//    员工底栏那格照旧叫「签到」、图标照旧 (App.jsx 的 PAGES 用 clockin 这个 id 渲染这支)。
// 子页一行没改: ClockTab 底下嵌的每日任务清单也照旧在。
FB.AttendTab = function AttendTab({ lang, user, hint }) {
  const { useState, useEffect } = React;
  const t = FB.makeT(lang);
  const L = (zh, vi, en) => (lang === "zh" ? zh : lang === "vi" ? vi : en);
  const isAdmin = !!(user && user.role === "admin");
  const [seg, setSeg] = useState("clock");

  // ── 电脑右栏「相关」(2026-09-04 第 2b-3 步) ──
  // ⚠️ hook 必须排在下面那个 `if (!isAdmin) return` **前面** —— 放后面 = 员工那条路少跑两个 hook,
  //    React 会当场炸 "rendered fewer hooks than expected"。
  const pc = FB.usePC();
  const pcOn = pc && isAdmin;
  const [att, setAtt] = useState(null);      // 本月考勤行 (工资页同一支 attendanceMonth)
  const [today, setToday] = useState(null);  // 今天的考勤行 (签到页同一支 todayAttendance)
  const [staff, setStaff] = useState(null);  // v_staff_public — 不含底薪/银行
  const [pcErr, setPcErr] = useState("");

  useEffect(() => {
    if (!hint || !hint.seg) return;
    setSeg(hint.seg === "sheet" ? "sheet" : "clock");
  }, [hint]);
  // 只在电脑上拉 —— 员工手机进来 pcOn 恒 false, 一次网络都不多打
  useEffect(() => {
    if (!pcOn || att) return;
    const ym = FB.todayLocal().slice(0, 7);
    // ⚠️ 不用 FB.api.attendanceMonth —— 它拼 `ym+"-31"`, 9 月这种 30 天的月份整个读不到 (supabase.jsx 那条注释)
    FB.api.attendanceRange(ym + "-01", FB.api.monthEnd(ym)).then((d) => setAtt(d || [])).catch(async (e) => {
      setAtt([]); setPcErr(await FB.errMsg({ error: e }, t("failed")));
    });
    FB.api.todayAttendance().then((d) => setToday(d || [])).catch(() => setToday([]));
    FB.api.staffList().then((d) => setStaff(d || [])).catch(() => setStaff([]));
  }, [pcOn]);

  if (!isAdmin) return <FB.ClockTab lang={lang} user={user} />;

  // ── 右栏两张卡 —— 只读, 一个动作都没有 ──
  // 🔴 **不报「迟到」**: 全库/全码里没有任何「几点算上班」的口径 —— `staff` 只有 std_days,
  //    AttendanceTab 那个 start_time:"09:00" 是**新增表单的预设值**, 不是规矩。
  //    照它当阈值 = 自己发明一条会被推翻的线 (坑 p25「阈值会把最该抓的那次漏掉」)。
  //    她给了上班时间再加, 加的时候口径要住一处 (同 FB.TODAY_DEADLINE 那样)。
  const sName = (id) => {
    const s = (staff || []).find((x) => x.id === id);
    return s ? (lang === "vi" ? (s.name_vn || s.name) : s.name) : String(id);
  };
  const pcCard = (title, body) => (
    <div className="rounded-xl border border-stone-200 bg-white p-3 mb-2" style={{ borderLeft: "3px solid " + FB.UI.C.line }}>
      <p className="text-[11px] font-semibold text-stone-500 m-0 mb-1.5">{title}</p>
      {body}
    </div>
  );
  // 出勤天数 = 这个月有几个不同的 work_date 有这个人的行 (同一天两行不重复算)
  const daysByStaff = (() => {
    const m = {};
    (att || []).forEach((r) => { (m[r.staff_id] = m[r.staff_id] || {})[r.work_date] = 1; });
    return m;
  })();
  // 在班 = 今天有行、打了上班、还没打下班 (和签到页同一条判据)
  const onDuty = (today || []).filter((r) => r.start_time && !r.end_time);
  const blkRelated = (!pcOn ? null : (
    <div>
      <p className="text-[11px] font-semibold text-stone-500 px-1 mb-1.5">{t("pcRelated")}</p>

      {pcCard(t("pcOnDuty"), (
        today == null ? <p className="text-[12px] text-stone-400 m-0">{t("loading")}</p>
        : !onDuty.length ? <p className="text-[12px] text-stone-400 m-0">{t("pcOnDutyNone")}</p>
        : (
          <div className="divide-y divide-stone-50">
            {onDuty.map((r) => (
              <div key={r.id} className="flex items-center gap-2 py-1">
                <span className="text-[12.5px] text-stone-800 truncate flex-1 min-w-0">{sName(r.staff_id)}</span>
                <span className="text-[11.5px] text-stone-500 tabular-nums shrink-0">
                  {String(r.start_time).slice(0, 5)}
                </span>
              </div>
            ))}
          </div>
        )
      ))}

      {pcCard(t("pcMonthDays").replace("{m}", FB.todayLocal().slice(0, 7)), (
        pcErr ? <p className="text-[12px] m-0" style={{ color: FB.UI.C.s1 }}>{pcErr}</p>
        : att == null || staff == null ? <p className="text-[12px] text-stone-400 m-0">{t("loading")}</p>
        : !(staff || []).length ? <p className="text-[12px] text-stone-400 m-0">{t("noData")}</p>
        : (
          <div className="divide-y divide-stone-50">
            {(staff || []).filter((s) => s.active !== false).map((s) => {
              const d = Object.keys(daysByStaff[s.id] || {}).length;
              return (
                <div key={s.id} className="flex items-center gap-2 py-1">
                  <span className="text-[12.5px] text-stone-800 truncate flex-1 min-w-0">
                    {lang === "vi" ? (s.name_vn || s.name) : s.name}
                  </span>
                  <span className="text-[12.5px] font-semibold tabular-nums shrink-0"
                    style={{ color: d ? FB.UI.C.ink : FB.UI.C.faint }}>
                    {d}{s.std_days ? <span className="text-[10.5px] font-normal text-stone-400">/{s.std_days}</span> : null}
                  </span>
                </div>
              );
            })}
            <p className="text-[11px] text-stone-500 m-0 pt-1">{L("只数天数, 不判迟到", "Chỉ đếm số ngày", "Days only — no lateness rule yet")}</p>
          </div>
        )
      ))}
    </div>
  ));

  const blkBody = (
    <>
      <div className="px-3 pt-3 max-w-md mx-auto">
        <FB.UI.Seg small value={seg} onChange={setSeg}
          options={[["clock", t("segClock")], ["sheet", t("segSheet")]]} />
      </div>
      {seg === "clock"
        ? <FB.ClockTab lang={lang} user={user} />
        : <FB.AttendanceTab lang={lang} user={user} />}
    </>
  );

  // 手机: 外壳 div + blkBody = 和 09-04 之前逐字节同一棵树 (Fragment 不产生节点)。
  return (
    <div>
      {pcOn ? (
        <div className="pc-split">
          <div className="min-w-0">{blkBody}</div>
          <div className="pc-side2">{blkRelated}</div>
        </div>
      ) : blkBody}
    </div>
  );
};