/* global React */
const { useState } = React;

/* Lucide icon renderer — pulls from window.lucideStatic if needed, falls back to <i data-lucide> */
function Icon({ name, size = 18, stroke = 1.75, className = "" }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = "";
      const i = document.createElement("i");
      i.setAttribute("data-lucide", name);
      i.style.width = size + "px";
      i.style.height = size + "px";
      ref.current.appendChild(i);
      window.lucide.createIcons({ attrs: { "stroke-width": stroke, width: size, height: size } });
    }
  }, [name, size, stroke]);
  return <span ref={ref} className={"icon " + className} style={{ display: "inline-flex", width: size, height: size }} />;
}

function Avatar({ name, color }) {
  const initials = name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
  return <div className="av" style={color ? { background: color.bg, color: color.fg } : null}>{initials}</div>;
}

function Chip({ kind = "default", children, dot = true }) {
  const cls = "chip " + (kind !== "default" ? "chip-" + kind : "");
  return <span className={cls}>{dot && kind !== "brand" && kind !== "default" ? <span className="dot" /> : null}{children}</span>;
}

function Button({ variant = "primary", size, icon, children, onClick }) {
  const cls = ["btn", "btn-" + variant, size === "sm" ? "btn-sm" : ""].join(" ");
  return (
    <button className={cls} onClick={onClick}>
      {icon ? <Icon name={icon} size={14} stroke={2} /> : null}
      {children}
    </button>
  );
}

function KPI({ label, value, delta, deltaDir = "up" }) {
  return (
    <div className="kpi">
      <div className="lbl">{label}</div>
      <div className="val">{value}</div>
      {delta ? <div className={"delta " + (deltaDir === "down" ? "down" : "")}>{deltaDir === "up" ? "▲" : "▼"} {delta}</div> : null}
    </div>
  );
}

function Pagination({ page, pages, total, limit, onPage }) {
  if (!pages || pages <= 1) return null;
  const from = (page - 1) * limit + 1;
  const to   = Math.min(page * limit, total);

  function pageNums() {
    if (pages <= 7) return Array.from({ length: pages }, (_, i) => i + 1);
    const s = new Set([1, pages, page, page - 1, page + 1]);
    return [...s].filter(n => n >= 1 && n <= pages).sort((a, b) => a - b);
  }

  const base = {
    minWidth: 32, height: 32, borderRadius: 6, border: "1px solid var(--border-subtle)",
    background: "#fff", cursor: "pointer", fontFamily: "inherit",
    fontSize: 13, display: "inline-flex", alignItems: "center", justifyContent: "center",
    padding: "0 8px",
  };

  const nums = pageNums();
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 16px", borderTop: "1px solid var(--border-subtle)", background: "var(--ink-50)", borderRadius: "0 0 10px 10px" }}>
      <span style={{ fontSize: 12.5, color: "var(--fg-3)" }}>Showing {from}–{to} of {total}</span>
      <div style={{ display: "flex", gap: 4, alignItems: "center" }}>
        <button style={{ ...base, color: page === 1 ? "var(--fg-4)" : "var(--fg-1)" }} disabled={page === 1} onClick={() => onPage(page - 1)}>
          <Icon name="chevron-left" size={14} />
        </button>
        {nums.map((n, i) => (
          <React.Fragment key={n}>
            {nums[i - 1] && n - nums[i - 1] > 1 && <span style={{ fontSize: 13, color: "var(--fg-4)", padding: "0 4px" }}>…</span>}
            <button onClick={() => onPage(n)} style={{ ...base, background: n === page ? "var(--brand-burgundy)" : "#fff", color: n === page ? "#fff" : "var(--fg-1)", borderColor: n === page ? "var(--brand-burgundy)" : "var(--border-subtle)", fontWeight: n === page ? 600 : 400 }}>
              {n}
            </button>
          </React.Fragment>
        ))}
        <button style={{ ...base, color: page === pages ? "var(--fg-4)" : "var(--fg-1)" }} disabled={page === pages} onClick={() => onPage(page + 1)}>
          <Icon name="chevron-right" size={14} />
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Avatar, Chip, Button, KPI, Pagination });