/* global React */
// Shared icons + UI primitives for Content Radar
// All icons follow Lucide stroke conventions (2px stroke, currentColor)

const Icon = ({ d, size = 16, stroke = 2, fill = "none", children, style }) => (
  React.createElement("svg", {
    width: size, height: size, viewBox: "0 0 24 24",
    fill, stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round",
    style,
  }, children || (d && React.createElement("path", { d })))
);

const Icons = {
  Inbox: (p) => <Icon {...p}><path d="M22 12h-6l-2 3h-4l-2-3H2" /><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z" /></Icon>,
  Doc:   (p) => <Icon {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /><path d="M9 13h6" /><path d="M9 17h4" /></Icon>,
  Send:  (p) => <Icon {...p}><path d="M22 2 11 13" /><path d="m22 2-7 20-4-9-9-4 20-7Z" /></Icon>,
  Settings: (p) => <Icon {...p}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" /></Icon>,
  Plus:  (p) => <Icon {...p}><path d="M12 5v14" /><path d="M5 12h14" /></Icon>,
  Check: (p) => <Icon {...p}><path d="M20 6 9 17l-5-5" /></Icon>,
  X:     (p) => <Icon {...p}><path d="M18 6 6 18" /><path d="m6 6 12 12" /></Icon>,
  Sun:   (p) => <Icon {...p}><circle cx="12" cy="12" r="4" /><path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" /><path d="M2 12h2" /><path d="M20 12h2" /><path d="m4.93 19.07 1.41-1.41" /><path d="m17.66 6.34 1.41-1.41" /></Icon>,
  Moon:  (p) => <Icon {...p}><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z" /></Icon>,
  ChevronDown: (p) => <Icon {...p}><path d="m6 9 6 6 6-6" /></Icon>,
  ChevronUp:   (p) => <Icon {...p}><path d="m18 15-6-6-6 6" /></Icon>,
  ChevronRight:(p) => <Icon {...p}><path d="m9 18 6-6-6-6" /></Icon>,
  ChevronLeft: (p) => <Icon {...p}><path d="m15 18-6-6 6-6" /></Icon>,
  Refresh: (p) => <Icon {...p}><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M3 21v-5h5" /></Icon>,
  Edit:  (p) => <Icon {...p}><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /></Icon>,
  Sparkles: (p) => <Icon {...p}><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.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /></Icon>,
  Copy:  (p) => <Icon {...p}><rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></Icon>,
  Trash: (p) => <Icon {...p}><path d="M3 6h18" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" /><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></Icon>,
  AlertTriangle: (p) => <Icon {...p}><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /><path d="M12 9v4" /><path d="M12 17h.01" /></Icon>,
  Info:  (p) => <Icon {...p}><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></Icon>,
  Search: (p) => <Icon {...p}><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></Icon>,
  Link: (p) => <Icon {...p}><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.71" /></Icon>,
  Stop: (p) => <Icon {...p} fill="currentColor" stroke="none"><rect x="6" y="6" width="12" height="12" rx="1" /></Icon>,
  Spinner: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ animation: "cr-spin 0.9s linear infinite" }}>
      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeDasharray="14 50" />
    </svg>
  ),
  Clipboard: (p) => <Icon {...p}><rect x="8" y="2" width="8" height="4" rx="1" /><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" /></Icon>,
  Branch: (p) => <Icon {...p}><line x1="6" y1="3" x2="6" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" /></Icon>,
  Dot: ({ color = "currentColor", size = 6 }) => (
    <span style={{ display: "inline-block", width: size, height: size, borderRadius: 999, background: color }} />
  ),
};

// Inject keyframes once
if (typeof document !== "undefined" && !document.getElementById("cr-keyframes")) {
  const style = document.createElement("style");
  style.id = "cr-keyframes";
  style.textContent = `@keyframes cr-spin { to { transform: rotate(360deg); } }`;
  document.head.appendChild(style);
}

// ---- Buttons ----
const Btn = ({ kind = "secondary", icon, children, onClick, disabled, size, type, title }) => {
  const cls = ["btn"];
  cls.push(`btn--${kind}`);
  if (size) cls.push(`btn--${size}`);
  if (!children && icon) cls.push("btn--icon");
  return (
    <button type={type || "button"} className={cls.join(" ")} onClick={onClick} disabled={disabled} title={title}>
      {icon}
      {children}
    </button>
  );
};

// ---- Tag / Badge ----
const Tag = ({ tone = "default", children, icon }) => {
  const cls = ["tag"];
  if (tone !== "default") cls.push(`tag--${tone}`);
  return <span className={cls.join(" ")}>{icon}{children}</span>;
};

// ---- Empty state ----
const EmptyState = ({ icon, title, body, actions }) => (
  <div className="empty-state">
    <div className="empty-state__icon">{icon}</div>
    <div className="empty-state__title">{title}</div>
    <div className="empty-state__body">{body}</div>
    {actions ? <div className="empty-state__actions">{actions}</div> : null}
  </div>
);

// ---- Modal ----
const Modal = ({ title, onClose, children, footer, width }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" style={width ? { width } : null} onClick={(e) => e.stopPropagation()}>
        <div className="modal__header">
          <h3 className="modal__title">{title}</h3>
          <button className="modal__close" onClick={onClose} aria-label="Close"><Icons.X /></button>
        </div>
        <div className="modal__body">{children}</div>
        {footer ? <div className="modal__footer">{footer}</div> : null}
      </div>
    </div>
  );
};

// ---- Toast ----
const Toast = ({ message, hash }) => (
  <div className="toast-host">
    <div className="toast">
      <Icons.Check size={14} />
      <span>{message}</span>
      {hash ? <span className="toast__hash">{hash}</span> : null}
    </div>
  </div>
);

// ---- Source favicon-style chip ----
const SourceChip = ({ domain }) => {
  const letter = domain.replace(/^www\./, "")[0]?.toUpperCase() || "?";
  return (
    <span className="topic-card__source">
      <span className="topic-card__source-icon">{letter}</span>
      {domain}
    </span>
  );
};

// ---- Time formatting ----
const formatRelative = (ts) => {
  const diff = Date.now() - ts;
  const m = Math.round(diff / 60_000);
  if (m < 1) return "только что";
  if (m < 60) return `${m} мин назад`;
  const h = Math.round(m / 60);
  if (h < 24) return `${h} ${h === 1 ? "час" : h < 5 ? "часа" : "часов"} назад`;
  const d = Math.round(h / 24);
  return `${d} ${d === 1 ? "день" : d < 5 ? "дня" : "дней"} назад`;
};

window.CR_UI = { Icons, Btn, Tag, EmptyState, Modal, Toast, SourceChip, formatRelative };