"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { MandatoryOnboardingGuard } from "@/components/mandatory-onboarding-guard";
import {
  getDemoOnboardingState,
  updateDemoOnboardingState,
} from "@/lib/demo-session-store";
import type { OnboardingState } from "@/lib/onboarding-shared";

function fetchOnboardingState() {
  return getDemoOnboardingState();
}

export function AutodiagnosticResultShell() {
  const router = useRouter();
  const [status, setStatus] = useState<OnboardingState | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let active = true;

    function load() {
      try {
        const nextState = fetchOnboardingState();

        if (active) {
          setStatus(nextState);
        }
      } catch (caughtError) {
        if (active) {
          setError(
            caughtError instanceof Error
              ? caughtError.message
              : "Impossible de charger le resultat de l'autodiagnostique.",
          );
        }
      } finally {
        if (active) {
          setLoading(false);
        }
      }
    }

    load();

    return () => {
      active = false;
    };
  }, []);

  function handleContinue() {
    if (saving) {
      return;
    }

    setSaving(true);
    setError(null);

    try {
      const nextState = updateDemoOnboardingState({
        acknowledgeAutodiagnosticResult: true,
      });
      setStatus(nextState);
      router.push("/onboarding/plan-action");
    } catch (caughtError) {
      setError(
        caughtError instanceof Error
          ? caughtError.message
          : "Impossible de poursuivre vers le plan d'action.",
      );
    } finally {
      setSaving(false);
    }
  }

  if (loading) {
    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 min-h-[80vh] max-w-4xl items-center justify-center">
          <div className="glass-card w-full max-w-2xl rounded-[32px] px-8 py-10 text-center">
            <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--primary)]">
              Resultat autodiagnostique
            </p>
            <h1 className="mt-4 text-3xl font-extrabold text-[var(--ink)]">
              Chargement...
            </h1>
          </div>
        </div>
      </main>
    );
  }

  const result = status?.autodiagnosticResult;

  return (
    <MandatoryOnboardingGuard scope="onboarding">
      <main className="app-shell min-h-screen px-5 py-8 sm:px-8 lg:px-10">
        <div className="relative z-10 mx-auto max-w-5xl">
          <section className="glass-card fade-in-up overflow-hidden rounded-[36px]">
            <div className="border-b border-[rgba(23,117,186,0.12)] bg-[linear-gradient(135deg,rgba(23,117,186,0.10)_0%,rgba(216,142,4,0.12)_100%)] px-6 py-6 sm:px-8 lg:px-10 lg:py-8">
              <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-red)]">
                Resultat autodiagnostique
              </p>
              <h1 className="mt-4 text-4xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
                Votre lecture manageriale est prete
              </h1>
              <p className="mt-4 max-w-3xl text-base leading-8 text-[var(--foreground)]">
                Ce resultat est enregistre dans la session du navigateur et sera
                reutilise pour la suite du parcours.
              </p>
            </div>

            <div className="px-6 py-6 sm:px-8 lg:px-10 lg:py-8">
              {error ? (
                <div className="rounded-[24px] border border-[rgba(159,25,24,0.16)] bg-[rgba(159,25,24,0.06)] px-4 py-3 text-sm leading-7 text-[var(--accent-red)]">
                  {error}
                </div>
              ) : null}

              {!result ? (
                <div className="rounded-[28px] border border-[var(--line)] bg-[var(--surface-soft)] p-6">
                  <p className="text-sm leading-7 text-[var(--foreground)]">
                    Aucun resultat d&apos;autodiagnostique n&apos;est disponible pour
                    le moment.
                  </p>
                  <div className="mt-5">
                    <Link
                      href="/onboarding/autodiagnostique"
                      className="inline-flex items-center justify-center rounded-full bg-[var(--primary)] px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-[var(--primary-strong)]"
                    >
                      Revenir au questionnaire
                    </Link>
                  </div>
                </div>
              ) : (
                <>
                  <section className="grid gap-5 lg:grid-cols-[280px_minmax(0,1fr)]">
                    <div className="rounded-[30px] border border-[rgba(23,117,186,0.12)] bg-[linear-gradient(180deg,rgba(255,255,255,0.98)_0%,rgba(240,246,252,0.96)_100%)] p-6 text-center">
                      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--primary)]">
                        Score global
                      </p>
                      <div className="mt-5 inline-flex h-36 w-36 items-center justify-center rounded-full border border-[rgba(23,117,186,0.12)] bg-white shadow-[0_18px_40px_rgba(23,117,186,0.10)]">
                        <div>
                          <p className="text-5xl font-extrabold tracking-[-0.05em] text-[var(--ink)]">
                            {result.globalScore}
                          </p>
                          <p className="mt-1 text-xs font-semibold uppercase tracking-[0.18em] text-[var(--foreground)]">
                            sur 100
                          </p>
                        </div>
                      </div>
                      <p className="mt-5 text-base font-semibold text-[var(--ink)]">
                        {result.overallLabel}
                      </p>
                    </div>

                    <div className="rounded-[30px] border border-[var(--line)] bg-[var(--surface-soft)] p-6">
                      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--accent-gold)]">
                        Niveau choisi
                      </p>
                      <p className="mt-3 text-2xl font-extrabold tracking-[-0.03em] text-[var(--ink)]">
                        {result.managerialLevel}
                      </p>
                      <p className="mt-4 text-base leading-8 text-[var(--foreground)]">
                        {result.summary}
                      </p>
                    </div>
                  </section>

                  <section className="mt-6 grid gap-5 lg:grid-cols-2">
                    <article className="rounded-[28px] border border-[rgba(47,138,99,0.16)] bg-[rgba(47,138,99,0.07)] p-6">
                      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--success)]">
                        Points forts
                      </p>
                      <ul className="mt-4 space-y-3 text-sm leading-7 text-[var(--ink)]">
                        {result.strengths.map((strength) => (
                          <li key={strength}>&bull; {strength}</li>
                        ))}
                      </ul>
                    </article>

                    <article className="rounded-[28px] border border-[rgba(216,142,4,0.16)] bg-[rgba(216,142,4,0.08)] p-6">
                      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--accent-gold)]">
                        Points d&apos;attention
                      </p>
                      <ul className="mt-4 space-y-3 text-sm leading-7 text-[var(--ink)]">
                        {result.attentionPoints.map((point) => (
                          <li key={point}>&bull; {point}</li>
                        ))}
                      </ul>
                    </article>
                  </section>

                  <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <Link
                      href="/onboarding/autodiagnostique"
                      className="inline-flex items-center justify-center rounded-full border border-[var(--line)] bg-white px-5 py-3 text-sm font-semibold text-[var(--foreground)] transition-colors hover:border-[var(--accent-gold)] hover:text-[var(--accent-gold)]"
                    >
                      Revoir mes reponses
                    </Link>
                    <button
                      type="button"
                      onClick={handleContinue}
                      disabled={saving}
                      className="inline-flex items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--accent-gold)_0%,#f4b648_100%)] px-6 py-3 text-sm font-semibold text-[var(--ink)] shadow-[0_14px_30px_rgba(216,142,4,0.20)] transition-transform duration-200 hover:-translate-y-0.5 disabled:cursor-not-allowed disabled:opacity-60"
                    >
                      {saving
                        ? "Ouverture..."
                        : "Continuer vers le plan d'action individuel"}
                    </button>
                  </div>
                </>
              )}
            </div>
          </section>
        </div>
      </main>
    </MandatoryOnboardingGuard>
  );
}