const { useState: useStateA, useEffect: useEffectA } = React;

const DEFAULT_QUESTION = "我想研究中国 40-60 岁人群肥胖与睡眠时长的关系";
const RESULT_KEY = "medroute_live_result_v1";
const QUESTION_KEY = "medroute_live_question_v1";

const App = () => {
  const [loading, setLoading] = useStateA(false);
  const [question, setQuestion] = useStateA(DEFAULT_QUESTION);
  const [result, setResult] = useStateA(null);
  const [statusNote, setStatusNote] = useStateA("已接入 MiniMax CodingPlan。输入真实问题后，将返回 live route / shortlist / feasibility / next action。");
  const [error, setError] = useStateA("");

  useEffectA(() => {
    const savedQuestion = localStorage.getItem(QUESTION_KEY);
    if (savedQuestion) setQuestion(savedQuestion);

    const savedResult = localStorage.getItem(RESULT_KEY);
    if (savedResult) {
      try {
        setResult(JSON.parse(savedResult));
      } catch (_err) {
        localStorage.removeItem(RESULT_KEY);
      }
    }
  }, []);

  useEffectA(() => {
    localStorage.setItem(QUESTION_KEY, question);
  }, [question]);

  useEffectA(() => {
    if (result) {
      localStorage.setItem(RESULT_KEY, JSON.stringify(result));
    } else {
      localStorage.removeItem(RESULT_KEY);
    }
  }, [result]);

  const onGenerate = async (rawQuestion) => {
    const q = String(rawQuestion || question || "").trim();
    if (!q) {
      setError("请先输入一个真实研究问题。");
      return;
    }

    setQuestion(q);
    setLoading(true);
    setError("");
    setStatusNote("正在调用 MiniMax CodingPlan 分析你的研究问题…");

    try {
      const resp = await fetch("/api/route", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ question: q }),
      });

      const data = await resp.json().catch(() => ({}));
      if (!resp.ok) {
        throw new Error(data.error || `请求失败（HTTP ${resp.status}）`);
      }

      setResult(data);
      if (data.provider === "fallback_rules") {
        setStatusNote(`MiniMax 当前未成功返回结构化结果，已切到规则兜底。原因：${data.warning || "未知错误"}`);
      } else {
        setStatusNote(`已由 ${data.provider_label || "MiniMax CodingPlan"} 生成结果。模型：${data.model || "unknown"}`);
      }

      setTimeout(() => {
        const el = document.querySelector(".mr-route");
        if (el) {
          const y = el.getBoundingClientRect().top + window.pageYOffset - 20;
          window.scrollTo({ top: y, behavior: "smooth" });
        }
      }, 80);
    } catch (err) {
      setError(err instanceof Error ? err.message : "请求失败，请稍后重试。");
      setStatusNote("当前没有拿到实时返回，请检查后端代理和 MiniMax 配置。");
    } finally {
      setLoading(false);
    }
  };

  const onReset = () => {
    setResult(null);
    setError("");
    setStatusNote("已重置。你可以输入新的研究问题，重新生成 live route。");
    localStorage.removeItem(RESULT_KEY);
  };

  const hasRoute = Boolean(result);

  const shortlist = result?.shortlist || [];
  const route = result?.route || null;
  const feasibility = result?.feasibility || null;
  const nextAction = result?.next_action || null;

  return (
    <div className="mr-shell">
      <Nav />
      <Hero
        question={question}
        onQuestionChange={setQuestion}
        onGenerate={onGenerate}
        loading={loading}
        statusNote={statusNote}
        error={error}
      />

      {!hasRoute ? (
        <>
          <EmptyState footNote="上方交互框已接入 MiniMax CodingPlan；提交后，这里会展开真实 route、shortlist、feasibility 和 next action。" />
          <EvidenceGrid
            onSampleClick={(q) => {
              setQuestion(q);
              onGenerate(q);
            }}
          />
        </>
      ) : (
        <>
          <RouteHeader route={route} />
          <div className="mr-two-col">
            <div className="mr-two-col__main">
              <div className="mr-section-head">
                <div className="mr-kicker">SHORTLIST</div>
                <div className="mr-section-head__note">{shortlist.length} datasets · ranked by fit</div>
              </div>
              <div className="mr-shortlist">
                {shortlist.map((c, i) => (
                  <DatasetCard key={`${c.name}-${i}`} card={c} rank={i + 1} />
                ))}
              </div>
            </div>
            <div className="mr-two-col__side">
              <div className="mr-kicker">FEASIBILITY</div>
              <Feasibility snapshot={feasibility} />
              <NextAction plan={nextAction} />
              <button className="mr-btn mr-btn--ghost mr-reset" onClick={onReset}>
                ↺ Ask another question
              </button>
            </div>
          </div>
          <EvidenceGrid
            onSampleClick={(q) => {
              setQuestion(q);
              onGenerate(q);
            }}
            limit={6}
          />
        </>
      )}

      <footer className="mr-foot">
        <span className="mr-foot__brand">MedRoute</span>
        <span className="mr-foot__sep">·</span>
        <span>part of <b>AI Research Army</b></span>
        <span className="mr-foot__sep">·</span>
        <span>live routing via <b>MiniMax CodingPlan</b></span>
      </footer>
    </div>
  );
};

window.App = App;