// UI primitives — Ultimo Verso · Àltima

function UvScreen({ p, children, footer, noPad, scroll = true }) {
  return (
    <div style={{
      display: "flex", flexDirection: "column",
      height: "100%", background: p.bg, color: p.ink
    }}>
      <div style={{
        flex: 1, minHeight: 0,
        overflow: scroll ? "auto" : "hidden",
        padding: noPad ? 0 : "22px 24px 14px",
        display: "flex", flexDirection: "column", gap: 14
      }}>{children}</div>
      {footer && <div style={{
        padding: "12px 20px 22px",
        borderTop: `.5px solid ${p.line}`,
        background: p.bg
      }}>{footer}</div>}
    </div>);

}

function UvEyebrow({ p, children }) {
  return (
    <div style={{
      fontSize: 10.5, letterSpacing: ".24em",
      textTransform: "uppercase", color: p.clay || p.warm || p.accent,
      fontFamily: UV_FONTS.display,
      fontWeight: 700
    }}>{children}</div>);

}

function UvTitle({ p, children, style }) {
  return <div style={{
    fontSize: 28, lineHeight: 1.14, letterSpacing: "-.025em",
    color: p.ink,
    fontFamily: UV_FONTS.display,
    fontWeight: 700,
    ...style
  }}>{children}</div>;
}

function UvHint({ p, children }) {
  return <div style={{
    fontSize: 13.5, color: p.inkSoft, lineHeight: 1.55,
    fontFamily: UV_FONTS.body
  }}>{children}</div>;
}

function UvField({ p, value, onChange, placeholder, textarea, tall, small, autoFocus, compact, type, inputMode }) {
  const [focused, setFocused] = React.useState(false);
  const inputStyle = {
    width: "100%", boxSizing: "border-box",
    background: "transparent",
    color: p.ink,
    border: "none",
    outline: "none",
    fontFamily: UV_FONTS.body,
    fontSize: compact ? 15 : 16.5,
    padding: textarea ? 0 : "10px 0",
    resize: "none",
    lineHeight: 1.45
  };
  const box = textarea ? {
    border: `1px solid ${focused ? p.accent : p.inkFaint}`,
    borderRadius: 12,
    padding: 14,
    background: p.surface,
    minHeight: tall ? 130 : 56,
    transition: "border-color .15s",
    boxShadow: focused ? `0 0 0 4px ${p.accentSoft}` : "none"
  } : {
    borderBottom: `1.5px solid ${focused ? p.accent : p.inkFaint}`,
    padding: "2px 0",
    transition: "border-color .15s"
  };
  return (
    <div style={box}>
      {textarea ?
      <textarea
        value={value || ""}
        onChange={(e) => onChange?.(e.target.value)}
        placeholder={placeholder}
        autoFocus={autoFocus}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={{ ...inputStyle, minHeight: tall ? 100 : 36, display: "block" }} /> :


      <input
        value={value || ""}
        onChange={(e) => onChange?.(e.target.value)}
        placeholder={placeholder}
        autoFocus={autoFocus}
        type={type || "text"}
        inputMode={inputMode}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={inputStyle} />

      }
    </div>);

}

function UvLabel({ p, children }) {
  return <div style={{
    fontSize: 10.5, color: p.inkSoft, letterSpacing: ".18em",
    textTransform: "uppercase", fontWeight: 600,
    fontFamily: UV_FONTS.display,
    marginBottom: 4
  }}>{children}</div>;
}

function UvChips({ p, value, selected, options, labels, onSelect, onToggle, multi, small, allowCustom, customPlaceholder }) {
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState("");
  const commit = () => {
    const v = draft.trim();
    if (v) {
      if (multi) onToggle?.(v);else
      onSelect?.(v);
    }
    setDraft("");
    setEditing(false);
  };
  const selList = multi ? selected || [] : value ? [value] : [];
  const customs = selList.filter((v) => !options.includes(v));

  const chipBase = {
    fontSize: small ? 12 : 13,
    padding: small ? "6px 12px" : "8px 14px",
    borderRadius: 999,
    cursor: "pointer",
    fontFamily: UV_FONTS.body,
    transition: "all .14s"
  };

  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
      {options.map((o, oi) => {
        const active = multi ? (selected || []).includes(o) : value === o;
        return (
          <button key={o}
          onClick={() => multi ? onToggle?.(o) : onSelect?.(o)}
          onMouseEnter={e => { if (!active) { e.currentTarget.style.background = "rgba(255,255,255,.62)"; e.currentTarget.style.borderColor = p.accent; e.currentTarget.style.boxShadow = `0 3px 10px -4px ${p.accent}`; } }}
          onMouseLeave={e => { if (!active) { e.currentTarget.style.background = "rgba(255,255,255,.32)"; e.currentTarget.style.borderColor = p.inkFaint; e.currentTarget.style.boxShadow = "none"; } }}
          style={{
            ...chipBase,
            border: `1px solid ${active ? p.accent : p.inkFaint}`,
            background: active ? p.accent : "rgba(255,255,255,.32)",
            color: active ? p.accentInk : p.ink,
            fontWeight: active ? 600 : 400
          }}>{labels?.[oi] || o}</button>);

      })}
      {customs.map((o) =>
      <button key={"c-" + o}
      onClick={() => multi ? onToggle?.(o) : onSelect?.(o)}
      style={{
        ...chipBase,
        border: `1px solid ${p.accent}`,
        background: p.accent, color: p.accentInk, fontWeight: 600,
        display: "flex", alignItems: "center", gap: 6
      }}>
          {o}
          <span style={{ fontSize: 10, opacity: .7 }}>✕</span>
        </button>
      )}
      {allowCustom && (editing ?
      <input autoFocus value={draft}
      onChange={(e) => setDraft(e.target.value)}
      onBlur={commit}
      onKeyDown={(e) => {
        if (e.key === "Enter") {e.preventDefault();commit();}
        if (e.key === "Escape") {setDraft("");setEditing(false);}
      }}
      placeholder={customPlaceholder}
      style={{
        ...chipBase,
        border: `1px solid ${p.accent}`,
        background: p.surface, color: p.ink,
        outline: "none", minWidth: 140
      }} /> :

      <button onClick={() => setEditing(true)}
      style={{
        ...chipBase,
        border: `1px dashed ${p.inkFaint}`,
        background: "transparent", color: p.inkSoft
      }}>{t("chip_other")}</button>)
      }
    </div>);

}

