/* Componentes compartidos — Encuesta Impulsores de Allar.ia */

const { useState, useEffect, useRef } = React;

/* ---------- Iconos (Lucide, inline) ---------- */
const ICON_PATHS = {
  "arrow-right": <React.Fragment><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></React.Fragment>,
  "arrow-left": <React.Fragment><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></React.Fragment>,
  "lightbulb": <React.Fragment><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></React.Fragment>,
  "check": <path d="M20 6 9 17l-5-5"></path>,
  "external-link": <React.Fragment><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></React.Fragment>,
  "lock": <React.Fragment><rect width="18" height="11" x="3" y="11" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></React.Fragment>,
  "clock": <React.Fragment><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></React.Fragment>,
  "thumbs-up": <path d="M7 10v12M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"></path>,
  "rotate-ccw": <React.Fragment><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></React.Fragment>,
  "send": <React.Fragment><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></React.Fragment>,
  "help-circle": <React.Fragment><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" x2="12.01" y1="17" y2="17"></line></React.Fragment>,
  "sun": <React.Fragment><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></React.Fragment>,
  "moon": <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>,
  "monitor": <React.Fragment><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></React.Fragment>,
  "calendar": <React.Fragment><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></React.Fragment>,
  "video": <React.Fragment><path d="m22 8-6 4 6 4V8Z"></path><rect width="14" height="12" x="2" y="6" rx="2" ry="2"></rect></React.Fragment>,
  "chevron-down": <path d="m6 9 6 6 6-6"></path>,
  "chevron-up": <path d="m18 15-6-6-6 6"></path>,
};

function Icon({ name, size = 16, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
         style={{ flexShrink: 0, ...style }} aria-hidden="true">
      {ICON_PATHS[name]}
    </svg>
  );
}

/* ---------- Opción única (cards tipo radio) ---------- */
function OptionCard({ label, selected, onClick }) {
  return (
    <button type="button" className={"opt-card" + (selected ? " selected" : "")} onClick={onClick}>
      <span className="opt-radio">{selected ? <span className="opt-radio-dot"></span> : null}</span>
      <span className="opt-label">{label}</span>
    </button>
  );
}

function OptionList({ options, value, onChange }) {
  return (
    <div className="opt-list">
      {options.map(function (o) {
        return <OptionCard key={o.id} label={o.label} selected={value === o.id} onClick={function () { onChange(o.id); }} />;
      })}
    </div>
  );
}

/* ---------- Selección múltiple (checkbox card) ---------- */
function CheckCard({ label, checked, onToggle }) {
  return (
    <button type="button" className={"opt-card check" + (checked ? " selected" : "")} onClick={onToggle}>
      <span className="opt-box">{checked ? <Icon name="check" size={13} /> : null}</span>
      <span className="opt-label">{label}</span>
    </button>
  );
}

function CheckList({ options, values, onChange, columns }) {
  function toggle(id) {
    var next = values.indexOf(id) >= 0 ? values.filter(function (v) { return v !== id; }) : values.concat([id]);
    onChange(next);
  }
  return (
    <div className={"opt-list" + (columns === 2 ? " cols-2" : "")}>
      {options.map(function (o) {
        return <CheckCard key={o.id} label={o.label} checked={values.indexOf(o.id) >= 0} onToggle={function () { toggle(o.id); }} />;
      })}
    </div>
  );
}

