// ui.jsx — Small reusable UI primitives

const { useState, useEffect, useRef, useMemo } = React;

// --- Card ---
const Card = ({ pad = "md", className = "", style = {}, children, title, action, ...rest }) => {
  const padClass = pad === "sm" ? "card-pad-sm" : pad === "lg" ? "card-pad-lg" : "card-pad";
  return (
    <div className={`card ${padClass} ${className}`} style={style} {...rest}>
      {title && (
        <div className="card-title-row">
          <h3 className="card-title"><span className="dot"></span>{title}</h3>
          {action}
        </div>
      )}
      {children}
    </div>
  );
};

// --- Pill / Badge ---
const Pill = ({ tone = "default", children, dot, className = "" }) => {
  const toneClass = {
    good: "pill-good", watch: "pill-watch", alert: "pill-alert",
    info: "pill-info", skin: "pill-skin", outline: "pill-outline",
  }[tone] || "";
  return (
    <span className={`pill ${toneClass} ${className}`}>
      {dot && <span className="dot"></span>}
      {children}
    </span>
  );
};

// --- Stat block ---
const Stat = ({ label, value, delta, deltaSign = "up", sub, mini }) => (
  <div>
    <div className="stat-label">{label}</div>
    <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 6 }}>
      <span className="stat-value" style={{ fontSize: mini ? 20 : 28 }}>{value}</span>
      {delta && <span className={`stat-delta ${deltaSign}`}>{deltaSign === "up" ? "▲" : "▼"} {delta}</span>}
    </div>
    {sub && <div className="stat-sub">{sub}</div>}
  </div>
);

// --- Stepper for multi-step flows ---
const Stepper = ({ steps, current }) => (
  <div className="stepper" style={{ width: "100%", maxWidth: 460 }}>
    {steps.map((s, i) => (
      <div key={i} className={`seg ${i < current ? "done" : i === current ? "active" : ""}`} title={s} />
    ))}
  </div>
);

// --- Avatar ---
const Avatar = ({ initials, size = 36, color = "#1D1D1F", textColor = "#FFF" }) => (
  <div style={{
    width: size, height: size, borderRadius: "50%",
    background: color, color: textColor,
    display: "grid", placeItems: "center",
    fontWeight: 600, fontSize: size * 0.4, letterSpacing: "-0.02em",
    fontFamily: "var(--font-num)",
    flexShrink: 0,
  }}>{initials}</div>
);

// --- Tabs ---
const Tabs = ({ tabs, value, onChange }) => (
  <div className="tabs">
    {tabs.map(t => (
      <button key={t.v || t} className={`tab ${(t.v || t) === value ? "active" : ""}`}
              onClick={() => onChange(t.v || t)}>{t.l || t}</button>
    ))}
  </div>
);

// --- Chip group (multi-select chips) ---
const ChipGroup = ({ options, value = [], onChange, single }) => (
  <div className="chip-group">
    {options.map(opt => {
      const v = typeof opt === "string" ? opt : opt.v;
      const l = typeof opt === "string" ? opt : opt.l;
      const ico = typeof opt === "object" ? opt.icon : null;
      const selected = single ? value === v : value.includes(v);
      return (
        <button key={v} className={`chip ${selected ? "selected" : ""}`}
                onClick={() => {
                  if (single) onChange(v);
                  else onChange(selected ? value.filter(x => x !== v) : [...value, v]);
                }}>
          {ico && <span style={{ opacity: 0.7, fontFamily: "var(--font-mono)", fontSize: 11 }}>{ico}</span>}
          {l}
        </button>
      );
    })}
  </div>
);

// --- Loader spinner ---
const Spinner = ({ size = 16 }) => (
  <svg className="spin" width={size} height={size} viewBox="0 0 24 24" fill="none">
    <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.18" strokeWidth="2.5" />
    <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
  </svg>
);

// --- Verdict pill ---
const VerdictPill = ({ verdict, note }) => {
  const tone = verdict === "good" ? "good" : verdict === "alert" ? "alert" : "watch";
  const label = verdict === "good" ? "양호" : verdict === "alert" ? "주의" : "관찰";
  return <Pill tone={tone} dot>{note || label}</Pill>;
};

// --- KRW formatter ---
const krw = (n) => {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`;
  if (n >= 10_000) return `${(n / 10_000).toFixed(0)}만`;
  return n.toLocaleString();
};
const krwFull = (n) => "₩" + n.toLocaleString();

Object.assign(window, {
  Card, Pill, Stat, Stepper, Avatar, Tabs, ChipGroup, Spinner, VerdictPill, krw, krwFull,
});