function UvPrimaryBtn({ p, children, onClick, disabled, full }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      flex: full ? 1 : "unset",
      padding: full ? 0 : "0 26px",
      borderRadius: 999, border: "none",
      background: disabled ? p.inkFaint : p.ink,
      color: disabled ? p.inkSoft : "#fff",
      fontFamily: UV_FONTS.display,
      fontSize: 15, fontWeight: 600,
      letterSpacing: ".01em",
      cursor: disabled ? "not-allowed" : "pointer",
      transition: "transform .12s, background .15s",
      boxShadow: disabled ? "none" : `0 8px 22px -10px ${p.ink}`, height: "45px", width: "180px", margin: "10px 0px 0px"
    }}>{children}</button>);
}

function UvGhostBtn({ p, children, onClick, disabled }) {
  return (
    <button onClick={onClick} disabled={disabled} style={{
      height: 50, padding: "0 22px", borderRadius: 999,
      border: `1px solid ${p.inkFaint}`,
      background: "transparent", color: disabled ? p.inkSoft : p.ink,
      fontFamily: UV_FONTS.display,
      fontSize: 15, fontWeight: 500,
      cursor: disabled ? "not-allowed" : "pointer",
      opacity: disabled ? .5 : 1
    }}>{children}</button>);

}

function UvTextBtn({ p, children, onClick }) {
  return (
    <button onClick={onClick} style={{
      background: "transparent", border: "none",
      color: p.accent, fontFamily: UV_FONTS.body, fontSize: 13,
      fontWeight: 500,
      cursor: "pointer", padding: "8px 4px",
      textDecoration: "underline",
      textUnderlineOffset: 3,
      textDecorationColor: `${p.accent}66`
    }}>{children}</button>);

}

// Header — usa el logo Àltima como firma de marca
function UvHeader({ p, stepIdx, total, onBack, showBack, canSkip, onSkip }) {
  return (
    <div style={{ padding: "56px 22px 8px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        {showBack ?
        <button onClick={onBack} style={{
          width: 36, height: 36, borderRadius: 999,
          border: `1px solid ${p.inkFaint}`, background: p.surface,
          color: p.ink, cursor: "pointer", fontSize: 16,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: UV_FONTS.body
        }}>←</button> :
        <div style={{ width: 36 }} />}
        <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
          <AltimaLogo color={EV_INK} size={14} />
          <div style={{
            fontSize: 9.5, letterSpacing: ".26em", textTransform: "uppercase",
            color: p.inkSoft, fontFamily: UV_FONTS.display, fontWeight: 600
          }}>{t("hdr_sub")}</div>
        </div>
        {canSkip ?
        <button onClick={onSkip} style={{
          height: 36, padding: "0 14px", borderRadius: 999,
          border: "none", background: "transparent",
          color: p.inkSoft, cursor: "pointer",
          fontFamily: UV_FONTS.body, fontSize: 13
        }}>{t("skip")}</button> :
        <div style={{ width: 36 }} />}
      </div>
      {total > 0 && (() => {
        const STAGE_OF = [0,0,1,1,1,1,2,2,3,3,4];
        const names = ["st_quien","st_esencia","st_mundo","st_cancion","st_datos"];
        const sIdx = STAGE_OF[stepIdx] != null ? STAGE_OF[stepIdx] : 0;
        return (
          <div style={{ marginTop: 16 }}>
            <div style={{ display: "flex", gap: 5 }}>
              {names.map((_, i) =>
                <div key={i} style={{
                  flex: 1, height: 4, borderRadius: 99,
                  background: i <= sIdx ? p.accent : p.inkFaint,
                  transition: "background .35s"
                }} />
              )}
            </div>
            <div style={{ marginTop: 8, display: "flex", justifyContent: "space-between", alignItems: "baseline", fontFamily: UV_FONTS.body }}>
              <span style={{ color: p.accent, fontWeight: 600, fontSize: 11.5, letterSpacing: ".02em" }}>{t(names[sIdx])}</span>
              <span style={{ color: p.inkSoft, fontSize: 10.5 }}>{t("stage_of").replace("{n}", sIdx + 1).replace("{t}", names.length)}</span>
            </div>
          </div>
        );
      })()}
    </div>);

}

Object.assign(window, {
  UvScreen, UvEyebrow, UvTitle, UvHint, UvField, UvLabel,
  UvChips, UvPrimaryBtn, UvGhostBtn, UvTextBtn, UvHeader
});