/* MIRAI onboarding — experiencia guiada */

const {
  useState: useOnboardingState,
  useMemo: useOnboardingMemo,
  useEffect: useOnboardingEffect,
} = React;

const MIRAI_ONBOARDING_PASSWORD = "mirai";

function OnboardingGate({ onUnlock }) {
  const [password, setPassword] = useOnboardingState("");
  const [error, setError] = useOnboardingState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (password.trim().toLowerCase() === MIRAI_ONBOARDING_PASSWORD) {
      onUnlock();
    } else {
      setError("Contraseña incorrecta. Intenta de nuevo.");
    }
  };

  return (
    <section className="onboarding">
      <div className="wrap onboarding__gateWrap">
        <form className="onboarding__panel onboarding__gateCard" onSubmit={handleSubmit}>
          <span className="eyebrow"><span className="dot"></span>Onboarding Mirai</span>
          <h1 className="onboarding__gateTitle">Ingresa la contraseña</h1>
          <p className="onboarding__gateIntro">Este onboarding es privado. Pedila al equipo de Mirai si todavia no la tenes.</p>

          <div className={`onboarding__question ${error ? "has-error" : ""}`}>
            <label htmlFor="onboarding-gate-password" className="onboarding__label">Contraseña</label>
            <input
              id="onboarding-gate-password"
              className="onboarding__input"
              type="password"
              autoFocus
              value={password}
              onChange={(e) => {
                setPassword(e.target.value);
                if (error) setError("");
              }}
              placeholder="Escribi la contraseña..."
            />
            {error && <p className="onboarding__error">{error}</p>}
          </div>

          <button type="submit" className="btn btn--primary onboarding__gateSubmit">
            Ingresar <span className="arrow">→</span>
          </button>
        </form>
      </div>
    </section>
  );
}

