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

// ── 每日任务清单 (签到页 + 任务页 共用) ──
// 做完不挪位置, 原地划线: 顺序不变才知道做到哪一步; 误点看得见, 再点一下撤销
// embedded: 嵌在签到页下方 (小标题, 无 admin 编辑入口)
FB.TaskList = function TaskList({ lang, user, embedded, onStats, onEdit }) {
  const { useState, useEffect } = React;
  const t = FB.makeT(lang);
  const L = (zh, vi, en) => (lang === "zh" ? zh : lang === "vi" ? vi : en);
  const [tasks, setTasks] = useState(null);
  const [logs, setLogs] = useState([]);
  const today = FB.todayLocal();
  const isoDay = (() => { const d = new Date().getDay(); return d === 0 ? 7 : d; })();
  const isFirst = new Date().getDate() === 1;

  function load() { FB.api.dailyTasks().then(setTasks); FB.api.taskLogs(today).then(setLogs); }
  useEffect(() => { load(); }, []);

  const showToday = (t0) => t0.freq_type === "daily" || (t0.freq_type === "monthly1" && isFirst) || (t0.freq_type === "weekly" && (t0.weekdays || []).includes(isoDay));
  const doneSet = new Set(logs.map((l) => l.task_id));
  const label = (t0) => lang === "vi" ? (t0.task_vn || t0.task_cn) : t0.task_cn;
  const todayTasks = (tasks || []).filter(showToday);
  const doneCount = todayTasks.filter((t0) => doneSet.has(t0.id)).length;
  const allDone = todayTasks.length > 0 && doneCount === todayTasks.length;

  useEffect(() => { if (tasks && onStats) onStats(doneCount, todayTasks.length); }, [tasks, logs]);

  async function toggle(t0) {
    const done = !doneSet.has(t0.id);
    await FB.api.manageTask({ action: "log", task_id: t0.id, log_date: today, done_by: user.name, done });
    load();
  }

  return (
    <div>
      <div className="flex justify-between items-center mb-2 px-0.5">
        <p className="text-sm font-semibold text-stone-800">{embedded ? t("task") : t("today")}</p>
        <div className="flex items-center gap-3">
          <span className="text-[12px] text-stone-500 tabular-nums">{doneCount} / {todayTasks.length}</span>
          {onEdit ? (
            <button onClick={onEdit} className="text-xs text-stone-500 flex items-center gap-1">
              <FB.UI.Icon name="edit" size={13} />{t("editTask")}
            </button>
          ) : null}
        </div>
      </div>
      {!tasks && <p className="text-sm text-stone-400">{t("loading")}</p>}

      <div className="rounded-xl border border-stone-200 bg-white divide-y divide-stone-100 overflow-hidden">
        {todayTasks.map((t0) => {
          const done = doneSet.has(t0.id);
          return (
            <div key={t0.id} onClick={() => toggle(t0)}
              className="flex items-center gap-3 px-3 cursor-pointer active:bg-stone-50"
              style={{ paddingTop: 13, paddingBottom: 13, background: done ? "#FCFCFB" : "#fff" }}>
              <FB.UI.CheckCircle on={done} size={27} />
              {t0.time_slot ? (
                <span className={"text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0 tabular-nums " + (done ? "bg-stone-50 text-stone-300" : "bg-stone-100 text-stone-500")}>
                  {String(t0.time_slot).slice(0, 5)}
                </span>
              ) : null}
              <div className="flex-1 min-w-0">
                <p className={"text-[15px] leading-snug " + (done ? "text-stone-400 line-through" : "text-stone-800")}>{label(t0)}</p>
                {t0.freq_type !== "daily" && <p className="text-[11px] text-stone-400">{t(t0.freq_type)}</p>}
              </div>
            </div>
          );
        })}
        {tasks && todayTasks.length === 0 && (
          <div className="px-3 py-4 text-center text-sm text-stone-400">{t("noData")}</div>
        )}
      </div>
      {allDone && (
        <p className="text-center text-sm mt-3" style={{ color: "#4A7A1C" }}>
          ✓ {L("今天的都做完了", "Xong hết hôm nay", "All done today")}
        </p>
      )}
    </div>
  );
};

