window.createMinimalResultModule = function createMinimalResultModule(deps) {
  const {
    safeText,
    parseAnswerMarkdownLines,
    normalizeExplorationLabel,
    renderInlineRichText,
    isAllowedBulletLine,
    MagnifierIcon,
    ArrowRight,
    Globe,
  } = deps || {};

  const MinimalResult = ({ data, query, setQuery, onRunNext, requestRunning, showQueryBar = true, siteTheme = "dark" }) => {
    const result = data.results[0] || { claims: [], tool_rankings: [] };
    const responseMode = String(data?.response_mode || "").trim();
    const isSkillsFound = responseMode === "skills_found";
    const isGeneratedSkill = responseMode === "generated_skill";
    const isLightTheme = siteTheme === "light";
    const lines = parseAnswerMarkdownLines(data.final_answer || "");
    const rankingMetric = (tool) => {
      const hasElo = Number.isFinite(Number(tool?.elo));
      if (hasElo) {
        return { label: "ELO", value: Number(tool.elo).toFixed(0), isElo: true };
      }
      return { label: "SCORE", value: Number(tool?.score || 0).toFixed(1), isElo: false };
    };

    const renderGeneratedMarkdown = (markdownText) => {
      const lines = String(markdownText || "").replace(/\r\n/g, "\n").split("\n");
      const blocks = [];
      let idx = 0;
      let key = 0;

      const nextKey = (prefix) => `${prefix}_${key++}`;

      while (idx < lines.length) {
        const line = lines[idx];
        const trimmed = String(line || "").trim();

        if (!trimmed) {
          idx += 1;
          continue;
        }

        if (/^---+$/.test(trimmed)) {
          blocks.push(
            <div
              key={nextKey("hr")}
              className={`${isLightTheme ? "border-b border-[#d7d0c4]" : "border-b border-white/10"}`}
            />
          );
          idx += 1;
          continue;
        }

        if (/^```/.test(trimmed)) {
          const codeLines = [];
          idx += 1;
          while (idx < lines.length && !/^```/.test(String(lines[idx] || "").trim())) {
            codeLines.push(lines[idx]);
            idx += 1;
          }
          if (idx < lines.length) idx += 1;
          blocks.push(
            <pre
              key={nextKey("code")}
              className={`overflow-x-auto p-4 md:p-5 text-sm leading-7 whitespace-pre-wrap rounded-sm ${isLightTheme ? "bg-[#F3EBDD] text-[#1F1D1A]" : "bg-black/45 text-white/88"}`}
            >
              {codeLines.join("\n")}
            </pre>
          );
          continue;
        }

        const headingMatch = /^(#{1,6})\s+(.*)$/.exec(trimmed);
        if (headingMatch) {
          const level = headingMatch[1].length;
          const text = headingMatch[2].trim();
          const headingClass = level === 1
            ? "text-3xl md:text-4xl font-semibold tracking-tight"
            : level === 2
              ? "text-2xl md:text-3xl font-semibold tracking-tight pt-4"
              : "text-lg md:text-xl font-semibold tracking-tight pt-2";
          blocks.push(
            <div key={nextKey("heading")} className="space-y-3">
              <h3 className={`${headingClass} ${isLightTheme ? "text-[#1F1D1A]" : "text-white"}`}>
                {renderInlineRichText(text, "underline")}
              </h3>
              {level <= 2 ? (
                <div className={`${isLightTheme ? "border-b border-[#d7d0c4]" : "border-b border-white/10"}`} />
              ) : null}
            </div>
          );
          idx += 1;
          continue;
        }

        if (/^[-*]\s+/.test(trimmed)) {
          const items = [];
          while (idx < lines.length && /^[-*]\s+/.test(String(lines[idx] || "").trim())) {
            items.push(String(lines[idx] || "").trim().replace(/^[-*]\s+/, ""));
            idx += 1;
          }
          blocks.push(
            <ul key={nextKey("ul")} className="space-y-3">
              {items.map((item, itemIdx) => (
                <li key={`${itemIdx}_${item}`} className="flex items-start gap-3">
                  <span className={`mt-[0.62rem] w-1.5 h-1.5 rounded-full shrink-0 ${isLightTheme ? "bg-[#1F1D1A]" : "bg-white/70"}`} />
                  <div className={`text-sm md:text-base leading-8 ${isLightTheme ? "text-[#3F372E]" : "text-white/82"}`}>
                    {renderInlineRichText(item, "underline")}
                  </div>
                </li>
              ))}
            </ul>
          );
          continue;
        }

        if (/^\d+\.\s+/.test(trimmed)) {
          const items = [];
          while (idx < lines.length && /^\d+\.\s+/.test(String(lines[idx] || "").trim())) {
            const itemLine = String(lines[idx] || "").trim();
            const match = /^(\d+)\.\s+(.*)$/.exec(itemLine);
            items.push({ number: match ? match[1] : "", text: match ? match[2] : itemLine });
            idx += 1;
          }
          blocks.push(
            <ol key={nextKey("ol")} className="space-y-3">
              {items.map((item, itemIdx) => (
                <li key={`${itemIdx}_${item.number}`} className="flex items-start gap-3">
                  <span className={`min-w-[1.5rem] text-sm md:text-base font-semibold ${isLightTheme ? "text-[#1F1D1A]" : "text-white"}`}>
                    {item.number}.
                  </span>
                  <div className={`text-sm md:text-base leading-8 ${isLightTheme ? "text-[#3F372E]" : "text-white/82"}`}>
                    {renderInlineRichText(item.text, "underline")}
                  </div>
                </li>
              ))}
            </ol>
          );
          continue;
        }

        const paragraphLines = [];
        while (idx < lines.length) {
          const current = String(lines[idx] || "");
          const currentTrimmed = current.trim();
          if (!currentTrimmed || /^#{1,6}\s+/.test(currentTrimmed) || /^```/.test(currentTrimmed) || /^[-*]\s+/.test(currentTrimmed) || /^\d+\.\s+/.test(currentTrimmed)) {
            break;
          }
          paragraphLines.push(currentTrimmed);
          idx += 1;
        }
        if (paragraphLines.length) {
          blocks.push(
            <p
              key={nextKey("p")}
              className={`text-sm md:text-base leading-8 whitespace-pre-wrap ${isLightTheme ? "text-[#3F372E]" : "text-white/82"}`}
            >
              {renderInlineRichText(paragraphLines.join(" "), "underline")}
            </p>
          );
          continue;
        }

        idx += 1;
      }

      return blocks;
    };

    const renderAnswerLine = (line, idx) => {
      const clean = normalizeExplorationLabel(String(line || "").trim());
      const cleanNoBullet = clean.replace(/^[-*]\s+/, "");
      if (/^#{1,6}\s+/.test(clean)) {
        const text = clean.replace(/^#{1,6}\s+/, "").trim();
        return <h4 key={idx} className="text-lg md:text-xl font-semibold text-[#24292f] mt-3">{renderInlineRichText(text, "underline")}</h4>;
      }
      if (/^[-*]\s+/.test(clean)) {
        const text = clean.replace(/^[-*]\s+/, "").trim();
        if (!isAllowedBulletLine(text)) {
          return <p key={idx}>{renderInlineRichText(text, "underline")}</p>;
        }
        return (
          <div key={idx} className="flex items-start gap-2">
            <span className="mt-2 w-1.5 h-1.5 rounded-full bg-[#57606a] shrink-0" />
            <p>{renderInlineRichText(text, "underline")}</p>
          </div>
        );
      }
      if (/^\d+\.\s+/.test(cleanNoBullet)) {
        const m = /^(\d+\.)\s+(.*)$/.exec(cleanNoBullet);
        return (
          <p key={idx}>
            <span className="font-semibold mr-1">{m ? m[1] : ""}</span>
            {renderInlineRichText(m ? m[2] : cleanNoBullet, "underline")}
          </p>
        );
      }
      const headingMatch = /^(final synthesized answer|expert recommendation summary|exploration level|traceable room id|verified claim|confidence)\s*:\s*(.*)$/i.exec(
        cleanNoBullet,
      );
      if (headingMatch) {
        const heading = headingMatch[1];
        const rest = headingMatch[2] || "";
        return (
          <div key={idx} className="space-y-1">
            <div className="text-[10px] tracking-[0.2em] font-bold uppercase text-gray-500">{heading}</div>
            {rest ? <p>{renderInlineRichText(rest, "underline")}</p> : null}
          </div>
        );
      }

      const titleUrlMatch = /^(.*?):\s*(https?:\/\/\S+)$/i.exec(cleanNoBullet);
      if (titleUrlMatch) {
        const title = titleUrlMatch[1].trim();
        const url = titleUrlMatch[2].trim();
        return (
          <p key={idx}>
            <span>{title}: </span>
            <a href={url} target="_blank" rel="noreferrer" className="underline">
              {url}
            </a>
          </p>
        );
      }

      return <p key={idx}>{renderInlineRichText(cleanNoBullet, "underline")}</p>;
    };

    if (isGeneratedSkill) {
      const selectedSkill = Array.isArray(data?.selected_skills) && data.selected_skills[0] && typeof data.selected_skills[0] === "object"
        ? data.selected_skills[0]
        : {};
      const skillMd = safeText(data?.skill_md, "");
      const renderedSkillBlocks = renderGeneratedMarkdown(skillMd);

      return (
        <div className="flex-grow flex flex-col items-center justify-start pt-10 md:pt-12 px-4 w-full max-w-6xl mx-auto overflow-y-auto pb-20 animate-[fade-in_0.4s_ease-out]">
          {showQueryBar && (
            <div className={`w-full space-y-4 mb-10 pb-5 ${isLightTheme ? "border-b border-[#d7d0c4]" : "border-b border-white/10"}`}>
              <div className="flex flex-col md:flex-row gap-3">
                <div className="relative flex-grow flex items-center">
                  <MagnifierIcon className={`absolute left-4 w-5 h-5 ${isLightTheme ? "text-[#8D7A68]" : "text-white/35"}`} />
                  <input
                    type="text"
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="Describe your task"
                    className={`w-full rounded-none py-3 pl-12 pr-4 text-base focus:outline-none transition-all ${
                      isLightTheme
                        ? "border border-[#d7d0c4] bg-[#FBF7EF] text-[#1F1D1A] placeholder:text-[#8D7A68]"
                        : "border border-white/10 bg-[#0b0b0b] text-white placeholder:text-white/25 focus:border-white/30"
                    }`}
                  />
                </div>
                <button
                  onClick={onRunNext}
                  disabled={requestRunning}
                  className={`px-6 py-3 rounded-none transition-colors font-semibold flex items-center justify-center gap-2 whitespace-nowrap disabled:opacity-50 ${
                    isLightTheme ? "bg-[#1F1D1A] text-[#F5F1E8] hover:bg-[#34302A]" : "bg-white text-black hover:bg-[#d9d9d9]"
                  }`}
                >
                  Ask Agents <ArrowRight size={16} />
                </button>
              </div>
            </div>
          )}

          <div className="w-full space-y-8">
            <div className="space-y-3">
              <div className={`text-[11px] tracking-[0.22em] uppercase ${isLightTheme ? "text-[#8D7A68]" : "text-white/40"}`}>Task</div>
              <h2 className={`text-2xl md:text-4xl font-semibold tracking-tight leading-tight ${isLightTheme ? "text-[#1F1D1A]" : "text-white"}`}>
                {data.query}
              </h2>
              <p className={`text-sm md:text-base leading-7 max-w-4xl ${isLightTheme ? "text-[#52493F]" : "text-white/72"}`}>
                {safeText(data?.final_answer, "Generated a task-specific skill.")}
              </p>
            </div>

            <div className="grid grid-cols-1 xl:grid-cols-[320px_minmax(0,1fr)] gap-6 items-start">
              <div className={`p-5 md:p-6 space-y-4 ${isLightTheme ? "border border-[#d7d0c4] bg-[#FBF7EF]" : "border border-white/10 bg-[#0a0a0a]"}`}>
                <div className={`text-[11px] tracking-[0.22em] uppercase ${isLightTheme ? "text-[#8D7A68]" : "text-white/40"}`}>Selected Tool</div>
                <div className={`text-xl font-semibold leading-tight ${isLightTheme ? "text-[#1F1D1A]" : "text-white"}`}>
                  {safeText(selectedSkill?.name, "Unknown")}
                </div>
                <div className={`text-sm break-all ${isLightTheme ? "text-[#6F665B]" : "text-white/45"}`}>
                  {safeText(selectedSkill?.source, "Unknown source")}
                </div>
                <div className="pt-2">
                  <div className={`text-[11px] tracking-[0.18em] uppercase ${isLightTheme ? "text-[#8D7A68]" : "text-white/35"}`}>Rating</div>
                  <div className={`text-3xl font-semibold leading-none mt-2 ${isLightTheme ? "text-[#1F1D1A]" : "text-white"}`}>
                    {Number.isFinite(Number(selectedSkill?.rating)) ? Number(selectedSkill.rating).toFixed(0) : "—"}
                  </div>
                </div>
                {referenceUrl ? (
                  <div className="pt-3 space-y-2">
                    <div className={`text-[11px] tracking-[0.18em] uppercase ${isLightTheme ? "text-[#8D7A68]" : "text-white/35"}`}>Reference Skill</div>
                    <a
                      href={referenceUrl}
                      target="_blank"
                      rel="noreferrer"
                      className={`inline-flex items-center gap-2 text-sm break-all ${isLightTheme ? "text-[#1F1D1A] hover:text-black" : "text-white/80 hover:text-white"}`}
                    >
                      <Globe size={14} />
                      <span className="underline">{referenceUrl}</span>
                    </a>
                  </div>
                ) : null}
              </div>

              <div className={`p-5 md:p-6 space-y-5 ${isLightTheme ? "border border-[#d7d0c4] bg-[#FBF7EF]" : "border border-white/10 bg-[#0a0a0a]"}`}>
                {renderedSkillBlocks.length === 0 ? (
                  <div className={`text-sm ${isLightTheme ? "text-[#6F665B]" : "text-white/55"}`}>
                    No generated skill was returned.
                  </div>
                ) : (
                  <div className="space-y-5 md:space-y-6">
                    {renderedSkillBlocks}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      );
    }

    if (isSkillsFound) {
      const skills = Array.isArray(data?.skills) ? data.skills : [];
      const summaryText = safeText(data?.final_answer, "No matching skills were found.");

      return (
        <div className="flex-grow flex flex-col items-center justify-start pt-10 md:pt-12 px-4 w-full max-w-6xl mx-auto overflow-y-auto pb-20 animate-[fade-in_0.4s_ease-out]">
          {showQueryBar && (
            <div className={`w-full space-y-4 mb-10 pb-5 ${isLightTheme ? "border-b border-[#d7d0c4]" : "border-b border-white/10"}`}>
              <div className="flex flex-col md:flex-row gap-3">
                <div className="relative flex-grow flex items-center">
                  <MagnifierIcon className={`absolute left-4 w-5 h-5 ${isLightTheme ? "text-[#8D7A68]" : "text-white/35"}`} />
                  <input
                    type="text"
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder="Search for tools"
                    className={`w-full rounded-none py-3 pl-12 pr-4 text-base focus:outline-none transition-all ${
                      isLightTheme
                        ? "border border-[#d7d0c4] bg-[#FBF7EF] text-[#1F1D1A] placeholder:text-[#8D7A68]"
                        : "border border-white/10 bg-[#0b0b0b] text-white placeholder:text-white/25 focus:border-white/30"
                    }`}
                  />
                </div>
                <button
                  onClick={onRunNext}
                  disabled={requestRunning}
                  className={`px-6 py-3 rounded-none transition-colors font-semibold flex items-center justify-center gap-2 whitespace-nowrap disabled:opacity-50 ${
                    isLightTheme ? "bg-[#1F1D1A] text-[#F5F1E8] hover:bg-[#34302A]" : "bg-white text-black hover:bg-[#d9d9d9]"
                  }`}
                >
                  Ask Agents <ArrowRight size={16} />
                </button>
              </div>
            </div>
          )}

          <div className="w-full space-y-8">
            <div className="space-y-3">
              <div className={`text-[11px] tracking-[0.22em] uppercase ${isLightTheme ? "text-[#8D7A68]" : "text-white/40"}`}>Query</div>
              <h2 className={`text-2xl md:text-4xl font-semibold tracking-tight leading-tight ${isLightTheme ? "text-[#1F1D1A]" : "text-white"}`}>
                {data.query}
              </h2>
            </div>

            <div className={`p-6 md:p-7 space-y-4 ${isLightTheme ? "border border-[#d7d0c4] bg-[#FBF7EF]" : "border border-white/10 bg-[#0a0a0a]"}`}>
              <div className={`text-[11px] tracking-[0.22em] uppercase ${isLightTheme ? "text-[#8D7A68]" : "text-white/40"}`}>Approx CLI Result</div>
              <p className={`text-sm md:text-base leading-7 max-w-4xl ${isLightTheme ? "text-[#52493F]" : "text-white/78"}`}>
                {summaryText}
              </p>
            </div>

            <div className="space-y-4">
              <div className="flex items-center justify-between gap-4">
                <div className={`text-[11px] tracking-[0.22em] uppercase ${isLightTheme ? "text-[#8D7A68]" : "text-white/40"}`}>Ranked Tools</div>
                <div className={`text-xs ${isLightTheme ? "text-[#8D7A68]" : "text-white/35"}`}>{skills.length} results</div>
              </div>

              {skills.length === 0 ? (
                <div className={`p-6 text-sm ${isLightTheme ? "border border-[#d7d0c4] bg-[#FBF7EF] text-[#6F665B]" : "border border-white/10 bg-[#0a0a0a] text-white/55"}`}>
                  No matching tools were found.
                </div>
              ) : (
                <div className="space-y-3">
                  {skills.map((skill, idx) => (
                    <div
                      key={skill.id || `${skill.name}_${idx}`}
                      className={`px-5 py-4 md:px-6 md:py-5 ${isLightTheme ? "border border-[#d7d0c4] bg-[#FBF7EF]" : "border border-white/10 bg-[#0a0a0a]"}`}
                    >
                      <div className="flex items-start justify-between gap-4">
                        <div className="min-w-0 space-y-1">
                          <div className="flex items-center gap-3 min-w-0">
                            <span className={`text-[11px] font-semibold tracking-[0.18em] uppercase shrink-0 ${isLightTheme ? "text-[#8D7A68]" : "text-white/35"}`}>
                              #{idx + 1}
                            </span>
                            <h3 className={`text-base md:text-lg font-semibold truncate ${isLightTheme ? "text-[#1F1D1A]" : "text-white"}`}>
                              {skill.name}
                            </h3>
                          </div>
                          <div className={`text-xs md:text-sm break-all ${isLightTheme ? "text-[#6F665B]" : "text-white/42"}`}>
                            {skill.source || skill.id || "Unknown source"}
                          </div>
                        </div>

                        <div className="shrink-0 text-right">
                          <div className={`text-[11px] tracking-[0.18em] uppercase ${isLightTheme ? "text-[#8D7A68]" : "text-white/35"}`}>Rating</div>
                          <div className={`text-xl md:text-2xl font-semibold leading-none mt-1 ${isLightTheme ? "text-[#1F1D1A]" : "text-white"}`}>
                            {Number.isFinite(Number(skill.rating)) ? Number(skill.rating).toFixed(0) : "—"}
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      );
    }

    return (
      <div className="flex-grow flex flex-col items-center justify-start pt-12 px-4 w-full max-w-6xl mx-auto overflow-y-auto pb-20 animate-[fade-in_0.4s_ease-out]">
        {showQueryBar && (
          <div className="w-full space-y-4 mb-12 border-b border-[#d0d7de] pb-4">
            <div className="flex gap-2">
              <div className="relative flex-grow flex items-center">
                <MagnifierIcon className="absolute left-4 text-[#57606a] w-5 h-5" />
                <input
                  type="text"
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="What do you need to know?"
                  className="w-full border border-[#d0d7de] rounded-md py-3 pl-12 pr-4 text-base bg-[#f6f8fa] focus:bg-[#ffffff] focus:outline-none focus:border-[#0969da] focus:ring-1 focus:ring-[#0969da] transition-all shadow-inner"
                />
              </div>
              <button
                onClick={onRunNext}
                disabled={requestRunning}
                className="px-6 py-3 bg-[#2da44e] text-white rounded-md hover:bg-[#2c974b] transition-colors font-semibold shadow-sm flex items-center justify-center gap-2 whitespace-nowrap disabled:opacity-50"
              >
                Ask Agents <ArrowRight size={16} />
              </button>
            </div>
          </div>
        )}

        <div className="w-full space-y-16">
          <div className="space-y-4">
            <div className="text-xs font-semibold text-[#57606a]">Target query</div>
            <h2 className="text-3xl md:text-4xl font-semibold tracking-tight leading-tight text-[#24292f]">{data.query}</h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
            <div className="md:col-span-2 space-y-8">
              <div className="text-xs font-semibold text-[#57606a] border-b border-[#d0d7de] pb-2">
                {isSkillsFound ? "Approx CLI Summary" : "Synthesis"}
              </div>
              <div className="text-base md:text-lg text-[#24292f] leading-relaxed space-y-4">
                {lines.map((line, i) => renderAnswerLine(line, i))}
              </div>
            </div>

            <div className="space-y-6">
              <div className="text-xs font-semibold text-[#57606a] border-b border-[#d0d7de] pb-2">
                {isSkillsFound ? "Ranked Skills" : "Inverse Arena Votes"}
              </div>
              {result.tool_rankings.length === 0 && <div className="text-xs text-[#8c959f]">{isSkillsFound ? "No skills returned." : "No votes returned."}</div>}
              {result.tool_rankings.map((tool, idx) => {
                const m = rankingMetric(tool);
                return (
                  <div key={idx} className="border border-[#d0d7de] bg-white rounded-md p-5 hover:border-[#0969da] transition-colors group">
                    <div className="flex justify-between items-center mb-3">
                      <span className="font-semibold text-base tracking-tight text-[#24292f]">{tool.tool}</span>
                      <span className="font-semibold text-base text-[#24292f]">
                        {m.value}
                        <span className="text-xs opacity-60"> {m.isElo ? "ELO" : "/ 10"}</span>
                      </span>
                    </div>
                    <p className="text-sm text-[#57606a] leading-relaxed">{tool.reason}</p>
                    {isSkillsFound && tool?.source ? (
                      <div className="mt-2 text-[11px] text-[#8c959f] break-all">{tool.source}</div>
                    ) : null}
                  </div>
                );
              })}
            </div>
          </div>

          <div className="pt-4 space-y-8">
            <div className="text-xs font-semibold text-[#57606a] border-b border-[#d0d7de] pb-2">Sources</div>
            {data.web_results.length === 0 ? (
              <div className="text-sm text-[#8c959f]">
                {isSkillsFound ? "This response was generated from the Approxination CLI skills search flow." : "No sources returned."}
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {data.web_results.map((res, i) => (
                <a
                  key={i}
                  href={res.url || "#"}
                  target={res.url && res.url !== "#" ? "_blank" : undefined}
                  rel={res.url && res.url !== "#" ? "noreferrer" : undefined}
                  className="block space-y-3 p-6 bg-[#f6f8fa] hover:bg-white border border-[#d0d7de] rounded-md transition-all hover:border-[#0969da]"
                >
                  <div className="flex items-center gap-2 text-[#8c959f]">
                    <Globe size={12} className="shrink-0" />
                    <span className="text-[11px] font-medium truncate hover:text-[#0969da] transition-colors">
                      {res.url}
                    </span>
                  </div>
                  <h3 className="text-sm font-semibold tracking-tight leading-snug text-[#24292f]">{res.title}</h3>
                  <p className="text-sm leading-relaxed text-[#57606a]">{res.snippet}</p>
                </a>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

  return { MinimalResult };
};