// UQO Éval — mode étudiant : l'analyse pédagogique complète d'une estimation.
/**
 * Décompose le résultat du moteur (engine.ts) SANS inventer de calcul :
 * chaque chiffre affiché est recomposé à partir des mêmes règles que le
 * moteur (sélection des comparables, gaussiennes de pondération, ajustements,
 * combinaison 65/35, score de confiance) appliquées aux données du résultat.
 */
"use client";
import { useLang } from "./LangContext";
import type { EstimateResult } from "@/lib/engine";

const money = (v: number, lang: string) =>
  new Intl.NumberFormat(lang === "fr" ? "fr-CA" : "en-CA", {
    style: "currency",
    currency: "CAD",
    maximumFractionDigits: 0,
  }).format(Math.round(v));

/** Reconstruit la décomposition du score de confiance (mêmes règles que engine.ts). */
function confidenceParts(r: EstimateResult) {
  const base = 35;
  const comps = Math.min(25, r.comps.length * 2.5);
  const disp =
    r.compsDispersionPct != null ? Math.max(0, 20 - r.compsDispersionPct) : 0;
  const model = r.modelEstimate != null ? 15 : 0;
  const widthPct = r.estimate > 0 ? ((r.high - r.low) / r.estimate) * 100 : 100;
  const width = -Math.max(0, (widthPct - 30) / 3);
  return { base, comps, disp, model, width, widthPct };
}

function Formula({ children }: { children: React.ReactNode }) {
  return (
    <p className="vp-mono mt-2 overflow-x-auto whitespace-nowrap border-l-2 border-accent bg-surface px-3 py-2 text-[11.5px] text-ink">
      {children}
    </p>
  );
}

function Block({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="border-t border-[var(--line)] py-5 first:border-t-0 first:pt-0">
      <h3 className="vp-display text-[15px] font-bold uppercase tracking-[-0.01em]">
        {title}
      </h3>
      <div className="mt-2 max-w-3xl text-[13.5px] leading-relaxed text-ink-2">
        {children}
      </div>
    </div>
  );
}

