/* global React */
const { useState, useMemo, useEffect, useRef } = React;

// ============ Icons ============
const Icon = ({ d, size = 14, sw = 1.6, fill = "none" }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill={fill} stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {typeof d === "string" ? <path d={d} /> : d}
  </svg>
);
const I = {
  list:    <Icon d="M3 6h18M3 12h18M3 18h18" />,
  grid:    <Icon d={<><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></>} />,
  kanban:  <Icon d={<><rect x="3" y="4" width="5" height="16" rx="1.5"/><rect x="10" y="4" width="5" height="10" rx="1.5"/><rect x="17" y="4" width="4" height="13" rx="1.5"/></>} />,
  chart:   <Icon d={<><path d="M3 3v18h18"/><path d="M7 14l4-4 4 3 5-7"/></>} />,
  inbox:   <Icon d={<><path d="M3 13l3-9h12l3 9"/><path d="M3 13v6h18v-6"/><path d="M7 13a5 5 0 0 0 10 0"/></>} />,
  archive: <Icon d={<><rect x="3" y="3" width="18" height="5" rx="1"/><path d="M5 8v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></>} />,
  search:  <Icon d={<><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></>} />,
  plus:    <Icon d="M12 5v14M5 12h14" />,
  filter:  <Icon d="M4 5h16l-6 8v6l-4-2v-4z" />,
  sort:    <Icon d={<><path d="M7 4v16M4 17l3 3 3-3"/><path d="M17 20V4M14 7l3-3 3 3"/></>} />,
  sun:     <Icon d={<><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></>} size={12} />,
  moon:    <Icon d="M21 13a9 9 0 1 1-9-10 7 7 0 0 0 9 10z" size={12} />,
  star:    <Icon d="M12 3l2.6 6 6.4.6-4.8 4.4 1.4 6.4L12 17l-5.6 3.4 1.4-6.4L3 9.6l6.4-.6z" />,
  arrow:   <Icon d="M5 12h14M13 6l6 6-6 6" />,
  link:    <Icon d="M10 14a4 4 0 0 0 5.6 0l3-3a4 4 0 0 0-5.6-5.6l-1 1M14 10a4 4 0 0 0-5.6 0l-3 3a4 4 0 0 0 5.6 5.6l1-1" />,
  check:   <Icon d="M5 12l4 4 10-10" />,
  cmd:     <Icon d={<><path d="M9 6V4.5a2.5 2.5 0 1 0-2.5 2.5H9z"/><path d="M9 18v1.5a2.5 2.5 0 1 1-2.5-2.5H9z"/><path d="M15 6V4.5a2.5 2.5 0 1 1 2.5 2.5H15z"/><path d="M15 18v1.5a2.5 2.5 0 1 0 2.5-2.5H15z"/><rect x="9" y="6" width="6" height="12"/></>} />,
  clock:   <Icon d={<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>} />,
  user:    <Icon d={<><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>} />,
  doc:     <Icon d={<><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></>} />,
  flag:    <Icon d={<><path d="M5 21V4"/><path d="M5 4h12l-2 4 2 4H5"/></>} />,
  users:   <Icon d={<><circle cx="9" cy="7" r="3"/><path d="M3 21a6 6 0 0 1 12 0"/><path d="M15.5 8a3 3 0 0 1 0 6M20 21a4 4 0 0 0-5-3.9"/></>} />,
  avatar:  <Icon d={<><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>} />,
};

// ============ Utilities ============
const Avatar = ({ author }) => {
  if (!author) return null;
  const initials = author.name.split(/[\s.]+/).filter(Boolean).map(s => s[0]).join("").slice(0, 2).toUpperCase();
  return <span className="avatar" style={{ background: author.color }}>{initials}</span>;
};

const StagePill = ({ stage, stages }) => {
  const s = stages.find(x => x.id === stage);
  if (!s) return null;
  return (
    <span className="pill" data-stage={stage}>
      <span className="dot"></span>
      {s.label}
    </span>
  );
};

const DecisionPill = ({ decision }) => {
  if (!decision) return <span className="cell-date">—</span>;
  const labels = { kill: "Killed", pivot: "Pivoted", scale: "Scaled" };
  return <span className="pill pill-decision" data-d={decision}>{labels[decision]}</span>;
};

const RiskDot = ({ risk }) => {
  const labels = { low: "Low", med: "Medium", high: "High" };
  return <span><span className={"risk-dot risk-" + risk}></span>{labels[risk]}</span>;
};

const formatDate = (s) => {
  const d = new Date(s);
  return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
};
const daysAgo = (s) => {
  const d = new Date(s);
  const diff = Math.floor((Date.now() - d.getTime()) / 86400000);
  if (diff <= 0) return "today";
  if (diff === 1) return "1d ago";
  if (diff < 30) return diff + "d ago";
  return Math.floor(diff / 30) + "mo ago";
};

// Compute delta good/bad
const metricDelta = (h) => {
  if (!h.current || h.current === "—") return { display: h.current || "—", className: "" };
  // try to parse % vs %, $ vs $, etc.
  const tNum = parseFloat((h.target || "").replace(/[^0-9.\-]/g, ""));
  const cNum = parseFloat((h.current || "").replace(/[^0-9.\-]/g, ""));
  if (isNaN(tNum) || isNaN(cNum)) return { display: h.current, className: "" };
  // For CPI: lower is better (≤). For retention/session: higher is better (≥).
  const isLowerBetter = (h.target || "").includes("≤") || /CPI/i.test(h.keyMetric || "");
  const good = isLowerBetter ? cNum <= tNum : cNum >= tNum;
  return { display: h.current, className: good ? "delta-good" : "delta-bad" };
};

window.PR = { Icon, I, Avatar, StagePill, DecisionPill, RiskDot, formatDate, daysAgo, metricDelta };