"use client";

import Link from "next/link";
import { type FormEvent, useEffect, useMemo, useState } from "react";
import { managerialLevels } from "@/lib/autodiagnostic-shared";
import { MandatoryOnboardingGuard } from "@/components/mandatory-onboarding-guard";
import {
  getDemoOnboardingState,
  updateDemoOnboardingState,
} from "@/lib/demo-session-store";
import {
  emptyOnboardingAnswers,
  isOnboardingComplete,
  type OnboardingAnswers,
  type OnboardingState,
} from "@/lib/onboarding-shared";

const contextFields: Array<{
  key: Exclude<keyof OnboardingAnswers, "managerialLevel">;
  label: string;
  placeholder: string;
  helper: string;
  multiline?: boolean;
}> = [
  {
    key: "industrySector",
    label: "Secteur d'activite",
    placeholder: "Ex. industrie, conseil, SaaS, secteur public...",
    helper: "Champ libre.",
  },
  {
    key: "department",
    label: "Departement",
    placeholder: "Ex. RH, operations, finance, produit...",
    helper: "Champ libre.",
  },
  {
    key: "jobTitle",
    label: "Fonction",
    placeholder: "Ex. DRH, manager d'equipe, responsable support...",
    helper: "Champ libre.",
  },
  {
    key: "companySize",
    label: "Taille de l'entreprise",
    placeholder: "Ex. 50 personnes, 800 collaborateurs, groupe international...",
    helper: "Champ libre.",
  },
  {
    key: "companyContext",
    label: "Contexte de l'entreprise",
    placeholder: "Ex. stable, en transformation, en crise, sous forte croissance...",
    helper: "Decrivez le contexte actuel de l'organisation.",
    multiline: true,
  },
  {
    key: "workMode",
    label: "Mode de travail pour vous et vos equipes",
    placeholder: "Ex. 100% presentiel, 100% distanciel, hybride, multi-sites...",
    helper: "Decrivez l'organisation de travail dominante.",
    multiline: true,
  },
];

function fetchOnboardingState() {
  return getDemoOnboardingState();
}

function saveOnboardingState(answers: OnboardingAnswers) {
  return updateDemoOnboardingState({
    answers,
    completeOnboarding: true,
  });
}

