// Reusable UI primitives
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const NicheTag = ({ niche, size }) => {
  if (!niche || !NICHES[niche]) return null;
  const n = NICHES[niche];
  return <span className={`tag ${n.cls}`} style={size === "sm" ? { fontSize: 10 } : null}>{n.label}</span>;
};

const NicheSelect = ({ value, onChange }) => (
  <select className="input" value={value || ""} onChange={e => onChange(e.target.value)}>
    <option value="">No tag</option>
    {Object.entries(NICHES).map(([k, v]) => (
      <option key={k} value={k}>{v.label}</option>
    ))}
  </select>
);

const StatusPill = ({ status }) => {
  const cls = ({
    "Draft": "pill-draft", "Ready for Approval": "pill-ready",
    "Approved": "pill-approved", "Live": "pill-live"
  })[status] || "pill-draft";
  return <span className={`pill ${cls}`}>{status}</span>;
};

const FormatBadge = ({ format }) => {
  const ico = format === "Video" ? "▶" : format === "Carousel" ? "◻︎" : "●";
  return <span className="fmt">{ico} {format}</span>;
};

// Icon set — simple stroked line icons matching warm minimalist feel
const Icon = ({ name, size = 18, stroke = 1.6 }) => {
  const paths = {
    home:      <><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/></>,
    planner:   <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></>,
    funnel:    <><path d="M3 5h18l-7 9v6l-4-2v-4z"/></>,
    deals:     <><path d="M20 7h-4V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2H4v13a1 1 0 001 1h14a1 1 0 001-1V7zM10 5h4v2h-4V5z"/></>,
    revenue:   <><path d="M3 19l5-6 4 4 8-10"/><path d="M15 7h5v5"/></>,
    backlog:   <><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/></>,
    plus:      <><path d="M12 5v14M5 12h14"/></>,
    check:     <><path d="M20 6L9 17l-5-5"/></>,
    x:         <><path d="M6 6l12 12M18 6L6 18"/></>,
    chev:      <><path d="M9 18l6-6-6-6"/></>,
    chevd:     <><path d="M6 9l6 6 6-6"/></>,
    star:      <><path d="M12 3l2.6 6.3L21 10l-5 4.5L17.3 21 12 17.8 6.7 21 8 14.5 3 10l6.4-.7z"/></>,
    lock:      <><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></>,
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.9" fill="currentColor"/></>,
    link:      <><path d="M10 14a5 5 0 007.07 0l3-3a5 5 0 00-7.07-7.07l-1.5 1.5"/><path d="M14 10a5 5 0 00-7.07 0l-3 3a5 5 0 007.07 7.07l1.5-1.5"/></>,
    dm:        <><path d="M21 12a9 9 0 11-4-7.5L21 3l-1.5 4A9 9 0 0121 12z"/></>,
    cart:      <><circle cx="9" cy="20" r="1.5"/><circle cx="18" cy="20" r="1.5"/><path d="M3 4h3l2.5 11h11l2.5-8H7"/></>,
    sparkle:   <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6"/></>,
    bell:      <><path d="M6 8a6 6 0 0112 0c0 7 3 8 3 8H3s3-1 3-8M10 20a2 2 0 004 0"/></>,
    menu:      <><path d="M4 7h16M4 12h16M4 17h16"/></>,
    at:        <><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 006 0V12a10 10 0 10-4 8"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
};

Object.assign(window, { NicheTag, NicheSelect, StatusPill, FormatBadge, Icon });