/* B28 HospeX — shared UI primitives */
const { useState, useRef, useEffect } = React;
// Make hooks reachable from every Babel file (external src scripts may not share lexical scope)
Object.assign(window, { useState, useRef, useEffect });

// Material Symbol icon
function Icon({ name, size = 20, fill = 0, weight = 400, style = {}, className = "" }) {
  return (
    <span
      className={"material-symbols-outlined " + className}
      style={{ fontSize: size, lineHeight: 1, fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' 0, 'opsz' ${size}`, ...style }}
    >{name}</span>
  );
}

function Eyebrow({ children, style = {} }) {
  return <div className="eyebrow" style={{ fontSize: 11, ...style }}>{children}</div>;
}

// Card surface
function Card({ children, pad = 24, style = {}, className = "", onClick }) {
  return (
    <div
      onClick={onClick}
      className={"hx-card " + className}
      style={{
        background: "var(--surface-container-lowest)",
        border: "1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent)",
        borderRadius: 18, padding: pad,
        ...(onClick ? { cursor: "pointer" } : {}),
        ...style,
      }}
    >{children}</div>
  );
}

// Delta indicator (up/down vs previous)
function Delta({ value, suffix = "", invert = false, size = 13 }) {
  if (value === 0 || value === undefined) {
    return <span style={{ color: "var(--on-surface-variant)", fontSize: size, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 2 }}><Icon name="remove" size={size + 1} />0{suffix}</span>;
  }
  const up = value > 0;
  const good = invert ? !up : up;
  const color = good ? "var(--primary)" : "var(--error)";
  return (
    <span style={{ color, fontSize: size, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 1 }}>
      <Icon name={up ? "arrow_upward" : "arrow_downward"} size={size + 2} />
      {Math.abs(value)}{suffix}
    </span>
  );
}

// KPI stat block
function Stat({ label, value, unit = "", delta, deltaSuffix = "", invert = false, icon, accent }) {
  return (
    <Card pad={22}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--on-surface-variant)" }}>{label}</div>
        {icon && (
          <div style={{ width: 34, height: 34, borderRadius: 10, display: "grid", placeItems: "center", background: accent || "var(--secondary-container)", color: accent ? "#fff" : "var(--on-secondary-container)" }}>
            <Icon name={icon} size={19} fill={1} />
          </div>
        )}
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 14 }}>
        <div className="font-headline" style={{ fontSize: 38, fontWeight: 800, letterSpacing: "-0.03em", color: "var(--on-surface)" }}>{value}</div>
        {unit && <div style={{ fontSize: 16, fontWeight: 700, color: "var(--on-surface-variant)" }}>{unit}</div>}
      </div>
      {delta !== undefined && (
        <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 6 }}>
          <Delta value={delta} suffix={deltaSuffix} invert={invert} />
          <span style={{ fontSize: 12.5, color: "var(--on-surface-variant)" }}>vs. período anterior</span>
        </div>
      )}
    </Card>
  );
}

function Chip({ children, bg = "var(--secondary-container)", color = "var(--on-secondary-container)", style = {} }) {
  return (
    <span className="chip" style={{ background: bg, color, ...style }}>{children}</span>
  );
}

// Sentiment dot + label
const SENT = {
  pos: { c: "var(--primary)", bg: "color-mix(in srgb, var(--primary) 12%, transparent)", l: "Positivo" },
  neg: { c: "var(--error)", bg: "var(--error-container)", l: "Negativo" },
  neu: { c: "var(--tertiary)", bg: "var(--surface-container-high)", l: "Neutro" },
};
function SentBadge({ sent }) {
  const s = SENT[sent] || SENT.neu;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11.5, fontWeight: 700, padding: "4px 10px", borderRadius: 999, background: s.bg, color: s.c }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background: s.c }}></span>{s.l}
    </span>
  );
}

function PrioBadge({ prio }) {
  const map = {
    "Alta": { c: "var(--error)", bg: "var(--error-container)" },
    "Média": { c: "#9a6b00", bg: "#ffedcc" },
    "Baixa": { c: "var(--on-secondary-container)", bg: "var(--secondary-container)" },
  };
  const s = map[prio] || map["Baixa"];
  return <span style={{ fontSize: 11, fontWeight: 700, padding: "3px 10px", borderRadius: 999, background: s.bg, color: s.c }}>{prio}</span>;
}

// Section header row
function SectionHead({ eyebrow, title, right }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 18 }}>
      <div>
        {eyebrow && <Eyebrow style={{ marginBottom: 7 }}>{eyebrow}</Eyebrow>}
        <h2 className="font-headline" style={{ margin: 0, fontSize: 22, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--on-surface)" }}>{title}</h2>
      </div>
      {right}
    </div>
  );
}

// Avatar with initials
function Avatar({ name, size = 38, bg }) {
  const initials = name.split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
  const palette = ["#2f803a", "#416924", "#0e6624", "#585857", "#2a500d"];
  const c = bg || palette[name.charCodeAt(0) % palette.length];
  return (
    <div style={{ width: size, height: size, borderRadius: 999, background: c, color: "#fff", display: "grid", placeItems: "center", fontFamily: "var(--font-headline)", fontWeight: 700, fontSize: size * 0.36, flexShrink: 0 }}>{initials}</div>
  );
}

// OTA logo chip (text-based, brand color)
function OtaTag({ ota, color, size = 12 }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: size, fontWeight: 700, color: "var(--on-surface)" }}>
      <span style={{ width: 9, height: 9, borderRadius: 3, background: color }}></span>{ota}
    </span>
  );
}

// Toggle switch
function Switch({ on, onChange }) {
  return (
    <button onClick={() => onChange && onChange(!on)} aria-pressed={on}
      style={{ width: 44, height: 26, borderRadius: 999, border: "none", cursor: "pointer", padding: 3, background: on ? "var(--primary)" : "var(--outline-variant)", transition: "background .18s ease", display: "flex", justifyContent: on ? "flex-end" : "flex-start", alignItems: "center" }}>
      <span style={{ width: 20, height: 20, borderRadius: 999, background: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,0.2)", transition: "all .18s ease" }}></span>
    </button>
  );
}

// Segmented control
function Segmented({ options, value, onChange, small }) {
  return (
    <div style={{ display: "inline-flex", background: "var(--surface-container-low)", borderRadius: 999, padding: 3, gap: 2 }}>
      {options.map(o => {
        const on = value === o;
        return (
          <button key={o} onClick={() => onChange && onChange(o)}
            style={{ padding: small ? "6px 13px" : "8px 16px", borderRadius: 999, border: "none", cursor: "pointer", fontSize: small ? 12 : 13, fontWeight: 700, fontFamily: "var(--font-headline)", background: on ? "var(--surface-container-lowest)" : "transparent", color: on ? "var(--on-surface)" : "var(--on-surface-variant)", boxShadow: on ? "var(--shadow-sm)" : "none", transition: "all .15s ease" }}>{o}</button>
        );
      })}
    </div>
  );
}

Object.assign(window, { Icon, Eyebrow, Card, Delta, Stat, Chip, SentBadge, PrioBadge, SectionHead, Avatar, OtaTag, SENT, Switch, Segmented });