// tabel-page.jsx — Табель обліку робочого часу (форма П-5), помісячно.
// Редагований, зі стандартними кодами (Р/ВД/В/ТН/ВП/НА/ІН). Підсумок місяця
// після закриття передається у «Розрахунок ЗП». Перевизначає window.TimePage.

const TABEL_PORTAL = (window.ReactDOM && window.ReactDOM.createPortal) ? window.ReactDOM.createPortal : null;

// ——— дрібний чип коду ———
function CodeChip({ code }) {
  const c = window.TABEL_CODES[code];
  if (!c) return null;
  return <span className={`tabel-code tc-${c.tone}`} title={c.full}>{code}</span>;
}

// ——— поповер-редактор клітинки ———
function TabelCellEditor({ day, current, rect, onPick, onClose }) {
  const [h, setH] = React.useState(typeof current === "number" ? String(current) : "");
  const ref = React.useRef(null);
  React.useEffect(() => { if (ref.current) ref.current.focus(); }, []);

  const commit = () => {
    if (h === "") { onPick(null); return; }
    const n = parseFloat(String(h).replace(",", "."));
    if (!isNaN(n) && n >= 0 && n <= 24) onPick(n); else onClose();
  };

  const codes = ["В", "ТН", "ВП", "НА", "ІН"];
  const POP_H = 250;
  let top = rect.bottom + 6;
  if (top + POP_H > window.innerHeight) top = Math.max(74, rect.top - POP_H - 6);
  top = Math.max(74, top);
  const left = Math.min(rect.left - 40, window.innerWidth - 250);
  const node = (
    <React.Fragment>
      <div className="tabel-pop-overlay" onClick={onClose}></div>
      <div className="tabel-pop" style={{ top, left: Math.max(12, left) }} onClick={(e) => e.stopPropagation()}>
        <div className="tabel-pop-h">Число {day}</div>
        <div className="tabel-pop-hours">
          <input
            ref={ref} type="number" min="0" max="24" step="0.5" value={h}
            onChange={(e) => setH(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter") commit(); if (e.key === "Escape") onClose(); }}
            placeholder="год"
          />
          <button className="btn btn-primary btn-sm" onClick={commit}>OK</button>
        </div>
        <div className="tabel-pop-quick">
          {[8, 4, 0].map((q) => (
            <button key={q} className="tabel-q" onClick={() => onPick(q === 0 ? null : q)}>
              {q === 0 ? "—" : q + " год"}
            </button>
          ))}
        </div>
        <div className="tabel-pop-sep">Неявка / особливий день</div>
        <div className="tabel-pop-codes">
          {codes.map((c) => (
            <button key={c} className={`tabel-code tc-${window.TABEL_CODES[c].tone} is-btn`} title={window.TABEL_CODES[c].full} onClick={() => onPick(c)}>
              {c}<span className="tabel-code-cap">{window.TABEL_CODES[c].label}</span>
            </button>
          ))}
        </div>
        <button className="tabel-pop-clear" onClick={() => onPick(null)}>Очистити клітинку</button>
      </div>
    </React.Fragment>
  );
  return TABEL_PORTAL ? TABEL_PORTAL(node, document.body) : node;
}

function TabelPage({ role }) {
  const team = window.DATA.TEAM;
  const tState = window.useTabel();
  const months = window.TABEL_MONTHS;
  const [month, setMonth] = React.useState(months[0].id);
  const [editing, setEditing] = React.useState(null); // {pid, day, rect}

  const monthObj = tState[month] || { status: "draft", entries: {} };
  const status = monthObj.status;
  const statusMeta = window.TABEL_STATUS_LABELS[status] || window.TABEL_STATUS_LABELS.draft;
  const canEdit = (role === "director" || role === "accountant") && status !== "closed";

  const meta = window.monthMeta(month);
  const monthLabel = (months.find((m) => m.id === month) || {}).label || month;
  const SYS = window.SYS_DATE || "2026-05-29";
  const sysMonth = SYS.slice(0, 7);
  const sysDay = parseInt(SYS.slice(8, 10), 10);

  const staff = team.filter((p) => p.employment !== "contractor");
  const contractors = team.filter((p) => p.employment === "contractor");

  // ——— значення клітинки ———
  const getVal = (pid, day) => (monthObj.entries[pid] || {})[day];
  const setVal = (pid, day, val) => {
    if (!window.__tabelState[month].entries[pid]) window.__tabelState[month].entries[pid] = {};
    const ent = window.__tabelState[month].entries[pid];
    if (val == null || val === "") delete ent[day]; else ent[day] = val;
    window.saveTabelState();
  };
  const setMonthStatus = (st) => {
    const m = window.__tabelState[month];
    m.status = st;
    m.closedAt = st === "closed" ? SYS : null;
    window.saveTabelState();
  };

  // ——— підсумки ———
  const staffSums = staff.map((p) => ({ p, s: window.tabelSummary(month, p.id) }));
  const totalWorked = staffSums.reduce((a, r) => a + (r.s ? r.s.workedHours : 0), 0);
  const totalNorm = staffSums.reduce((a, r) => a + (r.s ? r.s.normHours : 0), 0);
  const totalAbsDays = staffSums.reduce((a, r) => a + (r.s ? Object.values(r.s.codeDays).reduce((x, y) => x + y, 0) : 0), 0);
  const attendance = totalNorm > 0 ? Math.round((totalWorked / totalNorm) * 100) : 0;
  const contrHours = contractors.reduce((a, p) => { const s = window.tabelSummary(month, p.id); return a + (s ? s.workedHours : 0); }, 0);

  const isToday = (day) => month === sysMonth && day === sysDay;

  // ——— рендер однієї клітинки дня ———
  const dayCell = (p, dm, partRate) => {
    const today = isToday(dm.day);
    if (!dm.working) {
      return (
        <td key={dm.day} className={`tabel-cell is-off ${dm.holiday ? "is-holiday" : ""}`} title={dm.holiday ? "Святковий день" : "Вихідний"}>
          <span className="tabel-off">ВД</span>
        </td>
      );
    }
    const v = getVal(p.id, dm.day);
    const editable = canEdit;
    return (
      <td
        key={dm.day}
        className={`tabel-cell ${today ? "is-today" : ""} ${editable ? "is-editable" : ""} ${typeof v === "string" ? "has-code" : ""}`}
        onClick={editable ? (e) => setEditing({ pid: p.id, day: dm.day, rect: e.currentTarget.getBoundingClientRect() }) : undefined}
      >
        {v == null
          ? <span className="tabel-empty">{editable ? "+" : "·"}</span>
          : (typeof v === "number" ? <span className="tabel-h">{v}</span> : <CodeChip code={v} />)}
      </td>
    );
  };

  return (
    <div className="page">
      <div className="page-head">
        <h1 className="page-h1">Табель обліку робочого часу</h1>
        <div className="page-sub">
          <span>типова форма П-5</span>
          <span className="dot"></span>
          <span>{monthLabel}</span>
          <span className="dot"></span>
          <span className={`status-tag tone-${statusMeta.tone}`}>{statusMeta.label}</span>
          {status === "closed" && monthObj.closedAt && (
            <React.Fragment><span className="dot"></span><span style={{ color: "var(--ink-3)" }}>закрито {window.formatDate(monthObj.closedAt)}</span></React.Fragment>
          )}
        </div>
      </div>

      {/* Підсумок */}
      <div className="kpi-row" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <div className="kpi">
          <div className="kpi-label">Відпрацьовано</div>
          <div className="kpi-value">{totalWorked}<span style={{ fontSize: 15, color: "var(--ink-3)" }}> год</span></div>
          <div className="kpi-sub">штат і часткова зайнятість</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Норма за місяць</div>
          <div className="kpi-value">{totalNorm}<span style={{ fontSize: 15, color: "var(--ink-3)" }}> год</span></div>
          <div className="kpi-sub">{meta.filter((d) => d.working).length} робочих днів</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Явка</div>
          <div className="kpi-value" style={{ color: attendance >= 100 ? "var(--c-green-deep)" : "var(--ink)" }}>{attendance}<span style={{ fontSize: 15 }}>%</span></div>
          <div className="kpi-sub">факт / норма</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Неявки</div>
          <div className="kpi-value">{totalAbsDays}<span style={{ fontSize: 15, color: "var(--ink-3)" }}> дн.</span></div>
          <div className="kpi-sub">відпустки · лікарняні · інше</div>
        </div>
      </div>

      {/* Тулбар: місяць + легенда */}
      <div className="toolbar" style={{ marginTop: 20, alignItems: "center", flexWrap: "wrap", gap: 12 }}>
        <div className="filter-pill" role="tablist">
          {months.map((m) => (
            <button key={m.id} className={`filter-pill-item ${month === m.id ? "is-active" : ""}`} onClick={() => { setMonth(m.id); setEditing(null); }}>
              {m.label}
            </button>
          ))}
        </div>
        <div className="tabel-legend">
          {["Р", "В", "ТН", "ВП", "НА", "ІН"].map((c) => (
            <span key={c} className="tabel-legend-item">
              <span className={`tabel-code tc-${window.TABEL_CODES[c].tone}`}>{c}</span>
              <span className="tabel-legend-label">{window.TABEL_CODES[c].label}</span>
            </span>
          ))}
        </div>
      </div>

      {/* Сітка табеля */}
      <div className="tabel-scroll">
        <table className="tabel-table">
          <thead>
            <tr>
              <th className="tabel-name-col">Працівник</th>
              {meta.map((dm) => (
                <th key={dm.day} className={`tabel-day ${dm.weekend ? "is-weekend" : ""} ${dm.holiday ? "is-holiday" : ""} ${isToday(dm.day) ? "is-today" : ""}`}>
                  <span className="tabel-day-dow">{dm.dowName}</span>
                  <span className="tabel-day-num">{dm.day}</span>
                </th>
              ))}
              <th className="tabel-sum-col">Σ год</th>
              <th className="tabel-norm-col">Норма</th>
              <th className="tabel-att-col">Явка</th>
            </tr>
          </thead>
          <tbody>
            {staffSums.map(({ p, s }) => {
              const pct = s && s.normHours > 0 ? Math.round((s.workedHours / s.normHours) * 100) : 0;
              return (
                <tr key={p.id}>
                  <td className="tabel-name-col">
                    <div className="tabel-person">
                      <div className="team-avatar" style={{ width: 26, height: 26, fontSize: 9.5 }}>{p.initials}</div>
                      <div className="tabel-person-text">
                        <div className="cell-name">{p.name}</div>
                        <div className="cell-sub">{p.role}{p.partRate ? ` · ${p.partRate} ставки` : ""}</div>
                      </div>
                    </div>
                  </td>
                  {meta.map((dm) => dayCell(p, dm))}
                  <td className="tabel-sum-col"><b>{s ? s.workedHours : 0}</b></td>
                  <td className="tabel-norm-col">{s ? s.normHours : 0}</td>
                  <td className="tabel-att-col">
                    <div className="load-bar">
                      <div className="load-bar-track"><div className={`load-bar-fill ${pct >= 100 ? "is-high" : ""}`} style={{ width: Math.min(pct, 100) + "%" }}></div></div>
                      <span className="load-bar-val">{pct}%</span>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
          <tfoot>
            <tr>
              <td className="tabel-name-col"><b>Усього</b></td>
              <td colSpan={meta.length} className="tabel-foot-note">
                {totalAbsDays > 0 ? `${totalAbsDays} дн. неявок у місяці` : "повна явка"}
              </td>
              <td className="tabel-sum-col"><b>{totalWorked}</b></td>
              <td className="tabel-norm-col">{totalNorm}</td>
              <td className="tabel-att-col"><b>{attendance}%</b></td>
            </tr>
          </tfoot>
        </table>
      </div>

      {/* Субпідряд / ЦПХ */}
      {contractors.length > 0 && (
        <section className="section" style={{ marginTop: 28 }}>
          <div className="section-head">
            <h2 className="section-h2">Субпідряд · ЦПХ</h2>
            <span className="section-sub">погодинно за задачами · без норми та кодів неявок</span>
          </div>
          <div className="tabel-scroll">
            <table className="tabel-table">
              <thead>
                <tr>
                  <th className="tabel-name-col">Виконавець</th>
                  {meta.map((dm) => (
                    <th key={dm.day} className={`tabel-day ${dm.weekend ? "is-weekend" : ""} ${dm.holiday ? "is-holiday" : ""} ${isToday(dm.day) ? "is-today" : ""}`}>
                      <span className="tabel-day-dow">{dm.dowName}</span>
                      <span className="tabel-day-num">{dm.day}</span>
                    </th>
                  ))}
                  <th className="tabel-sum-col">Σ год</th>
                  <th className="tabel-norm-col" colSpan={2}>Гонорар</th>
                </tr>
              </thead>
              <tbody>
                {contractors.map((p) => {
                  const s = window.tabelSummary(month, p.id);
                  const fee = (s ? s.workedHours : 0) * (p.taskRate || 0);
                  return (
                    <tr key={p.id}>
                      <td className="tabel-name-col">
                        <div className="tabel-person">
                          <div className="team-avatar" style={{ width: 26, height: 26, fontSize: 9.5 }}>{p.initials}</div>
                          <div className="tabel-person-text">
                            <div className="cell-name">{p.name}</div>
                            <div className="cell-sub">{p.role} · {p.taskRate} ₴/год</div>
                          </div>
                        </div>
                      </td>
                      {meta.map((dm) => {
                        const today = isToday(dm.day);
                        const v = getVal(p.id, dm.day);
                        return (
                          <td
                            key={dm.day}
                            className={`tabel-cell ${today ? "is-today" : ""} ${canEdit ? "is-editable" : ""} ${dm.weekend ? "is-dim" : ""}`}
                            onClick={canEdit ? (e) => setEditing({ pid: p.id, day: dm.day, rect: e.currentTarget.getBoundingClientRect() }) : undefined}
                          >
                            {v == null ? <span className="tabel-empty">{canEdit ? "+" : "·"}</span> : (typeof v === "number" ? <span className="tabel-h">{v}</span> : <CodeChip code={v} />)}
                          </td>
                        );
                      })}
                      <td className="tabel-sum-col"><b>{s ? s.workedHours : 0}</b></td>
                      <td className="tabel-norm-col" colSpan={2} style={{ fontVariantNumeric: "tabular-nums" }}>{window.formatMoney(fee)} ₴</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </section>
      )}

      {/* Передача у ЗП */}
      <div className="tabel-handoff">
        <div className="tabel-handoff-text">
          <div className="tabel-handoff-title">
            <window.Ico name="arrowRight" /> Підсумок місяця йде у «Розрахунок ЗП»
          </div>
          <div className="tabel-handoff-sub">
            {status === "closed"
              ? <>Табель закрито — відпрацьовані години передано в нарахування за {monthLabel}.</>
              : <>Після закриття місяця відпрацьовані години автоматично підставляться у розрахунок ЗП (замість ручного вводу). Оклад штатних коригується пропорційно нормі, лікарняні й відпустки рахуються окремо.</>}
          </div>
        </div>
        <div className="tabel-handoff-actions">
          {window.__setPage && <button className="btn" onClick={() => window.__setPage("payroll")}>Перейти до ЗП</button>}
          {canEdit && status === "draft" && <button className="btn" onClick={() => setMonthStatus("submitted")}>На затвердження</button>}
          {canEdit && status === "submitted" && <button className="btn btn-primary" onClick={() => setMonthStatus("closed")}><window.Ico name="lock" /> Закрити місяць</button>}
          {status === "closed" && (role === "director" || role === "accountant") && <button className="btn" onClick={() => setMonthStatus("submitted")}><window.Ico name="refresh" /> Відкрити знову</button>}
        </div>
      </div>

      {!canEdit && status !== "closed" && (
        <div className="hint-box" style={{ marginTop: 14 }}>
          Редагувати табель можуть лише <b>директор</b> і <b>бухгалтер</b>. Перемкніть роль угорі, щоб вносити години.
        </div>
      )}

      {editing && (
        <TabelCellEditor
          day={editing.day}
          current={getVal(editing.pid, editing.day)}
          rect={editing.rect}
          onClose={() => setEditing(null)}
          onPick={(val) => { setVal(editing.pid, editing.day, val); setEditing(null); }}
        />
      )}
    </div>
  );
}

window.TimePage = TabelPage;
window.TabelPage = TabelPage;