export default function StudentPanel({ r }: { r: EstimateResult }) {
  const { lang, t } = useLang();
  const fr = lang === "fr";
  const parts = confidenceParts(r);
  const total = Math.max(
    5,
    Math.min(97, parts.base + parts.comps + parts.disp + parts.model + parts.width)
  );
  const modelPct = Math.round(r.modelWeight * 100);
  const compsPct = 100 - modelPct;

  const confRows: [string, number][] = [
    [t("pedConfBase"), parts.base],
    [t("pedConfComps"), parts.comps],
    [t("pedConfDisp"), parts.disp],
    [t("pedConfModel"), parts.model],
    [t("pedConfWidth"), parts.width],
  ];

  return (
    <section className="rise border border-[var(--line-strong)] bg-surface-2 p-5 sm:p-8">
      <header className="flex flex-wrap items-baseline justify-between gap-2 border-b-2 border-ink pb-3">
        <h2 className="vp-display text-[clamp(18px,2.6vw,24px)] font-bold uppercase tracking-[-0.02em]">
          {fr ? "Analyse pédagogique" : "Pedagogical analysis"}
        </h2>
        <span className="vp-mono text-[10px] uppercase tracking-[0.1em] text-accent-deep">
          {t("studentMode")} · IMM1003 / IMM1033
        </span>
      </header>
      <p className="mt-4 max-w-3xl text-[13.5px] leading-relaxed text-ink-2">
        {t("pedIntro")}
      </p>

      <div className="mt-6">
        {/* 1 — sélection des comparables */}
        <Block title={t("pedWhyCompsTitle")}>
          <p>{t("pedWhyComps")}</p>
          <p className="vp-mono mt-2 text-[11px] uppercase tracking-[0.05em] text-ink-3">
            {fr
              ? `Ici : ${r.nCompsUsed} comparables retenus${r.compsDispersionPct != null ? ` · dispersion médiane ±${r.compsDispersionPct} %` : ""}`
              : `Here: ${r.nCompsUsed} comparables kept${r.compsDispersionPct != null ? ` · median dispersion ±${r.compsDispersionPct}%` : ""}`}
          </p>
        </Block>

        {/* 2 — pondération */}
        <Block title={t("pedWeightTitle")}>
          <p>{t("pedWeight")}</p>
          <Formula>
            poids = exp(−(distance∕1500&nbsp;m)²) × exp(−(mois∕24)²) ×
            exp(−(Δaire∕25&nbsp;%)²)
          </Formula>
        </Block>

        {/* 3 — ajustements */}
        <Block title={t("pedAdjTitle")}>
          <ul className="list-none space-y-2 p-0">
            <li>
              <b className="text-ink">{t("adjTime")}</b> — {t("pedAdjTime")}
            </li>
            <li>
              <b className="text-ink">{t("adjArea")}</b> — {t("pedAdjArea")}
            </li>
            <li>
              <b className="text-ink">{t("adjAge")}</b> — {t("pedAdjAge")}
            </li>
          </ul>
          <Formula>
            prix ajusté = prix de vente + ajust. marché + ajust. superficie +
            ajust. âge
          </Formula>
        </Block>

        {/* 4 — combinaison finale */}
        <Block title={t("pedBlendTitle")}>
          <p>{t("pedBlend")}</p>
          {/* barre de combinaison réelle */}
          <div className="mt-3 max-w-xl">
            <div className="flex h-8 overflow-hidden border border-[var(--line-strong)]">
              {r.modelEstimate != null && modelPct > 0 && (
                <span
                  className="flex items-center justify-center bg-ink text-[10.5px] font-bold text-paper"
                  style={{ width: `${modelPct}%` }}
                >
                  {modelPct} %
                </span>
              )}
              {r.compsEstimate != null && compsPct > 0 && (
                <span
                  className="flex items-center justify-center bg-accent text-[10.5px] font-bold text-white"
                  style={{ width: `${compsPct}%` }}
                >
                  {compsPct} %
                </span>
              )}
            </div>
            <p className="vp-mono mt-1.5 flex flex-wrap justify-between gap-2 text-[10px] uppercase tracking-[0.06em] text-ink-3">
              <span>
                {t("modelPart")} :{" "}
                {r.modelEstimate != null ? money(r.modelEstimate, lang) : "—"}
              </span>
              <span>
                {t("compsPart")} :{" "}
                {r.compsEstimate != null ? money(r.compsEstimate, lang) : "—"}
              </span>
            </p>
          </div>
          {r.modelEstimate != null && r.compsEstimate != null && (
            <Formula>
              {(r.modelWeight).toLocaleString(fr ? "fr-CA" : "en-CA", { maximumFractionDigits: 2 })}
              &nbsp;× {money(r.modelEstimate, lang)} +{" "}
              {(1 - r.modelWeight).toLocaleString(fr ? "fr-CA" : "en-CA", { maximumFractionDigits: 2 })}
              &nbsp;× {money(r.compsEstimate, lang)} ≈ {money(r.estimate, lang)}
            </Formula>
          )}
        </Block>

        {/* 5 — indice de confiance décomposé */}
        <Block title={t("pedConfTitle")}>
          <div className="max-w-xl">
            {confRows.map(([label, v]) => (
              <div
                key={label}
                className="flex items-baseline justify-between gap-4 border-b border-[var(--line-soft)] py-1.5"
              >
                <span className="text-[13px]">{label}</span>
                <span
                  className={`vp-mono text-[12.5px] font-bold ${v < 0 ? "text-[var(--danger)]" : "text-ink"}`}
                >
                  {v >= 0 ? "+" : "−"}
                  {Math.abs(v).toFixed(1).replace(/\.0$/, "")}
                </span>
              </div>
            ))}
            <div className="flex items-baseline justify-between gap-4 border-t-2 border-ink py-2">
              <span className="vp-display text-[14px] font-bold uppercase">
                {t("pedConfTotal")}
              </span>
              <span className="vp-mono text-[14px] font-bold text-ink">
                {Math.round(total)} / 100 → {r.confidenceLevel}
              </span>
            </div>
            <p className="vp-mono mt-1 text-[10px] uppercase tracking-[0.05em] text-ink-3">
              {fr
                ? "Niveaux : A ≥ 75 · B ≥ 60 · C ≥ 45 · D < 45 (borné à 5-97)"
                : "Levels: A ≥ 75 · B ≥ 60 · C ≥ 45 · D < 45 (clamped 5-97)"}
            </p>
          </div>
        </Block>

        {/* 6 — concepts clés */}
        <Block title={t("pedConceptsTitle")}>
          <div className="grid gap-x-8 gap-y-4 sm:grid-cols-3">
            {(
              [
                ["pedConceptMarket", "pedConceptMarketDef"],
                ["pedConceptAsking", "pedConceptAskingDef"],
                ["pedConceptSale", "pedConceptSaleDef"],
              ] as const
            ).map(([k, d]) => (
              <div key={k}>
                <p className="vp-mono text-[11px] font-bold uppercase tracking-[0.08em] text-accent-deep">
                  {t(k)}
                </p>
                <p className="mt-1 text-[13px] leading-snug">{t(d)}</p>
              </div>
            ))}
          </div>
          <p className="mt-4">
            <b className="text-ink">{t("pedRoleTitle")}</b> {t("pedRole")}
          </p>
        </Block>
      </div>
    </section>
  );
}