/* ============================================================
   Narabuzz Backoffice — Shared components & icons
   ============================================================ */

/* ---------- Icons (stroke, 24 grid) ---------- */
const ICONS = {
  dashboard: <><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>,
  clients: <><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M16 5.2a3 3 0 0 1 0 5.6"/><path d="M17.5 14.4A5.5 5.5 0 0 1 20.5 19.5"/></>,
  tour: <><path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/></>,
  sales: <><path d="M7 3h10l2 4v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7z"/><path d="M5 7h14"/><path d="M12 11v6M9.5 13.2h5M9.5 15.4h5"/></>,
  product: <><path d="M12 2.5 20.5 7v10L12 21.5 3.5 17V7z"/><path d="M3.5 7 12 11.5 20.5 7M12 11.5V21.5"/></>,
  invoice: <><path d="M6 2.5h8l4 4v15H6z"/><path d="M14 2.5v4h4"/><path d="M9 12h6M9 15.5h6M9 8.5h3"/></>,
  report: <><path d="M3 3v18h18"/><rect x="7" y="11" width="3" height="6" rx="1"/><rect x="12.5" y="7" width="3" height="10" rx="1"/><rect x="18" y="13" width="3" height="4" rx="1"/></>,
  settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 13.5a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 0 1-4 0v-.1a1.6 1.6 0 0 0-2.7-1.1l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0-1.1-2.7H4a2 2 0 0 1 0-4h.1a1.6 1.6 0 0 0 1.1-2.7l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 2.7-1.1V4a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8z"/></>,
  search: <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>,
  bell: <><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M10.3 21a2 2 0 0 0 3.4 0"/></>,
  menu: <path d="M4 7h16M4 12h16M4 17h16"/>,
  chevDown: <path d="m6 9 6 6 6-6"/>,
  chevRight: <path d="m9 6 6 6-6 6"/>,
  arrowRight: <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
  arrowLeft: <><path d="M19 12H5"/><path d="m11 18-6-6 6-6"/></>,
  plus: <><path d="M12 5v14M5 12h14"/></>,
  check: <path d="m5 12 5 5L20 7"/>,
  checkCircle: <><circle cx="12" cy="12" r="9"/><path d="m8.5 12 2.5 2.5 4.5-5"/></>,
  x: <path d="M6 6l12 12M18 6 6 18"/>,
  filter: <path d="M3 5h18l-7 8v6l-4-2v-4z"/>,
  download: <><path d="M12 3v12"/><path d="m7 11 5 5 5-5"/><path d="M5 20h14"/></>,
  upload: <><path d="M12 16V4"/><path d="m7 8 5-5 5 5"/><path d="M5 20h14"/></>,
  calendar: <><rect x="3" y="4.5" width="18" height="16" rx="2"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/></>,
  building: <><rect x="4" y="3" width="16" height="18" rx="1.5"/><path d="M9 8h2M13 8h2M9 12h2M13 12h2M9 16h6"/></>,
  mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.5 7 8.5 6 8.5-6"/></>,
  phone: <path d="M6.5 3h3l1.5 5-2 1.5a12 12 0 0 0 5 5l1.5-2 5 1.5v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.2 2 2 0 0 1 6.5 3z"/>,
  edit: <><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></>,
  external: <><path d="M14 4h6v6"/><path d="M20 4 10 14"/><path d="M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></>,
  sparkle: <path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/>,
  alert: <><path d="M12 3 2 20h20z"/><path d="M12 9v5M12 17.2v.2"/></>,
  lock: <><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></>,
  eye: <><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>,
  wallet: <><path d="M3 7a2 2 0 0 1 2-2h12v4"/><path d="M3 7v10a2 2 0 0 0 2 2h14a1 1 0 0 0 1-1v-3"/><path d="M21 11h-5a2 2 0 0 0 0 4h5z"/></>,
  scale: <><path d="M12 3v18M7 21h10"/><path d="M5 6h14M5 6 2.5 12a3.5 3.5 0 0 0 5 0zM19 6l2.5 6a3.5 3.5 0 0 1-5 0z"/></>,
  trending: <><path d="m3 16 5-5 4 3 7-8"/><path d="M16 6h4v4"/></>,
  more: <><circle cx="5" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="19" cy="12" r="1.4"/></>,
  clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></>,
  layers: <><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5M3 18l9 5 9-5" opacity=".5"/></>,
  link: <><path d="M9 14a4 4 0 0 0 6 0l2-2a4 4 0 0 0-6-6l-1 1"/><path d="M15 10a4 4 0 0 0-6 0l-2 2a4 4 0 0 0 6 6l1-1"/></>,
  pin: <><path d="M12 21s7-6.4 7-12a7 7 0 1 0-14 0c0 5.6 7 12 7 12z"/><circle cx="12" cy="9" r="2.5"/></>,
  doc: <><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4"/></>,
  refresh: <><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v4h-4"/></>,
  globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18"/></>,
  cart: <><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/><path d="M2 3h2.2l2.3 12.3a1.5 1.5 0 0 0 1.5 1.2h9.4a1.5 1.5 0 0 0 1.5-1.2L20.5 7H6"/></>,
};

function Icon({ name, size = 18, className = "", style = {}, stroke = 1.8 }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {ICONS[name] || null}
    </svg>
  );
}

