/* ═══════════════════════════════════════════════════════
   IKIGAI · Search Portal · Discovery Experience
   ═══════════════════════════════════════════════════════ */

const { useState: useState_sp, useEffect: useEffect_sp, useRef: useRef_sp } = React;

const DEMO_QUERIES = [
  {
    q: "busco fundas premium para iPhone 16 Pro",
    client: "Qruzh",
    tagline: "Accesorios Apple originales · iPhone · AirPods",
    url: "qruzh.com.mx",
    color: "#6EA8FF",
    glyph: "Q",
    category: "ECOMMERCE",
  },
  {
    q: "necesito mantenimiento de alberca en Cancún",
    client: "Torre Land",
    tagline: "Construcción · Mantenimiento · Cancún, QR",
    url: "torreland.com.mx",
    color: "#7EF6E2",
    glyph: "T",
    category: "SERVICIOS",
  },
  {
    q: "quiero una fragancia artesanal con historia",
    client: "Maison Solune",
    tagline: "Perfumería artesanal · Storytelling sensorial",
    url: "solune · próximamente",
    color: "#F5DFA7",
    glyph: "S",
    category: "ATELIER",
  },
  {
    q: "quiero organizar toda mi vida con IA",
    client: "IKIGAI Personal Vault",
    tagline: "Tu memoria. Tus documentos. Tu propósito.",
    url: "vault.qruzh.com.mx",
    color: "#9B8CFF",
    glyph: "V",
    category: "PRIVADO",
  },
];

function SearchPortal() {
  const { setState: setOrbState } = React.useContext(OrbContext);
  const [idx, setIdx] = useState_sp(0);
  const [typed, setTyped] = useState_sp("");
  const [phase, setPhase] = useState_sp("typing"); // typing → thinking → showing → erasing
  const [userInput, setUserInput] = useState_sp("");
  const [userFocused, setUserFocused] = useState_sp(false);
  const tRef = useRef_sp();

  // Auto-demo loop
  useEffect_sp(() => {
    if (userFocused) return;
    if (window.__ikigaiAutoDemo === false) return;
    const target = DEMO_QUERIES[idx].q;
    let cancelled = false;
    let restartHandler = null;

    async function run() {
      // typing
      setPhase("typing");
      setOrbState("listening");
      for (let i = 0; i <= target.length; i++) {
        if (cancelled) return;
        setTyped(target.slice(0, i));
        await sleep(38 + Math.random() * 30);
      }
      if (cancelled) return;
      await sleep(700);

      // thinking
      setPhase("thinking");
      setOrbState("thinking");
      await sleep(800);
      if (cancelled) return;

      // searching
      setPhase("searching");
      setOrbState("searching");
      await sleep(900);
      if (cancelled) return;

      // showing
      setPhase("showing");
      setOrbState("responding");
      await sleep(3200);
      if (cancelled) return;

      // erase
      setPhase("erasing");
      setOrbState("listening");
      for (let i = target.length; i >= 0; i--) {
        if (cancelled) return;
        setTyped(target.slice(0, i));
        await sleep(15);
      }
      await sleep(300);
      if (cancelled) return;
      setIdx((p) => (p + 1) % DEMO_QUERIES.length);
    }
    run();
    // Re-trigger when user toggles autoDemo back on
    const onTweaks = () => {
      if (window.__ikigaiAutoDemo === true && phase !== 'showing') {
        cancelled = true;
        setIdx((p) => p); // no-op to force re-eval
      }
    };
    window.addEventListener('ikigai:tweaks', onTweaks);
    return () => {
      cancelled = true;
      window.removeEventListener('ikigai:tweaks', onTweaks);
    };
  }, [idx, userFocused]);

  const sleep = (ms) => new Promise(r => setTimeout(r, ms));
  const current = DEMO_QUERIES[idx];
  const showResult = phase === "showing";
  const showCaret = phase === "typing" || phase === "erasing";

  return (
    <div className="search-portal">
      <div className="search-portal__wrap">
        <div className={`search-input ${userFocused ? 'is-focused' : ''}`}>
          <div className="search-input__orbicon">
            <div className="search-orbicon-core" />
            <div className="search-orbicon-ring" />
          </div>
          <input
            type="text"
            className="search-input__field"
            placeholder=""
            value={userFocused ? userInput : typed}
            onChange={(e) => setUserInput(e.target.value)}
            onFocus={() => { setUserFocused(true); setOrbState("listening"); }}
            onBlur={() => { if (!userInput) setUserFocused(false); }}
            aria-label="Pregunta a IKIGAI"
          />
          {!userFocused && (
            <span className="search-input__overlay" aria-hidden="true">
              {typed}
              {showCaret && <span className="search-caret" />}
              {!typed && <span className="search-placeholder">¿Qué estás buscando hoy?</span>}
            </span>
          )}
          <div className="search-input__status">
            <StatusLabel phase={phase} />
          </div>
        </div>

        {/* Result card */}
        <div className={`result-zone ${showResult ? 'is-active' : ''}`}>
          {showResult && <ClientCard data={current} />}
        </div>

        <p className="search-portal__sub">
          IKIGAI conecta lo que buscas con quien puede dártelo.
          <br />
          Tecnología con propósito. No publicidad. Inteligencia.
        </p>
      </div>
    </div>
  );
}

function StatusLabel({ phase }) {
  const labels = {
    typing:    "escuchando",
    thinking:  "comprendiendo",
    searching: "buscando entre los universos",
    showing:   "encontrado",
    erasing:   "",
  };
  return (
    <span className={`status-label status-label--${phase}`}>
      <span className="status-dot" />
      {labels[phase] || ""}
    </span>
  );
}

function ClientCard({ data }) {
  return (
    <a
      href="#"
      className="client-card"
      style={{ '--accent': data.color }}
      onClick={(e) => e.preventDefault()}
    >
      <div className="client-card__halo" />
      <div className="client-card__row">
        <div className="client-card__glyph" aria-hidden="true">
          <span>{data.glyph}</span>
          <div className="client-card__glyph-ring" />
        </div>
        <div className="client-card__body">
          <div className="client-card__cat">{data.category} · CLIENTE IKIGAI</div>
          <div className="client-card__name">{data.client}</div>
          <div className="client-card__tag">{data.tagline}</div>
        </div>
        <div className="client-card__url">
          <span>{data.url}</span>
          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
            <path d="M3 7h7M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>
      </div>
    </a>
  );
}

window.SearchPortal = SearchPortal;
window.DEMO_QUERIES = DEMO_QUERIES;