/* global React, SEQ_UI */
const { Icon, brl, Avatar } = window.SEQ_UI;

// ─── Page header padrão usado em TODAS as telas internas ────
function PageHead({ num, label, title, em, tag, actions }) {
  return (
    <div style={{ borderBottom: "1.5px solid var(--kp-ink)", padding: "16px 28px 18px", background: "var(--kp-paper)" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", display: "flex", alignItems: "end", justifyContent: "space-between", gap: 18, flexWrap: "wrap" }}>
        <div>
          <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>
            Nº <em style={{ fontFamily: "var(--kp-display)", fontStyle: "italic", fontSize: 14, letterSpacing: 0 }}>{num}</em> · {label}
          </span>
          <h1 className="kp-display" style={{ fontSize: "clamp(34px,4.5vw,56px)", lineHeight: 1.0, margin: "6px 0 0", maxWidth: 920 }}>
            {title} {em && <em style={{ fontStyle: "italic" }}>{em}</em>}
          </h1>
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
          {tag && <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "var(--kp-muted)" }}>{tag}</span>}
          {actions}
        </div>
      </div>
    </div>
  );
}

// ─── KPI Card editorial ───────────────────────────────────
function KPI({ label, value, sub, bg = "var(--kp-white)", color = "var(--kp-ink)", trend, pulse, dotColor }) {
  return (
    <div className="kp-card" style={{ background: bg, padding: 20, color }}>
      <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", display: "flex", alignItems: "center", gap: 6, color: bg === "var(--kp-ink)" ? "var(--kp-faint)" : "var(--kp-muted)" }}>
        {pulse && <span className="kp-dot" style={{ background: dotColor || "var(--kp-green)" }}/>} {label}
      </div>
      <div className="kp-display" style={{ fontSize: 38, fontStyle: "italic", lineHeight: 1, marginTop: 8, color: bg === "var(--kp-ink)" ? "var(--kp-paper)" : "var(--kp-ink)" }}>
        {value}
      </div>
      {sub && <div style={{ fontSize: 12, marginTop: 6, color: bg === "var(--kp-ink)" ? "rgba(247,241,232,0.7)" : "var(--kp-muted)", display: "flex", alignItems: "center", gap: 6 }}>
        {trend === "up" && <span style={{ color: "var(--kp-green-deep)" }}>▲</span>}
        {trend === "down" && <span style={{ color: "#FF5F57" }}>▼</span>}
        {sub}
      </div>}
    </div>
  );
}

// ─── Section number label ─────────────────────────────────
function SectLabel({ num, label, tag }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14, gap: 10 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
        <span className="kp-display" style={{ fontSize: 28, fontStyle: "italic", color: "var(--kp-pink)", lineHeight: 1 }}>{num}</span>
        <h2 className="kp-display" style={{ fontSize: 24, lineHeight: 1, margin: 0 }}>{label}</h2>
      </div>
      {tag && <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>{tag}</span>}
    </div>
  );
}

// ─── Spark / bar / area ───────────────────────────────────
function BarChart({ data, height = 140, accent = "var(--kp-green)", lastAccent = "var(--kp-pink)" }) {
  const max = Math.max(...data);
  return (
    <div style={{ marginTop: 14, display: "flex", alignItems: "end", gap: 5, height }}>
      {data.map((v,i) => (
        <div key={i} style={{ flex: 1, height: (v/max)*100+"%", background: i === data.length-1 ? lastAccent : accent, border: "1.5px solid var(--kp-ink)" }}/>
      ))}
    </div>
  );
}

function AreaChart({ data, height = 200, color = "var(--kp-pink)" }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const w = 100;
  const points = data.map((v,i) => `${(i/(data.length-1))*w},${100-((v-min)/range)*100}`).join(" ");
  return (
    <div style={{ position: "relative", height, marginTop: 12 }}>
      <svg viewBox={`0 0 ${w} 100`} preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
        <polyline points={`0,100 ${points} ${w},100`} fill={color} opacity="0.18" stroke="none"/>
        <polyline points={points} fill="none" stroke={color} strokeWidth="0.7" vectorEffect="non-scaling-stroke"/>
      </svg>
    </div>
  );
}

// ─── DonutChart pequeno ───────────────────────────────────
function Donut({ value = 0.62, size = 96, color = "var(--kp-green)", label }) {
  const r = size/2 - 6;
  const c = 2 * Math.PI * r;
  return (
    <div style={{ position: "relative", width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--kp-soft)" strokeWidth="6"/>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth="6"
          strokeDasharray={`${c*value} ${c}`} transform={`rotate(-90 ${size/2} ${size/2})`} strokeLinecap="butt"/>
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        <span className="kp-display" style={{ fontSize: 22, fontStyle: "italic", lineHeight: 1 }}>{Math.round(value*100)}%</span>
        {label && <span className="kp-mono" style={{ fontSize: 8, letterSpacing: "0.16em", color: "var(--kp-muted)" }}>{label}</span>}
      </div>
    </div>
  );
}

// ─── Table primitives ─────────────────────────────────────
function TableHead({ cols }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: cols.map(c => c.w || "1fr").join(" "),
      padding: "12px 18px", borderBottom: "1.5px solid var(--kp-ink)", background: "var(--kp-soft)",
      fontFamily: "var(--kp-mono)", fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--kp-muted)",
    }}>
      {cols.map((c,i) => <div key={i}>{c.label}</div>)}
    </div>
  );
}
function TableRow({ cols, values, i, last }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: cols.map(c => c.w || "1fr").join(" "),
      padding: "13px 18px", alignItems: "center",
      borderBottom: last ? "none" : "1px solid rgba(10,10,10,0.1)",
      background: i % 2 === 1 ? "var(--kp-soft)" : "var(--kp-white)",
    }}>
      {values}
    </div>
  );
}

// ─── Empty / placeholder ──────────────────────────────────
function Pill({ children, bg = "var(--kp-soft)", color = "var(--kp-ink)" }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "3px 9px", border: "1.5px solid var(--kp-ink)",
      fontFamily: "var(--kp-mono)", fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase",
      background: bg, color,
    }}>{children}</span>
  );
}

window.SEQ_LAYOUT = { PageHead, KPI, SectLabel, BarChart, AreaChart, Donut, TableHead, TableRow, Pill };