import Link from "next/link";
import { metricMeta } from "@/lib/types";
import type { SessionRecord } from "@/lib/types";

type ReportShellProps = {
  session: SessionRecord | null;
};

export function ReportShell({ session }: ReportShellProps) {
  if (!session || !session.finalAssessment) {
    return (
      <main className="app-shell flex min-h-screen items-center justify-center px-6 py-16">
        <div className="glass-card max-w-2xl rounded-[32px] p-8 text-center">
          <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-red)]">
            Bilan introuvable
          </p>
          <h1 className="mt-4 text-4xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
            Aucun rapport final n&apos;est disponible pour cette session.
          </h1>
          <p className="mt-4 text-base leading-8 text-[var(--foreground)]">
            Le rapport a peut-être été supprimé, n&apos;appartient pas à votre
            compte ou n&apos;a pas encore été finalisé.
          </p>
          <Link
            href="/"
            className="mt-8 inline-flex rounded-full bg-[var(--primary)] px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-[var(--primary-strong)]"
          >
            Retour à l&apos;accueil
          </Link>
        </div>
      </main>
    );
  }

  const { finalAssessment } = session;

  return (
    <main className="app-shell min-h-screen px-5 py-8 sm:px-8 lg:px-10">
      <div className="relative z-10 mx-auto flex max-w-7xl flex-col gap-6">
        <header className="glass-card rounded-[32px] px-6 py-6 lg:px-8">
          <div className="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
            <div className="max-w-4xl">
              <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-gold)]">
                Bilan final
              </p>
              <h1 className="mt-3 text-4xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
                {finalAssessment.outcome === "resolved"
                  ? "Situation désamorcée"
                  : finalAssessment.outcome === "escalated"
                    ? "Situation escaladée"
                    : finalAssessment.outcome === "manual_end"
                      ? "Clôture manuelle"
                      : "Fin par limite de tours"}
              </h1>
              <p className="mt-4 max-w-3xl text-base leading-8 text-[var(--foreground)]">
                {finalAssessment.summary}
              </p>
            </div>

            <div className="flex flex-wrap gap-3">
              <Link
                href={`/scenario/${session.scenarioId}`}
                className="inline-flex rounded-full bg-[var(--primary)] px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-[var(--primary-strong)]"
              >
                Rejouer ce cas pratique
              </Link>
              <Link
                href="/"
                className="inline-flex rounded-full border border-[var(--line)] px-5 py-3 text-sm font-semibold text-[var(--foreground)] transition-colors hover:border-[var(--primary)] hover:text-[var(--primary)]"
              >
                Choisir un autre cas pratique
              </Link>
            </div>
          </div>
        </header>

        <section className="grid gap-6 xl:grid-cols-[minmax(0,1.08fr)_minmax(340px,0.92fr)]">
          <div className="space-y-6">
            <div className="glass-card rounded-[32px] p-6 lg:p-8">
              <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-red)]">
                Lecture globale
              </p>
              <div className="mt-5 grid gap-4 md:grid-cols-2">
                <article className="rounded-[24px] border border-[var(--line)] bg-[var(--surface-soft)] p-5">
                  <p className="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--primary)]">
                    Niveau de préparation
                  </p>
                  <p className="mt-3 text-sm leading-7 text-[var(--foreground)]">
                    {finalAssessment.readiness}
                  </p>
                </article>
                <article className="rounded-[24px] border border-[var(--line)] bg-[var(--surface-soft)] p-5">
                  <p className="text-xs font-semibold uppercase tracking-[0.22em] text-[var(--accent-gold)]">
                    Conseil de clôture
                  </p>
                  <p className="mt-3 text-sm leading-7 text-[var(--foreground)]">
                    {finalAssessment.closingAdvice}
                  </p>
                </article>
              </div>
            </div>

            <div className="glass-card rounded-[32px] p-6 lg:p-8">
              <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--primary)]">
                Points forts
              </p>
              <ul className="mt-5 space-y-3 text-sm leading-7 text-[var(--foreground)]">
                {finalAssessment.strengths.map((item) => (
                  <li
                    key={item}
                    className="rounded-[22px] border border-[var(--line)] bg-white px-5 py-4"
                  >
                    {item}
                  </li>
                ))}
              </ul>
            </div>

            <div className="glass-card rounded-[32px] p-6 lg:p-8">
              <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-red)]">
                Opportunités manquées
              </p>
              <ul className="mt-5 space-y-3 text-sm leading-7 text-[var(--foreground)]">
                {finalAssessment.missedOpportunities.map((item) => (
                  <li
                    key={item}
                    className="rounded-[22px] border border-[var(--line)] bg-white px-5 py-4"
                  >
                    {item}
                  </li>
                ))}
              </ul>
            </div>

            <div className="glass-card rounded-[32px] p-6 lg:p-8">
              <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-gold)]">
                Plan de progression
              </p>
              <ol className="mt-5 space-y-3 text-sm leading-7 text-[var(--foreground)]">
                {finalAssessment.actionPlan.map((step, index) => (
                  <li
                    key={step}
                    className="rounded-[22px] border border-[var(--line)] bg-white px-5 py-4"
                  >
                    <span className="font-bold text-[var(--ink)]">
                      {index + 1}.
                    </span>{" "}
                    {step}
                  </li>
                ))}
              </ol>
            </div>
          </div>

          <div className="space-y-6">
            <div className="glass-card rounded-[32px] p-6 lg:p-8">
              <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--primary)]">
                Métriques finales
              </p>
              <div className="mt-5 space-y-4">
                {finalAssessment.metricSummary.map((metric) => (
                  <div
                    key={metric.id}
                    className="rounded-[22px] border border-[var(--line)] bg-white p-4"
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div>
                        <p className="text-sm font-bold text-[var(--ink)]">
                          {metricMeta[metric.id].label}
                        </p>
                        <p className="mt-1 text-xs uppercase tracking-[0.18em] text-[var(--foreground)]">
                          {metric.level}
                        </p>
                      </div>
                      <span className="text-lg font-extrabold text-[var(--ink)]">
                        {metric.score}
                      </span>
                    </div>
                    <div className="mt-3 h-2.5 rounded-full bg-[var(--surface-muted)]">
                      <div
                        className="metric-bar h-full rounded-full"
                        style={{ width: `${metric.score}%` }}
                      />
                    </div>
                    <p className="mt-3 text-sm leading-7 text-[var(--foreground)]">
                      {metric.rationale}
                    </p>
                  </div>
                ))}
              </div>
            </div>

            <div className="glass-card rounded-[32px] p-6 lg:p-8">
              <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-red)]">
                Moments clés
              </p>
              <ul className="mt-5 space-y-3 text-sm leading-7 text-[var(--foreground)]">
                {finalAssessment.turningPoints.map((point) => (
                  <li
                    key={point}
                    className="rounded-[22px] border border-[var(--line)] bg-white px-5 py-4"
                  >
                    {point}
                  </li>
                ))}
              </ul>
            </div>

            <div className="glass-card rounded-[32px] p-6 lg:p-8">
              <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-gold)]">
                Extrait de la conversation
              </p>
              <div className="mt-5 space-y-3">
                {session.transcript.slice(-6).map((message) => (
                  <article
                    key={message.id}
                    className={`rounded-[22px] px-5 py-4 text-sm leading-7 ${
                      message.role === "assistant"
                        ? "border border-[var(--line)] bg-white text-[var(--ink)]"
                        : "bg-[var(--primary)] text-white"
                    }`}
                  >
                    <p className="text-xs font-semibold uppercase tracking-[0.18em] opacity-75">
                      {message.role === "assistant"
                        ? "Collaborateur IA"
                        : "Manager en entraînement"}
                    </p>
                    <p className="mt-3 whitespace-pre-wrap">{message.content}</p>
                  </article>
                ))}
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>
  );
}