/* ---------- Chips (multi compacto: herramientas, usos) ---------- */
function ChipGroup({ options, values, onChange }) {
  function toggle(id) {
    var next = values.indexOf(id) >= 0 ? values.filter(function (v) { return v !== id; }) : values.concat([id]);
    onChange(next);
  }
  return (
    <div className="chip-group">
      {options.map(function (o) {
        var on = values.indexOf(o.id) >= 0;
        return (
          <button type="button" key={o.id} className={"chip" + (on ? " on" : "")} onClick={function () { toggle(o.id); }}>
            {on ? <Icon name="check" size={13} /> : null}
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

/* ---------- Vocabulario: término + escala segmentada + explicación opcional ---------- */
function VocabRow({ term, value, onChange, escala }) {
  const [open, setOpen] = useState(false);
  var hasExplain = term.explain && term.explain.text;
  return (
    <div className={"vocab-row" + (open ? " open" : "")}>
      <div className="vocab-main">
        <div className="vocab-term">
          <div className="vocab-label-row">
            <span className="vocab-label">{term.label}</span>
            {hasExplain ? (
              <button type="button" className={"vocab-help" + (open ? " on" : "")}
                      aria-label={"Explicar " + term.label} aria-expanded={open}
                      onClick={function () { setOpen(!open); }}>
                <Icon name="help-circle" size={15} />
              </button>
            ) : null}
          </div>
          {term.hint ? <span className="vocab-hint">{term.hint}</span> : null}
        </div>
        <div className="vocab-seg" role="radiogroup" aria-label={term.label}>
          {escala.map(function (e, i) {
            return (
              <button type="button" key={e}
                      className={"vocab-seg-btn" + (value === i ? " on" : "") + (value === i && i === 3 ? " max" : "")}
                      onClick={function () { onChange(i); }}>
                {e}
              </button>
            );
          })}
        </div>
      </div>
      {open && hasExplain ? (
        <div className="vocab-explain">
          <p className="vocab-explain-text">{term.explain.text}</p>
          {term.explain.url ? (
            <a className="vocab-explain-link" href={term.explain.url} target="_blank" rel="noopener noreferrer">
              Ver más <Icon name="external-link" size={12} />
            </a>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

/* ---------- ¿Sabías que…? ---------- */
function FactCard({ fact }) {
  if (!fact) return null;
  return (
    <aside className="fact-card">
      <div className="fact-icon"><Icon name="lightbulb" size={18} /></div>
      <div className="fact-body">
        <span className="fact-eyebrow">¿Sabías que…?</span>
        <p className="fact-text">{fact.text}</p>
        <a className="fact-link" href={fact.url} target="_blank" rel="noopener noreferrer">
          {fact.linkLabel}
          <Icon name="external-link" size={13} />
        </a>
      </div>
    </aside>
  );
}

/* ---------- Theme toggle: light / system / dark ---------- */
function ThemeToggle({ theme, onSet }) {
  var opts = [
    { id: "light",  icon: "sun",     label: "Tema claro" },
    { id: "system", icon: "monitor", label: "Tema del sistema" },
    { id: "dark",   icon: "moon",    label: "Tema oscuro" },
  ];
  return (
    <div className="theme-seg" role="radiogroup" aria-label="Tema">
      {opts.map(function (o) {
        var on = theme === o.id;
        return (
          <button type="button" key={o.id}
                  className={"theme-seg-btn" + (on ? " on" : "")}
                  role="radio" aria-checked={on}
                  aria-label={o.label} title={o.label}
                  onClick={function () { onSet(o.id); }}>
            <Icon name={o.icon} size={14} />
          </button>
        );
      })}
    </div>
  );
}

/* ---------- Logo con fallback de texto ---------- */
function BrandLogo({ brand }) {
  const [failed, setFailed] = useState(false);
  var src = brand === "allaria-plus"
    ? "https://static.allariamas.dev/images/logo-allaria-mas.svg"
    : "https://assets.allaria.dev/images/logo-allaria.svg";
  if (failed) {
    return <span className="logo-text">allaria{brand === "allaria-plus" ? <span className="logo-plus">+</span> : null}</span>;
  }
  return <img className="logo-img" src={src} alt="Allaria" onError={function () { setFailed(true); }} />;
}

Object.assign(window, {
  Icon, OptionCard, OptionList, CheckCard, CheckList, ChipGroup, VocabRow, FactCard, BrandLogo, ThemeToggle,
});