function OnboardingPage() {
  const [unlocked, setUnlocked] = useOnboardingState(false);
  const [values, setValues] = useOnboardingState(() => miraiOnboardingInitialValues());
  const [activeIndex, setActiveIndex] = useOnboardingState(0);
  const [errors, setErrors] = useOnboardingState({});
  const [payload, setPayload] = useOnboardingState(null);
  const [copied, setCopied] = useOnboardingState("");

  const visibleSections = useOnboardingMemo(() => miraiOnboardingVisibleSections(values), [values]);
  const activeSection = visibleSections[Math.min(activeIndex, visibleSections.length - 1)] || visibleSections[0];
  const activeQuestions = useOnboardingMemo(
    () => activeSection ? miraiOnboardingVisibleQuestions(activeSection.id, values) : [],
    [activeSection, values]
  );
  const blueprintItems = useOnboardingMemo(() => miraiOnboardingBlueprintItems(values), [values]);
  const clientMarkdown = payload ? payload.clientPreviewMarkdown : miraiOnboardingBuildClientMarkdown(values);
  const internalMarkdown = payload ? payload.internalBotMarkdown : miraiOnboardingBuildInternalMarkdown(values);
  const answers = payload ? payload.answers : miraiOnboardingCreateAnswers(values, "");
  const progress = visibleSections.length > 1 ? (activeIndex / (visibleSections.length - 1)) * 100 : 0;

  useOnboardingEffect(() => {
    if (activeIndex > visibleSections.length - 1) {
      setActiveIndex(Math.max(0, visibleSections.length - 1));
    }
  }, [activeIndex, visibleSections.length]);

  if (!unlocked) {
    return <OnboardingGate onUnlock={() => setUnlocked(true)} />;
  }

  const setValue = (id, value) => {
    setPayload(null);
    setValues((prev) => ({ ...prev, [id]: value }));
    setErrors((prev) => {
      if (!prev[id]) return prev;
      const next = { ...prev };
      delete next[id];
      return next;
    });
  };

  const toggleMulti = (id, option) => {
    const cur = Array.isArray(values[id]) ? values[id] : [];
    let next = cur.includes(option) ? cur.filter((x) => x !== option) : [...cur, option];
    if (id === "lead_summary_delivery") {
      next = option === "No necesito resumen" && !cur.includes(option)
        ? ["No necesito resumen"]
        : next.filter((x) => x !== "No necesito resumen");
    }
    setValue(id, next);
  };

  const validateCurrent = () => {
    if (!activeSection || activeSection.final) return true;
    const nextErrors = miraiOnboardingSectionErrors(activeSection.id, values);
    setErrors(nextErrors);
    return Object.keys(nextErrors).length === 0;
  };

  const goNext = () => {
    if (!validateCurrent()) return;
    setActiveIndex((i) => Math.min(i + 1, visibleSections.length - 1));
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const goBack = () => {
    setActiveIndex((i) => Math.max(i - 1, 0));
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const jumpTo = (index) => {
    if (index <= activeIndex || validateCurrent()) {
      setActiveIndex(index);
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  const handleSubmit = () => {
    const allErrors = visibleSections.reduce((acc, section) => {
      if (section.final) return acc;
      return { ...acc, ...miraiOnboardingSectionErrors(section.id, values) };
    }, {});
    setErrors(allErrors);
    if (Object.keys(allErrors).length) {
      const firstInvalid = visibleSections.findIndex((section) =>
        miraiOnboardingVisibleQuestions(section.id, values).some((q) => allErrors[q.id])
      );
      if (firstInvalid >= 0) setActiveIndex(firstInvalid);
      return;
    }
    const nextPayload = miraiOnboardingBuildPayload(values);
    console.log(nextPayload);
    setPayload(nextPayload);
  };

  const copyText = async (label, text) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(label);
      setTimeout(() => setCopied(""), 1600);
    } catch (err) {
      const area = document.createElement("textarea");
      area.value = text;
      document.body.appendChild(area);
      area.select();
      document.execCommand("copy");
      document.body.removeChild(area);
      setCopied(label);
      setTimeout(() => setCopied(""), 1600);
    }
  };

  const downloadText = (filename, text, type = "text/plain") => {
    const blob = new Blob([text], { type });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  return (
    <section className="onboarding">
      <div className="wrap onboarding__wrap">
        <div className="onboarding__top">
          <div>
            <span className="eyebrow"><span className="dot"></span>Onboarding Mirai</span>
            <h1>{values.business_type === "Inmobiliaria" ? "Primeros pasos para tu agente inmobiliario" : "Primeros pasos para tu agente"}</h1>
            <p>
              Una experiencia guiada para transformar tu operacion actual en una primera arquitectura de agente.
            </p>
          </div>
          <div className="onboarding__topMeta">
            <span>{activeIndex + 1}/{visibleSections.length}</span>
            <span>{Math.round(progress)}%</span>
          </div>
        </div>

        <div className="onboarding__progress" aria-hidden="true">
          <span style={{ width: `${progress}%` }}></span>
        </div>

        <div className="onboarding__layout">
          <aside className="onboarding__steps" aria-label="Progreso del onboarding">
            {visibleSections.map((section, index) => {
              const isActive = activeSection && section.id === activeSection.id;
              const isDone = index < activeIndex || miraiOnboardingSectionComplete(section.id, values);
              return (
                <button
                  key={section.id}
                  type="button"
                  className={`onboarding__step ${isActive ? "is-active" : ""} ${isDone ? "is-done" : ""}`}
                  onClick={() => jumpTo(index)}>
                  <span className="onboarding__stepNum">{String(index + 1).padStart(2, "0")}</span>
                  <span>
                    <strong>{section.eyebrow}</strong>
                    <small>{section.title}</small>
                  </span>
                </button>
              );
            })}
          </aside>

          <main className="onboarding__main">
            {activeSection && activeSection.final ? (
              <OnboardingFinal
                section={activeSection}
                payload={payload}
                clientMarkdown={clientMarkdown}
                internalMarkdown={internalMarkdown}
                answers={answers}
                copied={copied}
                onSubmit={handleSubmit}
                onCopy={copyText}
                onDownload={downloadText}
              />
            ) : (
              <OnboardingQuestionPanel
                section={activeSection}
                questions={activeQuestions}
                values={values}
                errors={errors}
                setValue={setValue}
                toggleMulti={toggleMulti}
              />
            )}

            <div className="onboarding__nav">
              <button type="button" className="btn btn--ghost" onClick={goBack} disabled={activeIndex === 0}>
                Volver
              </button>
              {activeSection && activeSection.final ? (
                <button type="button" className="btn btn--primary" onClick={handleSubmit}>
                  Generar onboarding <span className="arrow">→</span>
                </button>
              ) : (
                <button type="button" className="btn btn--primary" onClick={goNext}>
                  Continuar <span className="arrow">→</span>
                </button>
              )}
            </div>
          </main>

          <aside className="onboarding__blueprint">
            <OnboardingBlueprint items={blueprintItems} values={values} />
          </aside>
        </div>
      </div>
    </section>
  );
}

function OnboardingQuestionPanel({ section, questions, values, errors, setValue, toggleMulti }) {
  if (!section) return null;
  return (
    <div className="onboarding__panel">
      <div className="onboarding__sectionHead">
        <span>{section.eyebrow}</span>
        <h2>{section.title}</h2>
        <p>{section.intro}</p>
      </div>

      <div className="onboarding__questions">
        {questions.map((q) => (
          <OnboardingQuestion
            key={q.id}
            question={q}
            value={values[q.id]}
            error={errors[q.id]}
            setValue={setValue}
            toggleMulti={toggleMulti}
          />
        ))}
      </div>
    </div>
  );
}

function OnboardingQuestion({ question, value, error, setValue, toggleMulti }) {
  const inputId = `onboarding-${question.id}`;
  const renderControl = () => {
    if (question.type === "textarea") {
      return (
        <textarea
          id={inputId}
          className="onboarding__input onboarding__textarea"
          rows={4}
          value={value || ""}
          onChange={(e) => setValue(question.id, e.target.value)}
          placeholder="Escribi una respuesta breve..."
        />
      );
    }

    if (["text", "email", "tel", "url"].includes(question.type)) {
      return (
        <input
          id={inputId}
          className="onboarding__input"
          type={question.type === "url" ? "text" : question.type}
          value={value || ""}
          onChange={(e) => setValue(question.id, e.target.value)}
          placeholder={question.type === "email" ? "nombre@empresa.com" : question.type === "tel" ? "+54 9 11 1234 5678" : "Completar..."}
        />
      );
    }

    if (question.type === "choice" || question.type === "toggle") {
      return (
        <div className={`onboarding__choices ${question.type === "toggle" ? "onboarding__choices--toggle" : ""}`}>
          {(question.options || []).map((option) => (
            <button
              key={option}
              type="button"
              data-question-id={question.id}
              data-option={option}
              className={`onboarding__choice ${value === option ? "is-selected" : ""}`}
              onClick={() => setValue(question.id, option)}
              aria-pressed={value === option}>
              {option}
            </button>
          ))}
        </div>
      );
    }

    if (question.type === "multi") {
      const selected = Array.isArray(value) ? value : [];
      return (
        <div className="onboarding__choices">
          {(question.options || []).map((option) => {
            const isSelected = selected.includes(option);
            return (
              <button
                key={option}
                type="button"
                data-question-id={question.id}
                data-option={option}
                className={`onboarding__choice ${isSelected ? "is-selected" : ""}`}
                onClick={() => toggleMulti(question.id, option)}
                aria-pressed={isSelected}>
                <span className="onboarding__check" aria-hidden="true"></span>
                {option}
              </button>
            );
          })}
        </div>
      );
    }

    if (question.type === "slider") {
      const min = question.min || 1;
      const max = question.max || 5;
      const current = value || question.defaultValue || min;
      const updateSlider = (e) => setValue(question.id, Number(e.target.value));
      return (
        <div className="onboarding__slider">
          <input
            id={inputId}
            className="onboarding__range"
            type="range"
            min={min}
            max={max}
            step="1"
            value={current}
            onChange={updateSlider}
            onInput={updateSlider}
            style={{ "--p": `${((current - min) / (max - min)) * 100}%` }}
          />
          <div className="onboarding__sliderScale">
            {Array.from({ length: max - min + 1 }).map((_, i) => (
              <button
                key={i}
                type="button"
                className={current === min + i ? "is-active" : ""}
                onClick={() => setValue(question.id, min + i)}
                aria-pressed={current === min + i}>
                {min + i}
              </button>
            ))}
          </div>
        </div>
      );
    }

    return null;
  };

  return (
    <div className={`onboarding__question ${error ? "has-error" : ""}`}>
      <label htmlFor={inputId} className="onboarding__label">
        {question.label}
        {question.required && <span> requerido</span>}
      </label>
      {question.helper && <p className="onboarding__helper">{question.helper}</p>}
      {renderControl()}
      {error && <p className="onboarding__error">{error}</p>}
    </div>
  );
}

function OnboardingBlueprint({ items, values }) {
  const futureChannels = Array.isArray(values.channels_to_connect)
    ? values.channels_to_connect.filter((ch) => ch !== "WhatsApp")
    : [];

  return (
    <div className="onboarding__blueprintCard">
      <div className="onboarding__blueprintHead">
        <span>Planos del agente</span>
        <strong>Live</strong>
      </div>
      <div className="onboarding__blueprintList">
        {items.map((item) => {
          const isFilled = item.value && !item.value.includes("A definir") && !item.value.includes("Pendiente") && !item.value.includes("requerido");
          return (
            <div key={item.label} className={`onboarding__blueprintItem ${isFilled ? "is-filled" : ""}`}>
              <span>{item.label}</span>
              <strong>{item.value}</strong>
            </div>
          );
        })}
      </div>
      {futureChannels.length > 0 && (
        <div className="onboarding__note">
          Canales adicionales detectados: {futureChannels.join(", ")}. Mirai los puede contemplar como alcance extra o fase futura.
        </div>
      )}
    </div>
  );
}

function OnboardingFinal({
  section,
  payload,
  clientMarkdown,
  internalMarkdown,
  answers,
  copied,
  onSubmit,
  onCopy,
  onDownload,
}) {
  return (
    <div className="onboarding__panel onboarding__panel--final">
      <div className="onboarding__sectionHead">
        <span>{section.eyebrow}</span>
        <h2>{section.title}</h2>
        <p>{payload ? "Onboarding generado. Ya podes copiar o descargar los entregables." : section.intro}</p>
      </div>

      {!payload && (
        <div className="onboarding__finalPrompt">
          <strong>Ultimo paso</strong>
          <p>Genera el onboarding para crear el payload mock, el markdown cliente y el documento interno para Mirai.</p>
          <button type="button" className="btn btn--primary" onClick={onSubmit}>
            Generar onboarding <span className="arrow">→</span>
          </button>
        </div>
      )}

      <div className="onboarding__markdownTools">
        <button type="button" className="btn btn--ghost btn--sm" onClick={() => onCopy("cliente", clientMarkdown)}>
          {copied === "cliente" ? "Copiado" : "Copiar resumen"}
        </button>
        <button type="button" className="btn btn--ghost btn--sm" onClick={() => onDownload("planos-cliente.md", clientMarkdown)}>
          Descargar markdown
        </button>
        <button type="button" className="btn btn--ghost btn--sm" onClick={() => onDownload("answers.json", JSON.stringify(answers, null, 2), "application/json")}>
          Descargar answers.json
        </button>
        <button type="button" className="btn btn--ghost btn--sm" onClick={() => onDownload("agente.md", internalMarkdown)}>
          Descargar agente.md
        </button>
      </div>

      <OnboardingMarkdownPreview markdown={clientMarkdown} />
    </div>
  );
}

function OnboardingMarkdownPreview({ markdown }) {
  const lines = markdown.split("\n");
  const blocks = [];
  let list = [];

  const flushList = () => {
    if (!list.length) return;
    blocks.push(<ul key={`list-${blocks.length}`}>{list.map((item, i) => <li key={i}>{item}</li>)}</ul>);
    list = [];
  };

  lines.forEach((line, i) => {
    const trimmed = line.trim();
    if (!trimmed) {
      flushList();
      return;
    }
    if (trimmed.startsWith("- ")) {
      list.push(trimmed.slice(2));
      return;
    }
    flushList();
    if (trimmed.startsWith("# ")) {
      blocks.push(<h1 key={i}>{trimmed.slice(2)}</h1>);
    } else if (trimmed.startsWith("## ")) {
      blocks.push(<h2 key={i}>{trimmed.slice(3)}</h2>);
    } else {
      blocks.push(<p key={i}>{trimmed}</p>);
    }
  });
  flushList();

  return <div className="onboarding__markdown">{blocks}</div>;
}

Object.assign(window, { OnboardingPage });