FB.TaskTab = function TaskTab({ lang, user }) {
  const { useState, useEffect } = React;
  const t = FB.makeT(lang);
  const [tasks, setTasks] = useState(null);
  const [edit, setEdit] = useState(false);
  const [form, setForm] = useState(null);

  function load() { FB.api.dailyTasks().then(setTasks); }
  useEffect(() => { if (edit) load(); }, [edit]);

  async function saveForm() {
    await FB.api.manageTask({ action: "upsert", task: form });
    setForm(null); load();
  }
  async function del(id) { await FB.api.manageTask({ action: "delete", id }); load(); }

  const FREQS = ["daily", "weekly", "monthly1"];
  const TIMES = ["", "08:00", "08:30", "09:00", "09:30", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00"];

  // ADMIN 编辑视图
  if (user.role === "admin" && edit) {
    return (
      <div className="px-3 py-3 max-w-md mx-auto pb-20">
        <div className="flex justify-between items-center mb-3">
          <button onClick={() => setEdit(false)} className="text-xs text-stone-500">← {t("task")}</button>
          <button onClick={() => setForm({ task_cn: "", task_vn: "", time_slot: "", freq_type: "daily", weekdays: [] })}
            className="text-xs px-3 py-1 rounded-lg bg-red-700 text-white">+ {t("addTask")}</button>
        </div>
        {form && (
          <div className="rounded-xl border border-stone-300 bg-white p-3 mb-3">
            <input placeholder={t("taskCn")} value={form.task_cn} onChange={(e) => setForm({ ...form, task_cn: e.target.value })} className="w-full mb-2 px-3 h-10 rounded-lg border border-stone-300 text-sm" />
            <input placeholder={t("taskVn")} value={form.task_vn} onChange={(e) => setForm({ ...form, task_vn: e.target.value })} className="w-full mb-2 px-3 h-10 rounded-lg border border-stone-300 text-sm" />
            <div className="flex gap-2 mb-2">
              <select value={form.time_slot || ""} onChange={(e) => setForm({ ...form, time_slot: e.target.value })} className="flex-1 h-10 px-2 rounded-lg border border-stone-300 text-sm">
                {TIMES.map((tm) => <option key={tm} value={tm}>{tm || t("anytime")}</option>)}
              </select>
              <select value={form.freq_type} onChange={(e) => setForm({ ...form, freq_type: e.target.value })} className="flex-1 h-10 px-2 rounded-lg border border-stone-300 text-sm">
                {FREQS.map((f) => <option key={f} value={f}>{t(f)}</option>)}
              </select>
            </div>
            {form.freq_type === "weekly" && (
              <div className="flex gap-1 mb-2">
                {[1, 2, 3, 4, 5, 6, 7].map((d) => (
                  <button key={d} onClick={() => setForm({ ...form, weekdays: (form.weekdays || []).includes(d) ? form.weekdays.filter((x) => x !== d) : [...(form.weekdays || []), d] })}
                    className={"flex-1 h-8 text-xs rounded border " + ((form.weekdays || []).includes(d) ? "bg-red-700 text-white border-red-700" : "border-stone-300 text-stone-500")}>{["一", "二", "三", "四", "五", "六", "日"][d - 1]}</button>
                ))}
              </div>
            )}
            <div className="flex gap-2">
              <button onClick={saveForm} className="flex-1 h-10 rounded-lg bg-red-700 text-white text-sm">{t("save")}</button>
              <button onClick={() => setForm(null)} className="px-4 h-10 rounded-lg border border-stone-300 text-sm text-stone-500">✕</button>
            </div>
          </div>
        )}
        <div className="rounded-xl border border-stone-200 bg-white divide-y divide-stone-100 overflow-hidden">
          {(tasks || []).map((t0) => (
            <div key={t0.id} className="flex items-center gap-2 px-3 py-2">
              <div className="flex-1 min-w-0">
                <p className="text-sm truncate">{t0.time_slot ? t0.time_slot + " " : ""}{t0.task_cn}</p>
                <p className="text-[11px] text-stone-400">{t0.task_vn} · {t(t0.freq_type)}{t0.weekdays ? " " + t0.weekdays.map((d) => ["一", "二", "三", "四", "五", "六", "日"][d - 1]).join("") : ""}</p>
              </div>
              <button onClick={() => setForm(t0)} className="w-8 h-8 rounded-lg flex items-center justify-center text-stone-400 active:bg-stone-100"><FB.UI.Icon name="edit" size={14} /></button>
              <button onClick={() => del(t0.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-red-400 active:bg-red-50"><FB.UI.Icon name="trash" size={14} /></button>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // 员工/默认: 共用清单 + header 发进度
  return (
    <div className="px-3 py-3 max-w-md mx-auto pb-20">
      <FB.TaskList lang={lang} user={user}
        onStats={(d, tt) => { if (FB.setPageInfo) FB.setPageInfo({ text: t("today") + " " + d + " / " + tt, num: d, den: tt, color: "#4A7A1C" }); }}
        onEdit={user.role === "admin" ? () => setEdit(true) : null} />
    </div>
  );
};