import React, { useMemo } from "react";
import type { ScenarioDef, PresetDef, SubCaseSpec } from "../scenarios/types";
import { EconGraph } from "../graph/EconGraph";
import { PresetBar } from "./PresetBar";
import { ParamControls } from "./ParamControls";
import { StatCards } from "./StatCards";
import { StepBreakdown } from "./StepBreakdown";
import { ComparisonTable } from "./ComparisonTable";
import { CrossCourseBridge } from "./CrossCourseBridge";

interface ScenarioLayoutProps<P extends Record<string, number>, R> {
  scenario: ScenarioDef<P, R>;
  params: P;
  onParamChange: (key: keyof P, value: number) => void;
  onChangeParams?: (newParams: P) => void;
  onResetParams: () => void;
  onSelectPreset: (preset: PresetDef<P>) => void;
  onNavigateScenario?: (scenarioId: string) => void;
}

const BANNER_STYLES: Record<
  "info" | "success" | "warning" | "danger",
  string
> = {
  info: "border-blue-200 bg-blue-50 text-blue-900",
  success: "border-emerald-200 bg-emerald-50 text-emerald-900",
  warning: "border-amber-200 bg-amber-50 text-amber-900",
  danger: "border-rose-200 bg-rose-50 text-rose-900",
};

export function ScenarioLayout<P extends Record<string, number>, R>({
  scenario,
  params,
  onParamChange,
  onChangeParams,
  onResetParams,
  onSelectPreset,
  onNavigateScenario,
}: ScenarioLayoutProps<P, R>): React.JSX.Element {
  const result = useMemo(() => {
    return scenario.model(params);
  }, [scenario, params]);

  const view = useMemo(() => {
    return scenario.view(result, params);
  }, [scenario, result, params]);

  const ExplainComponent = scenario.explain;

  const bannerType = view.statusBanner?.type ?? "info";
  const bannerStyle = BANNER_STYLES[bannerType];

  const handleSelectSubCase = (subCase: SubCaseSpec<P>) => {
    const updated = { ...params, ...subCase.params };
    if (onChangeParams) {
      onChangeParams(updated as P);
    } else {
      for (const [k, v] of Object.entries(subCase.params)) {
        if (v !== undefined) {
          onParamChange(k as keyof P, v as number);
        }
      }
    }
  };

  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-12 items-start">
      {/* Left Column (7/12) */}
      <div className="space-y-4 lg:col-span-7">
        <EconGraph spec={view.graph} />

        {scenario.presets && (
          <PresetBar
            presets={scenario.presets}
            currentValues={params}
            onSelectPreset={onSelectPreset}
          />
        )}

        {scenario.subCases && scenario.subCases.length > 0 && (
          <div className="rounded-xl border border-slate-200 bg-white p-3.5 shadow-xs space-y-2.5">
            <div className="flex items-center justify-between">
              <span className="text-xs font-bold uppercase tracking-wider text-slate-700">
                Chọn Ví dụ Minh họa Tình huống
              </span>
              <span className="text-[11px] font-medium text-slate-500">
                3 góc nhìn giáo trình Pindyck &amp; Rubinfeld
              </span>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-2.5">
              {scenario.subCases.map((subCase) => {
                const active = subCase.isActive(params);
                return (
                  <button
                    key={subCase.id}
                    type="button"
                    onClick={() => handleSelectSubCase(subCase)}
                    className={`flex flex-col text-left p-3 rounded-xl border transition-all ${
                      active
                        ? "border-indigo-600 bg-indigo-50/90 shadow-sm ring-1 ring-indigo-500"
                        : "border-slate-200 bg-slate-50 hover:bg-white hover:border-slate-300 text-slate-700"
                    }`}
                  >
                    <div className="flex items-center justify-between gap-1 mb-1">
                      <span
                        className={`rounded px-1.5 py-0.5 text-[10px] font-bold ${
                          active
                            ? "bg-indigo-600 text-white"
                            : "bg-slate-200 text-slate-700"
                        }`}
                      >
                        {subCase.badge}
                      </span>
                    </div>
                    <span
                      className={`text-xs font-bold leading-tight ${
                        active ? "text-indigo-950" : "text-slate-800"
                      }`}
                    >
                      {subCase.title}
                    </span>
                    <span
                      className={`mt-1 text-[11px] leading-snug line-clamp-2 ${
                        active ? "text-indigo-800 font-medium" : "text-slate-500"
                      }`}
                    >
                      {subCase.subtitle}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        <ParamControls
          paramsDef={scenario.params}
          values={params}
          onChange={onParamChange}
          onReset={onResetParams}
        />

        <StatCards stats={view.stats} />

        {view.steps && view.steps.length > 0 && (
          <StepBreakdown steps={view.steps} />
        )}
      </div>

      {/* Right Column (5/12) */}
      <div className="space-y-4 lg:col-span-5">
        {view.statusBanner && (
          <div
            className={`rounded-xl border p-3.5 text-xs font-semibold leading-relaxed shadow-xs ${bannerStyle}`}
          >
            {view.statusBanner.text}
          </div>
        )}

        <div className="rounded-xl border border-slate-200 bg-white p-4 shadow-xs">
          <ExplainComponent result={result} params={params} />
        </div>

        {view.comparison && view.comparison.rows.length > 0 && (
          <ComparisonTable
            headers={view.comparison.headers}
            rows={view.comparison.rows}
          />
        )}

        {view.bridgeLinks && view.bridgeLinks.length > 0 && (
          <CrossCourseBridge
            links={view.bridgeLinks}
            onNavigate={onNavigateScenario}
          />
        )}

        {view.footnote && (
          <div className="rounded-lg bg-slate-100 p-3 text-[11px] text-slate-600 leading-normal border border-slate-200">
            <span className="font-bold text-slate-800">Công thức cơ sở:</span>{" "}
            <span>{view.footnote}</span>
          </div>
        )}
      </div>
    </div>
  );
}