/* ---------- Money ---------- */
function Money({ v, size, weight = 700, color, dim = false, sign = false, className = "" }) {
  const neg = v < 0;
  const num = Math.abs(Math.round(v)).toLocaleString("ja-JP");
  const s = { fontWeight: weight, fontVariantNumeric: "tabular-nums", letterSpacing: "-.01em", color: color || "inherit" };
  if (size) s.fontSize = size;
  return (
    <span className={"num " + className} style={s}>
      {sign && !neg ? "+" : ""}{neg ? "−" : ""}
      <span style={{ opacity: dim ? .5 : .55, fontWeight: weight, marginRight: 1 }}>¥</span>{num}
    </span>
  );
}

/* ---------- Avatar ---------- */
function Avatar({ name, color = "#888", size = 36, square = false }) {
  const ch = (name || "?").trim().slice(0, 1);
  return (
    <div className="ava" style={{ width: size, height: size, background: color, fontSize: size * 0.42, borderRadius: square ? size * 0.28 : "50%" }}>{ch}</div>
  );
}

/* ---------- Badge / status ---------- */
const STATUS = {
  open:    { cls: "prog",  label: "進行中" },
  pending: { cls: "pend",  label: "精算待ち" },
  settled: { cls: "done",  label: "精算済" },
  active:  { cls: "done",  label: "取引中" },
  prospect:{ cls: "draft", label: "商談中" },
  paid:    { cls: "done",  label: "入金済" },
  sent:    { cls: "prog",  label: "送付済" },
  draft:   { cls: "draft", label: "下書き" },
};
function StatusBadge({ status, dot = true }) {
  const s = STATUS[status] || { cls: "draft", label: status };
  return <span className={"badge " + s.cls}>{dot && <span className="bdot" style={{ background: "currentColor" }} />}{s.label}</span>;
}

/* ---------- Biz chip ---------- */
function BizChip({ biz }) {
  const b = window.DB.businessTypes[biz];
  if (!b) return null;
  return <span className="chip"><span className="cdot" style={{ background: b.color }} />{b.label}</span>;
}
function BizDot({ biz, size = 9 }) {
  const b = window.DB.businessTypes[biz];
  return <span className="bizdot" style={{ background: b ? b.color : "#ccc", width: size, height: size }} />;
}

/* ---------- KPI card ---------- */
function KPI({ label, icon, value, accent, sub, subColor, big = false, size }) {
  return (
    <div className="kpi">
      {accent && <span className="kbar-l" style={{ background: accent }} />}
      <div className="klabel">{icon && <Icon name={icon} size={15} style={{ color: accent || "var(--ink-3)" }} />}{label}</div>
      <div className="kval num" style={{ color: accent || "var(--ink)", fontSize: size || (big ? 34 : 30) }}>
        <span className="kyen">¥</span>{Math.round(value).toLocaleString("ja-JP")}
      </div>
      {sub && <div className="ksub" style={{ color: subColor || "var(--ink-3)" }}>{sub}</div>}
    </div>
  );
}

/* ---------- Trend bars (held vs confirmed) ---------- */
function TrendChart({ data, max }) {
  const top = max || Math.max(...data.map((d) => d.held + d.confirmed)) * 1.08;
  return (
    <div className="row" style={{ alignItems: "flex-end", gap: 14, height: 168, padding: "0 4px" }}>
      {data.map((d, i) => {
        const total = d.held + d.confirmed;
        const h = (total / top) * 100;
        const hHeld = total ? (d.held / total) * 100 : 0;
        return (
          <div key={i} className="col" style={{ flex: 1, alignItems: "center", gap: 8, height: "100%", justifyContent: "flex-end" }}>
            <div style={{ width: "100%", maxWidth: 38, height: `${h}%`, display: "flex", flexDirection: "column", borderRadius: 7, overflow: "hidden", minHeight: 6 }}>
              <div style={{ height: `${hHeld}%`, background: "var(--deposit)" }} />
              <div style={{ height: `${100 - hHeld}%`, background: "var(--revenue)" }} />
            </div>
            <span style={{ fontSize: 11, color: "var(--ink-3)", fontWeight: 600 }}>{d.m}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ---------- Section header ---------- */
function SectionHead({ title, sub, children }) {
  return (
    <div className="row" style={{ justifyContent: "space-between", marginBottom: 14 }}>
      <div>
        <div className="row gap8"><h3 style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{title}</h3></div>
        {sub && <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>{sub}</div>}
      </div>
      {children && <div className="row gap8">{children}</div>}
    </div>
  );
}

/* ---------- Modal shell ---------- */
function Modal({ title, sub, onClose, children, foot, wide }) {
  return (
    <div className="scrim" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={wide ? { maxWidth: 680 } : null}>
        <div className="modal-head">
          <div>
            <h2>{title}</h2>
            {sub && <p>{sub}</p>}
          </div>
          <button className="x-btn" onClick={onClose}><Icon name="x" size={17} /></button>
        </div>
        <div className="modal-body">{children}</div>
        {foot && <div className="modal-foot">{foot}</div>}
      </div>
    </div>
  );
}

/* ---------- Mascot ---------- */
function Mascot({ size = 120, pose = "main", style = {} }) {
  const src = pose === "front" ? "assets/penguin_front.png" : pose === "back" ? "assets/penguin_back.png" : "assets/penguin_main.png";
  return <img src={src} width={size} height={size} alt="" style={{ display: "block", objectFit: "contain", ...style }} />;
}

Object.assign(window, {
  Icon, Money, Avatar, StatusBadge, BizChip, BizDot, KPI, TrendChart, SectionHead, Modal, Mascot, STATUS,
});