export function OnboardingShell() {
  const [answers, setAnswers] = useState<OnboardingAnswers>({
    ...emptyOnboardingAnswers,
  });
  const [status, setStatus] = useState<OnboardingState | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

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

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

        if (!active) {
          return;
        }

        setAnswers(nextState.answers);
        setStatus(nextState);
      } catch (caughtError) {
        if (!active) {
          return;
        }

        setError(
          caughtError instanceof Error
            ? caughtError.message
            : "Impossible de charger l'onboarding.",
        );
      } finally {
        if (active) {
          setLoading(false);
        }
      }
    }

    load();

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

  const onboardingReady = useMemo(
    () => isOnboardingComplete(answers),
    [answers],
  );

  function updateAnswer<K extends keyof OnboardingAnswers>(
    key: K,
    value: OnboardingAnswers[K],
  ) {
    setAnswers((current) => ({
      ...current,
      [key]: value,
    }));
    setError(null);
    setSuccess(null);
  }

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!onboardingReady || saving) {
      return;
    }

    setSaving(true);
    setError(null);
    setSuccess(null);

    try {
      const nextState = saveOnboardingState(answers);
      setStatus(nextState);
      setAnswers(nextState.answers);
      setSuccess("Votre contexte a bien ete enregistre.");
    } catch (caughtError) {
      setError(
        caughtError instanceof Error
          ? caughtError.message
          : "Impossible d'enregistrer l'onboarding.",
      );
    } 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)]">
              Onboarding
            </p>
            <h1 className="mt-4 text-3xl font-extrabold text-[var(--ink)]">
              Preparation de votre contexte...
            </h1>
          </div>
        </div>
      </main>
    );
  }

  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 rounded-[32px] px-6 py-6 lg:px-8 lg:py-8">
            <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-red)]">
              MON CONTEXTE
            </p>
            <h1 className="mt-4 text-4xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
              Definissez votre contexte en 7 criteres pour activer une experience sur mesure
            </h1>
            <p className="mt-4 max-w-3xl text-base leading-8 text-[var(--foreground)]">
              Ces reponses restent en champ libre. Elles sont conservees dans la
              session de ce navigateur afin d&apos;alimenter les variables de
              contexte utilisees dans la demo.
            </p>

            <form onSubmit={handleSubmit} className="mt-8">
              <section className="rounded-[28px] border border-[var(--line)] bg-[var(--surface-soft)] p-5 sm:p-6">
                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--primary)]">
                  Niveau managerial obligatoire
                </p>
                <h2 className="mt-3 text-2xl font-extrabold tracking-[-0.03em] text-[var(--ink)]">
                  Choisissez le niveau de management qui correspond a votre role
                </h2>
                <div className="mt-5 grid gap-3 md:grid-cols-3">
                  {managerialLevels.map((level) => {
                    const selected = answers.managerialLevel === level;

                    return (
                      <button
                        key={level}
                        type="button"
                        aria-pressed={selected}
                        onClick={() => updateAnswer("managerialLevel", level)}
                        className={`rounded-[24px] border px-4 py-5 text-left transition-all ${
                          selected
                            ? "border-[var(--primary)] bg-[rgba(23,117,186,0.10)] shadow-[0_12px_24px_rgba(23,117,186,0.12)]"
                            : "border-[var(--line)] bg-white hover:border-[var(--primary)] hover:bg-[rgba(23,117,186,0.06)]"
                        }`}
                      >
                        <span
                          className={`inline-flex rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] ${
                            selected
                              ? "bg-[var(--primary)] text-white"
                              : "bg-[var(--surface-soft)] text-[var(--foreground)]"
                          }`}
                        >
                          Niveau
                        </span>
                        <span className="mt-4 block text-lg font-bold text-[var(--ink)]">
                          {level}
                        </span>
                      </button>
                    );
                  })}
                </div>
              </section>

              <div className="mt-6 grid gap-5 md:grid-cols-2">
                {contextFields.map((field) => (
                  <label
                    key={field.key}
                    className={field.multiline ? "md:col-span-2" : undefined}
                  >
                    <span className="text-sm font-semibold text-[var(--ink)]">
                      {field.label}
                    </span>
                    <span className="mt-1 block text-xs leading-5 text-[var(--foreground)]">
                      {field.helper}
                    </span>

                    {field.multiline ? (
                      <textarea
                        value={answers[field.key]}
                        onChange={(event) =>
                          updateAnswer(field.key, event.target.value)
                        }
                        rows={4}
                        required
                        placeholder={field.placeholder}
                        className="mt-2 min-h-32 w-full rounded-[24px] border border-[var(--line)] bg-white px-4 py-3 text-sm leading-7 text-[var(--ink)] outline-none transition-colors placeholder:text-[var(--foreground)]/70 focus:border-[var(--primary)]"
                      />
                    ) : (
                      <input
                        value={answers[field.key]}
                        onChange={(event) =>
                          updateAnswer(field.key, event.target.value)
                        }
                        required
                        placeholder={field.placeholder}
                        className="mt-2 h-14 w-full rounded-[24px] border border-[var(--line)] bg-white px-4 text-sm text-[var(--ink)] outline-none transition-colors placeholder:text-[var(--foreground)]/70 focus:border-[var(--primary)]"
                      />
                    )}
                  </label>
                ))}
              </div>

              {error ? (
                <div className="mt-6 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}

              {success ? (
                <div className="mt-6 rounded-[24px] border border-[rgba(47,138,99,0.16)] bg-[rgba(47,138,99,0.07)] px-4 py-3 text-sm leading-7 text-[var(--success)]">
                  {success}
                </div>
              ) : null}

              <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <p className="text-sm text-[var(--foreground)]">
                  {onboardingReady
                    ? "Tous les champs requis sont renseignes."
                    : "Renseignez les 7 champs, dont le niveau managerial obligatoire."}
                </p>
                <button
                  type="submit"
                  disabled={!onboardingReady || saving}
                  className="inline-flex items-center justify-center rounded-full bg-[var(--primary)] px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-[var(--primary-strong)] disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {saving ? "Enregistrement..." : "Enregistrer l'onboarding"}
                </button>
              </div>
            </form>

            {status?.onboardingCompleted ? (
              <section className="mt-8 rounded-[28px] border border-[var(--line)] bg-[var(--surface-soft)] p-5 sm:p-6">
                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--accent-gold)]">
                  Etape 1 validee
                </p>
                <h2 className="mt-3 text-2xl font-extrabold tracking-[-0.03em] text-[var(--ink)]">
                  Poursuivez avec l&apos;autodiagnostique obligatoire.
                </h2>
                <p className="mt-3 text-sm leading-7 text-[var(--foreground)]">
                  Le parcours demo se poursuit maintenant avec les 18 situations de
                  l&apos;autodiagnostique avant l&apos;acces a l&apos;interface
                  principale.
                </p>

                <div className="mt-5">
                  <Link
                    href="/onboarding/autodiagnostique"
                    className="inline-flex items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--accent-gold)_0%,#f4b648_100%)] px-5 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"
                  >
                    Continuer vers l&apos;autodiagnostique
                  </Link>
                </div>
              </section>
            ) : null}
          </section>
        </div>
      </main>
    </MandatoryOnboardingGuard>
  );
}