/* eslint-disable */
// Shared UI primitives specific to this prototype (status pills, SOW lozenges, etc.)

(function () {
const { Icon, Badge } = window;
const { useState } = React;

// SOW state -> visual lozenge
const SOW_STATE_META = {
  "active":            { color: "green",   dot: true,  label: "Active" },
  "expiring":          { color: "yellow",  dot: true,  label: "Expiring soon" },
  "expired":           { color: "red",     dot: true,  label: "Expired" },
  "pending-signature": { color: "blue",    dot: true,  label: "Awaiting signature" },
  "in-progress":       { color: "blue",    dot: true,  label: "In progress" },
  "not-started":       { color: "neutral", dot: false, label: "Not started" },
  "signed":            { color: "green",   dot: true,  label: "Signed" },
  "open-ended":        { color: "purple",  dot: true,  label: "Open-ended" },
};
function SOWStatePill({ state }) {
  const meta = SOW_STATE_META[state] || SOW_STATE_META["not-started"];
  return <Badge color={meta.color} dot={meta.dot}>{meta.label}</Badge>;
}

// Big colored callout card — used for expiration warnings, etc.
function Callout({ tone = "warning", icon, title, children, action }) {
  const toneMap = {
    warning: { bg: "var(--yellow-20)", border: "var(--yellow-100)" },
    danger:  { bg: "var(--red-20)",    border: "var(--red-100)" },
    info:    { bg: "var(--blue-20)",   border: "var(--blue-100)" },
    success: { bg: "var(--green-20)",  border: "var(--green-100)" },
    purple:  { bg: "var(--purple-20)", border: "var(--purple-100)" },
  };
  const t = toneMap[tone];
  return (
    <div style={{
      display: "flex", gap: 14, alignItems: "flex-start",
      padding: 16, borderRadius: 12,
      border: "2px solid var(--neutral-100)",
      background: t.bg,
      boxShadow: "var(--shadow-sm)",
      fontFamily: "var(--font-body)",
    }}>
      {icon && (
        <div style={{
          width: 40, height: 40, borderRadius: 100,
          border: "2px solid var(--neutral-100)",
          background: "var(--neutral-10)",
          display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0,
        }}>
          <Icon name={icon} size={20} />
        </div>
      )}
      <div style={{ flex: 1, minWidth: 0 }}>
        {title && <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 4, color: "var(--neutral-100)" }}>{title}</div>}
        <div style={{ fontSize: 14, color: "var(--neutral-90)", lineHeight: 1.5 }}>{children}</div>
      </div>
      {action && <div style={{ flexShrink: 0 }}>{action}</div>}
    </div>
  );
}

// Standard page header used inside each persona's chrome
function PageHeader({ eyebrow, title, subtitle, actions }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 24, gap: 16, flexWrap: "wrap" }}>
      <div>
        {eyebrow && <div className="subtitle-1" style={{ color: "var(--neutral-60)", marginBottom: 4 }}>{eyebrow}</div>}
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 700, lineHeight: 1.1, margin: 0, color: "var(--neutral-100)" }}>{title}</h1>
        {subtitle && <div style={{ fontSize: 14, color: "var(--neutral-70)", marginTop: 6, maxWidth: 720 }}>{subtitle}</div>}
      </div>
      {actions && <div style={{ display: "flex", gap: 8, alignItems: "center" }}>{actions}</div>}
    </div>
  );
}

// Section heading used inside content panels
function SectionHeader({ title, hint, action }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 12, marginBottom: 12 }}>
      <div>
        <div style={{ fontFamily: "var(--font-headline)", fontSize: 18, fontWeight: 700, color: "var(--neutral-100)" }}>{title}</div>
        {hint && <div style={{ fontSize: 13, color: "var(--neutral-70)", marginTop: 2 }}>{hint}</div>}
      </div>
      {action}
    </div>
  );
}

// Avatar used in the persona switcher
function Persona({ name, role, color, size = 36 }) {
  const initials = name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: 100,
      border: "2px solid var(--neutral-100)",
      background: color, color: "var(--neutral-100)",
      display: "flex", alignItems: "center", justifyContent: "center",
      fontWeight: 700, fontSize: size * 0.36, flexShrink: 0,
    }}>{initials}</div>
  );
}

