// Icon system with multiple visual packs.
// content.jsx stores role keys (counsel, diagnosis, brand, ai, clarity, judgment, direction, outcome)
// and the active pack is selected via tweaks → IconPackContext.

const IconPackContext = React.createContext("lucide");

// Lucide-style line icons (24x24, currentColor, round caps).
const LUCIDE = {
  counsel: ( // compass
    <>
      <circle cx="12" cy="12" r="10" />
      <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
    </>
  ),
  diagnosis: ( // search-check
    <>
      <path d="m8 11 2 2 4-4" />
      <circle cx="11" cy="11" r="8" />
      <path d="m21 21-4.3-4.3" />
    </>
  ),
  brand: ( // layers
    <>
      <path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" />
      <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
      <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
    </>
  ),
  ai: ( // sparkles
    <>
      <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
      <path d="M20 3v4" />
      <path d="M22 5h-4" />
      <path d="M4 17v2" />
      <path d="M5 18H3" />
    </>
  ),
  clarity: ( // eye
    <>
      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
      <circle cx="12" cy="12" r="3" />
    </>
  ),
  judgment: ( // scale
    <>
      <path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" />
      <path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" />
      <path d="M7 21h10" />
      <path d="M12 3v18" />
      <path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" />
    </>
  ),
  direction: ( // arrow-right
    <>
      <path d="M5 12h14" />
      <path d="m12 5 7 7-7 7" />
    </>
  ),
  outcome: ( // target
    <>
      <circle cx="12" cy="12" r="10" />
      <circle cx="12" cy="12" r="6" />
      <circle cx="12" cy="12" r="2" />
    </>
  ),
};

// Solid / filled versions
const SOLID = {
  counsel: (
    <>
      <circle cx="12" cy="12" r="10" fill="currentColor" stroke="none" />
      <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" fill="rgba(255,255,255,0.85)" stroke="none" />
    </>
  ),
  diagnosis: (
    <>
      <circle cx="11" cy="11" r="8" fill="currentColor" stroke="none" />
      <path d="m8 11 2 2 4-4" stroke="rgba(255,255,255,0.95)" fill="none" strokeWidth="2" />
      <path d="m21 21-4.3-4.3" stroke="currentColor" fill="none" strokeWidth="2.5" />
    </>
  ),
  brand: (
    <>
      <path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" fill="currentColor" stroke="none" />
      <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" fill="none" stroke="currentColor" strokeWidth="2" />
    </>
  ),
  ai: (
    <>
      <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" fill="currentColor" stroke="none" />
      <circle cx="20" cy="5" r="1.5" fill="currentColor" stroke="none" />
      <circle cx="4" cy="18" r="1" fill="currentColor" stroke="none" />
    </>
  ),
  clarity: (
    <>
      <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" fill="currentColor" stroke="none" />
      <circle cx="12" cy="12" r="3" fill="rgba(255,255,255,0.9)" stroke="none" />
    </>
  ),
  judgment: (
    <>
      <path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" fill="currentColor" stroke="none" />
      <path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z" fill="currentColor" stroke="none" />
      <path d="M7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" stroke="currentColor" strokeWidth="2.2" fill="none" />
    </>
  ),
  direction: (
    <>
      <path d="M5 12h14m-7-7 7 7-7 7" stroke="currentColor" strokeWidth="3" fill="none" />
    </>
  ),
  outcome: (
    <>
      <circle cx="12" cy="12" r="10" fill="currentColor" stroke="none" />
      <circle cx="12" cy="12" r="6" fill="rgba(255,255,255,0.5)" stroke="none" />
      <circle cx="12" cy="12" r="2" fill="rgba(255,255,255,1)" stroke="none" />
    </>
  ),
};

// Geometric / Bauhaus — pure abstract shapes, one form per role
const GEOMETRIC = {
  counsel: <circle cx="12" cy="12" r="9" />,
  diagnosis: <><circle cx="12" cy="12" r="9" /><path d="M12 3 v18" /></>,
  brand: <rect x="4" y="4" width="16" height="16" transform="rotate(45 12 12)" />,
  ai: <polygon points="12,3 21,20 3,20" />,
  clarity: <circle cx="12" cy="12" r="4" fill="currentColor" />,
  judgment: <><path d="M3 12h18" /><path d="M3 16h18" /></>,
  direction: <polygon points="3,12 18,12 14,7 21,12 14,17 18,12" fill="currentColor" stroke="none" />,
  outcome: <polygon points="12,3 21,8 21,16 12,21 3,16 3,8" />,
};

// Heavy stroke — same shapes as Lucide but strokeWidth 2.5
const HEAVY = LUCIDE; // shape data identical, strokeWidth controlled by pack config

// Roman numerals (text-based pack, rendered as text not SVG)
const ROMAN = {
  counsel: "I",
  diagnosis: "II",
  brand: "III",
  ai: "IV",
  clarity: "·",
  judgment: "‖",
  direction: "→",
  outcome: "◉",
};

// Alchemical Unicode glyphs (the original brand vibe)
const ALCHEMY = {
  counsel: "☉",
  diagnosis: "☿",
  brand: "🜔",
  ai: "🜂",
  clarity: "◎",
  judgment: "☩",
  direction: "↗",
  outcome: "⊕",
};

const ICON_PACKS = {
  lucide: { kind: "svg", data: LUCIDE, strokeWidth: 1.5 },
  solid: { kind: "svg", data: SOLID, strokeWidth: 0 },
  heavy: { kind: "svg", data: HEAVY, strokeWidth: 2.5 },
  geometric: { kind: "svg", data: GEOMETRIC, strokeWidth: 1.5 },
  roman: { kind: "text", data: ROMAN, font: "var(--fa-serif)", italic: true },
  alchemy: { kind: "text", data: ALCHEMY, font: "var(--fa-serif)", italic: false },
};

const ICON_PACK_LABELS = {
  lucide: "Línea moderna",
  solid: "Sólido",
  heavy: "Trazo grueso",
  geometric: "Geométrico",
  roman: "Numeral romano",
  alchemy: "Alquímico",
};

const Icon = ({ name, size = 36 }) => {
  const packKey = React.useContext(IconPackContext) || "lucide";
  const pack = ICON_PACKS[packKey] || ICON_PACKS.lucide;
  const data = pack.data[name];
  if (data === undefined) return <span>{name}</span>;

  if (pack.kind === "text") {
    return (
      <span
        style={{
          fontFamily: pack.font,
          fontStyle: pack.italic ? "italic" : "normal",
          fontSize: size,
          lineHeight: 1,
          display: "inline-block",
          letterSpacing: "-0.02em",
        }}
        aria-hidden="true"
      >
        {data}
      </span>
    );
  }

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={pack.strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      {data}
    </svg>
  );
};

window.Icon = Icon;
window.IconPackContext = IconPackContext;
window.ICON_PACKS = ICON_PACKS;
window.ICON_PACK_LABELS = ICON_PACK_LABELS;
