const { useState, useEffect, useRef } = React;
/* ---------- Misc ---------- */
function SectionHead({ title, action, children }) {
  return (
    <div className="sechead">
      <h3 className="sechead-title">{title}</h3>
      <div className="sechead-actions">{children}{action}</div>
    </div>
  );
}
function KV({ k, v, mono }) {
  return (
    <div className="kv">
      <span className="kv-k">{k}</span>
      <span className={"kv-v" + (mono ? " mono" : "")}>{v}</span>
    </div>
  );
}


/* ---------- Clock times ---------- */
// Times and worked durations read as HH:MM with the seconds trailing in a
// smaller, muted size — precise without the seconds competing with the hour.
const twoD = (n) => String(n).padStart(2, "0");

// "08:15:32" or "08:15" (older punches) -> 08:15 + :32
function TimeSec({ t }) {
  const p = t == null ? [] : String(t).split(":");
  if (p.length < 2) return <span className="dim">{"—"}</span>;
  return <>{twoD(p[0])}:{twoD(p[1])}<span className="clock-sec">:{twoD(p[2] || 0).slice(0, 2)}</span></>;
}

// A duration in seconds -> 07:24 + :05 (hours are not capped at 24)
function DurSec({ s }) {
  const t = Math.max(0, Math.round(s || 0));
  return <>{twoD(Math.floor(t / 3600))}:{twoD(Math.floor(t / 60) % 60)}<span className="clock-sec">:{twoD(t % 60)}</span></>;
}

// Hours as a figure, not a duration: 40 -> 40:00, 37.5 -> 37:30. No seconds —
// contract hours and weekly totals are never counted that finely.
function HoursHM({ h }) {
  const m = Math.max(0, Math.round((parseFloat(h) || 0) * 60));
  return <>{twoD(Math.floor(m / 60))}:{twoD(m % 60)}</>;
}

Object.assign(window, { SectionHead, KV, TimeSec, DurSec, HoursHM });