import React, { useState } from "react";
import type { DomainType } from "./engine/shared/types";
import { AppHeader, InputBanner, ScenarioLayout } from "./ui";
import {
  SCENARIO_REGISTRY,
  DEFAULT_SCENARIO_ID,
  getScenarioById,
} from "./scenarios/registry";
import {
  MACRO_ROADMAP_ITEMS,
  NOTEBOOKLM_MACRO_ID,
} from "./scenarios/macro";
import {
  rationingScenario,
  type RationingParams,
} from "./scenarios/micro/consumer/rationing";
import {
  priceCeilingScenario,
  type PriceCeilingParams,
} from "./scenarios/micro/consumer/price_ceiling";
import {
  cornerSolutionScenario,
  type CornerSolutionParams,
} from "./scenarios/micro/consumer/corner_solution";
import {
  inkindVsCashScenario,
  type InKindVsCashParams,
} from "./scenarios/micro/consumer/inkind_vs_cash";

export default function App(): React.JSX.Element {
  const [currentDomain, setCurrentDomain] = useState<"all" | DomainType>("all");
  const [currentScenarioId, setCurrentScenarioId] =
    useState<string>(DEFAULT_SCENARIO_ID);

  // Lưu trữ state params độc lập cho từng module
  const [rationingParams, setRationingParams] = useState<RationingParams>({
    quotaX: 6,
  });
  const [ceilingParams, setCeilingParams] = useState<PriceCeilingParams>({
    pFixed: 5,
    xCap: 6,
  });
  const [cornerParams, setCornerParams] = useState<CornerSolutionParams>({
    exampleCase: 1,
    yogurtPrice: 2.0,
    iceCreamTaste: 0.85,
    trustFund: 80,
    trustAlpha: 0.3,
    foodStamp: 70,
    stampAlpha: 0.25,
  });
  const [inkindParams, setInkindParams] = useState<InKindVsCashParams>({
    alpha: 0.3,
    transfer: 80,
  });

  const activeScenario =
    getScenarioById(currentScenarioId) ?? rationingScenario;

  const handleSelectDomain = (domain: "all" | DomainType) => {
    setCurrentDomain(domain);
    if (domain === "micro") {
      if (activeScenario.meta.domain !== "micro") {
        setCurrentScenarioId("micro.consumer.rationing");
      }
    } else if (domain === "bridge") {
      setCurrentScenarioId("micro.consumer.corner_solution");
      setCornerParams((prev) => ({ ...prev, exampleCase: 2 }));
    }
  };

  const handleNavigateScenario = (scenarioId: string) => {
    const target = getScenarioById(scenarioId);
    if (target) {
      setCurrentScenarioId(scenarioId);
      if (currentDomain !== "all" && currentDomain !== target.meta.domain) {
        setCurrentDomain(target.meta.domain);
      }
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 flex flex-col font-sans">
      <AppHeader
        currentDomain={currentDomain}
        onSelectDomain={handleSelectDomain}
        currentScenarioId={currentScenarioId}
        scenarios={SCENARIO_REGISTRY}
        onSelectScenario={(id) => setCurrentScenarioId(id)}
      />

      <main className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8 space-y-6 flex-1 w-full">
        {currentDomain === "macro" ? (
          /* Khung giới thiệu lộ trình Kinh tế học Vĩ mô Giai đoạn 2 */
          <div className="space-y-6">
            <div className="rounded-2xl border border-indigo-200 bg-gradient-to-r from-indigo-900 via-indigo-850 to-slate-900 p-6 text-white shadow-md">
              <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                <div>
                  <div className="inline-flex items-center gap-2 rounded-full bg-indigo-800/80 px-3 py-1 text-xs font-semibold text-indigo-200 border border-indigo-700/60 mb-2">
                    <span>Lộ trình Giai đoạn 2</span>
                    <span>•</span>
                    <span>FSPPM MPP28 Macroeconomics</span>
                  </div>
                  <h2 className="text-xl font-bold tracking-tight sm:text-2xl text-white">
                    Hệ thống Mô phỏng Mô hình Kinh tế học Vĩ mô
                  </h2>
                  <p className="mt-1 text-xs text-indigo-200 max-w-2xl leading-relaxed">
                    Khung phân tích thực nghiệm các chính sách kinh tế vĩ mô: tài khóa, tiền tệ, tỷ giá hối đoái và tăng trưởng dài hạn. Đồng bộ dữ liệu học thuật cùng NotebookLM Vĩ mô FSPPM.
                  </p>
                </div>

                <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
                  <button
                    type="button"
                    onClick={() => handleNavigateScenario("micro.consumer.inkind_vs_cash")}
                    className="inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2.5 text-xs font-bold text-indigo-900 shadow-sm transition hover:bg-indigo-50"
                  >
                    <span>Xem Module Cầu nối: Trợ cấp hiện vật</span>
                    <span>→</span>
                  </button>
                </div>
              </div>

              <div className="mt-5 pt-4 border-t border-indigo-800/60 flex flex-wrap items-center gap-4 text-xs text-indigo-300">
                <div>
                  <span className="font-semibold text-indigo-100">Mã NotebookLM:</span>{" "}
                  <code className="rounded bg-indigo-950/80 px-2 py-0.5 font-mono text-[11px] text-amber-300 border border-indigo-800">
                    {NOTEBOOKLM_MACRO_ID}
                  </code>
                </div>
                <div>
                  <span className="font-semibold text-indigo-100">Giáo trình tham chiếu:</span>{" "}
                  <span>N. Gregory Mankiw (Ấn bản 10) &amp; Olivier Blanchard (Ấn bản 8)</span>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {MACRO_ROADMAP_ITEMS.map((item) => {
                const isUpcoming = item.status === "upcoming";
                return (
                  <div
                    key={item.id}
                    className="flex flex-col justify-between rounded-xl border border-slate-200 bg-white p-5 shadow-xs transition hover:border-indigo-300 hover:shadow-sm"
                  >
                    <div className="space-y-2.5">
                      <div className="flex items-center justify-between gap-2">
                        <span className="rounded-md bg-indigo-50 px-2 py-0.5 text-[10px] font-bold text-indigo-700 border border-indigo-100">
                          {item.chapter}
                        </span>
                        <span
                          className={`rounded-full px-2 py-0.5 text-[10px] font-bold ${
                            isUpcoming
                              ? "bg-amber-100 text-amber-800 border border-amber-200"
                              : "bg-slate-100 text-slate-600"
                          }`}
                        >
                          {isUpcoming ? "Sắp ra mắt" : "Kế hoạch"}
                        </span>
                      </div>

                      <h3 className="text-sm font-bold text-slate-900 leading-snug">
                        {item.title}
                      </h3>
                      <p className="text-xs font-medium text-slate-500">
                        {item.subtitle}
                      </p>
                      <p className="text-xs text-slate-600 leading-relaxed pt-1">
                        {item.description}
                      </p>
                    </div>

                    <div className="mt-4 pt-3 border-t border-slate-100 flex flex-wrap gap-1">
                      {item.tags.map((tag, tIdx) => (
                        <span
                          key={tIdx}
                          className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-600"
                        >
                          {tag}
                        </span>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ) : (
          /* Khung mô phỏng tương tác 2 cột của module đang hoạt động */
          <>
            <InputBanner meta={activeScenario.meta} />

            {activeScenario.meta.id === "micro.consumer.rationing" && (
              <ScenarioLayout
                scenario={rationingScenario}
                params={rationingParams}
                onParamChange={(k, v) =>
                  setRationingParams((prev) => ({ ...prev, [k]: v }))
                }
                onChangeParams={(newParams) => setRationingParams(newParams)}
                onResetParams={() =>
                  setRationingParams({
                    quotaX: rationingScenario.params.quotaX.default,
                  })
                }
                onSelectPreset={(p) => setRationingParams(p.params)}
                onNavigateScenario={handleNavigateScenario}
              />
            )}

            {activeScenario.meta.id === "micro.consumer.price_ceiling" && (
              <ScenarioLayout
                scenario={priceCeilingScenario}
                params={ceilingParams}
                onParamChange={(k, v) =>
                  setCeilingParams((prev) => ({ ...prev, [k]: v }))
                }
                onChangeParams={(newParams) => setCeilingParams(newParams)}
                onResetParams={() =>
                  setCeilingParams({
                    pFixed: priceCeilingScenario.params.pFixed.default,
                    xCap: priceCeilingScenario.params.xCap.default,
                  })
                }
                onSelectPreset={(p) => setCeilingParams(p.params)}
                onNavigateScenario={handleNavigateScenario}
              />
            )}

            {activeScenario.meta.id === "micro.consumer.corner_solution" && (
              <ScenarioLayout
                scenario={cornerSolutionScenario}
                params={cornerParams}
                onParamChange={(k, v) =>
                  setCornerParams((prev) => ({ ...prev, [k]: v }))
                }
                onChangeParams={(newParams) => setCornerParams(newParams)}
                onResetParams={() =>
                  setCornerParams({
                    exampleCase: 1,
                    yogurtPrice:
                      cornerSolutionScenario.params.yogurtPrice.default,
                    iceCreamTaste:
                      cornerSolutionScenario.params.iceCreamTaste.default,
                    trustFund: cornerSolutionScenario.params.trustFund.default,
                    trustAlpha:
                      cornerSolutionScenario.params.trustAlpha.default,
                    foodStamp: cornerSolutionScenario.params.foodStamp.default,
                    stampAlpha:
                      cornerSolutionScenario.params.stampAlpha.default,
                  })
                }
                onSelectPreset={(p) =>
                  setCornerParams((prev) => ({ ...prev, ...p.params }))
                }
                onNavigateScenario={handleNavigateScenario}
              />
            )}

            {activeScenario.meta.id === "micro.consumer.inkind_vs_cash" && (
              <ScenarioLayout
                scenario={inkindVsCashScenario}
                params={inkindParams}
                onParamChange={(k, v) =>
                  setInkindParams((prev) => ({ ...prev, [k]: v }))
                }
                onChangeParams={(newParams) => setInkindParams(newParams)}
                onResetParams={() =>
                  setInkindParams({
                    alpha: inkindVsCashScenario.params.alpha.default,
                    transfer: inkindVsCashScenario.params.transfer.default,
                  })
                }
                onSelectPreset={(p) => setInkindParams(p.params)}
                onNavigateScenario={handleNavigateScenario}
              />
            )}
          </>
        )}
      </main>

      <footer className="border-t border-slate-200 bg-white py-4 text-center text-xs text-slate-500">
        EconSim • Nền tảng Mô phỏng Kinh tế học Tương tác • FSPPM Fulbright MPP28
      </footer>
    </div>
  );
}