// "Key/value" stat block used on dashboards
function Stat({ label, value, sub, tone = "neutral" }) {
  const toneMap = {
    neutral: "var(--neutral-10)",
    warning: "var(--yellow-20)",
    danger:  "var(--red-20)",
    info:    "var(--blue-20)",
    success: "var(--green-20)",
  };
  return (
    <div style={{
      flex: 1, minWidth: 0,
      padding: "16px 18px",
      border: "2px solid var(--neutral-100)", borderRadius: 12,
      background: toneMap[tone],
      boxShadow: "var(--shadow-sm)",
    }}>
      <div className="subtitle-1" style={{ color: "var(--neutral-80)", fontSize: 11 }}>{label}</div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 700, lineHeight: 1, marginTop: 6, color: "var(--neutral-100)", fontVariantNumeric: "tabular-nums" }}>{value}</div>
      {sub && <div style={{ fontSize: 12, color: "var(--neutral-70)", marginTop: 6 }}>{sub}</div>}
    </div>
  );
}

// Snake_case -> Title Case helper (the spec calls this out specifically)
function snakeToTitle(s) {
  return s.split("_").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
}

// "Hard" tab pill used inside content panels
function Pill({ label, count, active, onClick, color }) {
  const colorMap = {
    yellow: { bg: "var(--yellow-40)", border: "var(--neutral-100)" },
    green:  { bg: "var(--green-40)",  border: "var(--neutral-100)" },
    blue:   { bg: "var(--blue-40)",   border: "var(--neutral-100)" },
    purple: { bg: "var(--purple-40)", border: "var(--neutral-100)" },
    red:    { bg: "var(--red-40)",    border: "var(--neutral-100)" },
  };
  const c = colorMap[color] || { bg: "var(--neutral-20)", border: "var(--neutral-100)" };
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "6px 14px", borderRadius: 100,
      border: active ? `2px solid ${c.border}` : "2px solid var(--neutral-100)",
      background: active ? c.bg : "var(--neutral-10)",
      boxShadow: active ? "var(--shadow-btn-sm)" : "none",
      fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600,
      color: "var(--neutral-100)", cursor: "pointer",
    }}>
      {label}
      {count != null && <span style={{
        background: active ? "var(--neutral-100)" : "var(--neutral-20)",
        color: active ? "var(--neutral-10)" : "var(--neutral-100)",
        borderRadius: 100, padding: "0 6px", minWidth: 20, textAlign: "center", fontSize: 11,
      }}>{count}</span>}
    </button>
  );
}

// Days-until-expiration ring (signature visualization for SOW lifecycle)
function ExpiryRing({ days, total = 180, size = 64 }) {
  const r = size / 2 - 6;
  const c = 2 * Math.PI * r;
  const remaining = Math.max(0, Math.min(1, days / total));
  const offset = c * (1 - remaining);
  const color = days < 0 ? "var(--red-60)"
              : days <= 14 ? "var(--red-60)"
              : days <= 30 ? "var(--yellow-60)"
              : "var(--green-60)";
  return (
    <div style={{ position: "relative", width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--neutral-20)" strokeWidth={4} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={4}
                strokeDasharray={c} strokeDashoffset={offset}
                transform={`rotate(-90 ${size/2} ${size/2})`} strokeLinecap="round" />
      </svg>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--font-body)", lineHeight: 1,
      }}>
        <div style={{ fontWeight: 700, fontSize: size * 0.28, fontVariantNumeric: "tabular-nums", color: "var(--neutral-100)" }}>
          {days < 0 ? Math.abs(days) : days}
        </div>
        <div style={{ fontSize: 9, fontWeight: 600, color: "var(--neutral-70)", textTransform: "uppercase", letterSpacing: "0.05em", marginTop: 2 }}>
          {days < 0 ? "days late" : "days"}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SOWStatePill, Callout, PageHeader, SectionHeader, Persona, Stat, snakeToTitle, Pill, ExpiryRing, SOW_STATE_META });

})();