// Shared formatting + small UI primitives
const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React;

const TODAY = new Date(2026, 4, 11, 9, 0);

const fmtTime = (iso) => {
  const dt = new Date(iso);
  let h = dt.getHours(), m = dt.getMinutes();
  const ampm = h >= 12 ? "PM" : "AM";
  h = h % 12 || 12;
  return `${h}:${m.toString().padStart(2,"0")} ${ampm}`;
};
const fmtTimeShort = (iso) => {
  const dt = new Date(iso);
  let h = dt.getHours(), m = dt.getMinutes();
  const ampm = h >= 12 ? "p" : "a";
  h = h % 12 || 12;
  return m === 0 ? `${h}${ampm}` : `${h}:${m.toString().padStart(2,"0")}${ampm}`;
};
const sameDay = (a, b) => {
  const da = new Date(a), db = new Date(b);
  return da.getFullYear() === db.getFullYear() &&
         da.getMonth() === db.getMonth() &&
         da.getDate() === db.getDate();
};
const dayDiff = (iso, ref = TODAY) => {
  const a = new Date(iso); a.setHours(0,0,0,0);
  const b = new Date(ref); b.setHours(0,0,0,0);
  return Math.round((a - b) / 86400000);
};
const relDay = (iso) => {
  const dd = dayDiff(iso);
  if (dd === 0) return "Today";
  if (dd === 1) return "Tomorrow";
  if (dd === -1) return "Yesterday";
  if (dd > 1 && dd < 7) return new Date(iso).toLocaleDateString("en-US", { weekday: "long" });
  return new Date(iso).toLocaleDateString("en-US", { month: "short", day: "numeric" });
};
const fmtDateLong = (iso) => new Date(iso).toLocaleDateString("en-US", {
  weekday: "long", month: "long", day: "numeric",
});

const priorityColor = (p) => ({
  high:   "var(--red)",
  medium: "var(--orange)",
  low:    "var(--gray-2)",
}[p] || "var(--gray-2)");

const projectColor = (hue, l = 60) => `oklch(${l}% 0.15 ${hue})`;

// Renders a keyboard hint like ⌘ ⇧ N
const Kbd = ({ children, style }) => (
  <span className="kbd" style={style}>{children}</span>
);

// Tiny "checkbox" circle for tasks
const TaskCheck = ({ done, priority = "low", onClick, size = 18 }) => (
  <button
    className={"task-check" + (done ? " done" : "")}
    onClick={onClick}
    style={{
      width: size, height: size,
      borderColor: done ? "var(--accent)" : priorityColor(priority),
      background: done ? "var(--accent)" : "transparent",
    }}
    aria-label={done ? "Completed" : "Mark complete"}
  >
    {done && <Icon name="check" size={size - 6} color="white" strokeWidth={2.4} />}
  </button>
);

// Project pill / dot
const ProjectDot = ({ project, size = 8 }) => (
  <span
    className="project-dot"
    style={{
      width: size, height: size,
      background: projectColor(project.hue, 65),
      boxShadow: `0 0 0 2px oklch(${65}% 0.15 ${project.hue} / 0.18)`,
    }}
  />
);

// Tag chip
const Tag = ({ children }) => (
  <span className="tag-chip">{children}</span>
);

window.TaskifyUI = {
  fmtTime, fmtTimeShort, sameDay, dayDiff, relDay, fmtDateLong,
  priorityColor, projectColor, Kbd, TaskCheck, ProjectDot, Tag,
};