"use client";

import Image from "next/image";
import { useState } from "react";
import { LogoutButton } from "@/components/logout-button";

const privacySettings = [
  {
    id: "consent-history",
    title: "Historique du consentement",
    description: "Trace horodatee des accords et retraits.",
    enabled: true,
  },
  {
    id: "analytics-minimization",
    title: "Analytique minimale",
    description: "Mesures de navigation strictement utiles.",
    enabled: true,
  },
  {
    id: "retention-window",
    title: "Retention courte",
    description: "Suppression automatique des journaux apres 30 jours.",
    enabled: false,
  },
  {
    id: "dpo-alerts",
    title: "Alertes DPO",
    description: "Alerte en cas d'export sensible.",
    enabled: true,
  },
  {
    id: "ai-training-optout",
    title: "Exclusion entrainement IA",
    description: "Contenus exclus de l'apprentissage modele.",
    enabled: true,
  },
];

const requestSettings = [
  "Exporter mes donnees",
  "Corriger mon profil",
  "Effacer une session",
  "Telecharger le registre",
];

type UserSidebarProps = {
  memberEmail: string;
  totalSessions: number;
  completedSessions: number;
  onboardingCompleted: boolean;
  actionPlanCompleted: boolean;
  autodiagnosticCompleted: boolean;
};

function StatusIcon({ complete }: { complete: boolean }) {
  return (
    <span
      className={`inline-flex h-6 w-6 items-center justify-center rounded-full ${
        complete
          ? "bg-[rgba(47,138,99,0.14)] text-[var(--success)]"
          : "bg-[rgba(159,25,24,0.10)] text-[var(--accent-red)]"
      }`}
    >
      {complete ? (
        <svg
          viewBox="0 0 20 20"
          aria-hidden="true"
          className="h-3.5 w-3.5"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M4.5 10.5 8 14l7.5-8" />
        </svg>
      ) : (
        <svg
          viewBox="0 0 20 20"
          aria-hidden="true"
          className="h-3.5 w-3.5"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
        >
          <path d="m6 6 8 8" />
          <path d="m14 6-8 8" />
        </svg>
      )}
    </span>
  );
}

export function UserSidebar({
  memberEmail,
  totalSessions,
  completedSessions,
  onboardingCompleted,
  actionPlanCompleted,
  autodiagnosticCompleted,
}: UserSidebarProps) {
  const [activePanel, setActivePanel] = useState<"menu" | "privacy">("menu");
  const [mobileOpen, setMobileOpen] = useState(false);
  const autodiagnosticUnlocked = onboardingCompleted;
  const actionPlanUnlocked = onboardingCompleted && autodiagnosticCompleted;

  return (
    <div
      data-tutorial-target="user-sidebar"
      className="glass-card rounded-[28px] p-3 sm:p-5"
    >
      <button
        type="button"
        onClick={() => setMobileOpen((open) => !open)}
        aria-expanded={mobileOpen}
        className="flex w-full items-center justify-between rounded-[22px] border border-[var(--line)] bg-white px-3 py-3 text-left transition-colors hover:border-[var(--primary)] lg:hidden"
      >
        <span className="flex items-center gap-3">
          <span className="flex h-10 w-10 items-center justify-center rounded-full bg-[rgba(215,61,65,0.10)] text-[var(--accent-red)]">
            <svg
              viewBox="0 0 24 24"
              aria-hidden="true"
              className="h-5 w-5"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M12 3l7 4v5c0 4.5-2.9 7.9-7 9-4.1-1.1-7-4.5-7-9V7l7-4Z" />
              <path d="M9.5 12.5l1.7 1.7 3.3-4" />
            </svg>
          </span>
          <span className="min-w-0">
            <span className="block text-xs font-semibold uppercase tracking-[0.18em] text-[var(--accent-red)]">
              Espace utilisateur
            </span>
            <span className="mt-0.5 block truncate text-sm font-semibold text-[var(--ink)]">
              {activePanel === "privacy" ? "Parametres" : "EvolIA"}
            </span>
          </span>
        </span>
        <span className="text-lg leading-none text-[var(--foreground)]">
          {mobileOpen ? "-" : "+"}
        </span>
      </button>

      <div
        className={`${mobileOpen ? "mt-3 flex" : "hidden"} flex-col lg:mt-0 lg:flex`}
      >
        {activePanel === "menu" ? (
          <>
            <p className="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--accent-red)]">
              Espace utilisateur
            </p>
            <div className="mt-3">
              <Image
                src="/branding/evolia-sidebar.png"
                alt="EvolIA"
                width={220}
                height={64}
                className="h-auto w-auto max-w-full"
                priority
              />
            </div>
            <p className="mt-3 text-sm leading-7 text-[var(--foreground)]">
              Bienvenue {memberEmail}
            </p>

            <section className="mt-4 overflow-hidden rounded-[24px] border border-[rgba(23,117,186,0.14)] bg-[linear-gradient(160deg,rgba(255,255,255,0.98)_0%,rgba(240,246,252,0.96)_100%)]">
              <div className="border-b border-[rgba(23,117,186,0.10)] px-4 py-3">
                <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--primary)]">
                  Activite demo
                </p>
              </div>
              <div className="grid grid-cols-2 gap-px bg-[rgba(23,117,186,0.10)]">
                <div className="bg-white px-4 py-4">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--primary)]">
                    Simulations
                  </p>
                  <p className="mt-2 text-3xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
                    {totalSessions}
                  </p>
                  <p className="mt-1 text-xs leading-5 text-[var(--foreground)]">
                    lancees
                  </p>
                </div>
                <div className="bg-white px-4 py-4">
                  <p className="text-[10px] font-semibold uppercase tracking-[0.18em] text-[var(--accent-gold)]">
                    Rapports
                  </p>
                  <p className="mt-2 text-3xl font-extrabold tracking-[-0.04em] text-[var(--ink)]">
                    {completedSessions}
                  </p>
                  <p className="mt-1 text-xs leading-5 text-[var(--foreground)]">
                    disponibles
                  </p>
                </div>
              </div>
            </section>

            <div className="mt-4 rounded-[20px] border border-[var(--line)] bg-white p-4">
              <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--primary)]">
                Personnalisation
              </p>
              <div className="mt-4 grid gap-2">
                <div
                  aria-disabled="true"
                  className={`inline-flex cursor-not-allowed items-center justify-between rounded-full px-4 py-3 text-sm font-semibold ${
                    onboardingCompleted
                      ? "bg-[rgba(23,117,186,0.12)] text-[var(--primary)]"
                      : "border border-[var(--line)] bg-white text-[var(--foreground)]"
                  }`}
                >
                  <span>Mon contexte</span>
                  <StatusIcon complete={onboardingCompleted} />
                </div>
                <div
                  aria-disabled="true"
                  className={`inline-flex cursor-not-allowed items-center justify-between rounded-full px-4 py-3 text-sm font-semibold ${
                    !autodiagnosticUnlocked
                      ? "border border-[var(--line)] bg-[var(--surface-soft)] text-[var(--foreground)]/55"
                      : autodiagnosticCompleted
                        ? "bg-[rgba(23,117,186,0.12)] text-[var(--primary)]"
                        : "border border-[var(--line)] bg-white text-[var(--foreground)]"
                  }`}
                >
                  <span>Autodiagnostique</span>
                  <StatusIcon complete={autodiagnosticCompleted} />
                </div>
                <div
                  aria-disabled="true"
                  className={`inline-flex cursor-not-allowed items-center justify-between rounded-full px-4 py-3 text-sm font-semibold ${
                    !actionPlanUnlocked
                      ? "border border-[var(--line)] bg-[var(--surface-soft)] text-[var(--foreground)]/55"
                      : actionPlanCompleted
                        ? "bg-[rgba(23,117,186,0.12)] text-[var(--primary)]"
                        : "border border-[var(--line)] bg-white text-[var(--foreground)]"
                  }`}
                >
                  <span>Plan d&apos;action individuel</span>
                  <StatusIcon complete={actionPlanCompleted} />
                </div>
              </div>
            </div>

            <div className="mt-auto pt-7">
              <div className="mt-4">
                <button
                  type="button"
                  onClick={() => setActivePanel("privacy")}
                  className="inline-flex w-full 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(--primary)] hover:text-[var(--primary)]"
                >
                  Parametres et confidentialite
                </button>
              </div>

              <div className="mt-4">
                <LogoutButton />
              </div>
            </div>
          </>
        ) : (
          <>
            <div className="flex items-start justify-between gap-3">
              <div>
                <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--primary)]">
                  Parametres
                </p>
              </div>

              <button
                type="button"
                aria-label="Fermer les parametres"
                onClick={() => setActivePanel("menu")}
                className="shrink-0 rounded-full border border-[var(--line)] px-3 py-1.5 text-xs font-semibold text-[var(--foreground)] transition-colors hover:border-[var(--primary)] hover:text-[var(--primary)]"
              >
                Fermer
              </button>
            </div>

            <section className="mt-4 rounded-[22px] border border-[var(--line)] bg-[var(--surface-soft)] p-3">
              <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--accent-gold)]">
                Regles de confidentialite
              </p>
              <div className="mt-3 space-y-2">
                {privacySettings.map((setting) => (
                  <label
                    key={setting.id}
                    className="flex items-start justify-between gap-3 rounded-[16px] border border-[var(--line)] bg-white px-3 py-2.5"
                  >
                    <span className="min-w-0">
                      <span className="block text-[13px] font-semibold leading-5 text-[var(--ink)]">
                        {setting.title}
                      </span>
                      <span className="mt-0.5 block text-xs leading-4 text-[var(--foreground)]">
                        {setting.description}
                      </span>
                    </span>
                    <span className="shrink-0 pt-0.5">
                      <input
                        type="checkbox"
                        defaultChecked={setting.enabled}
                        className="h-4 w-4 accent-[var(--primary)]"
                      />
                    </span>
                  </label>
                ))}
              </div>
            </section>

            <section className="mt-3 rounded-[22px] border border-[var(--line)] bg-[rgba(23,117,186,0.08)] p-2">
              <ul className="grid gap-px overflow-hidden rounded-[16px] border border-[rgba(23,117,186,0.12)] bg-[rgba(23,117,186,0.12)] text-xs leading-4 text-[var(--foreground)]">
                {requestSettings.map((item) => (
                  <li key={item} className="bg-white px-3 py-2">
                    {item}
                  </li>
                ))}
              </ul>
            </section>

            <section className="mt-3 rounded-[22px] border border-[var(--line)] bg-[rgba(216,142,4,0.10)] p-3">
              <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--accent-gold)]">
                Etat de conformite
              </p>
              <div className="mt-3 space-y-1.5 text-xs leading-4 text-[var(--foreground)]">
                <p>Base legale : interet legitime + consentement.</p>
                <p>Revue registre : 18 mars 2026.</p>
                <p>Stockage : Union europeenne.</p>
              </div>
            </section>

            <div className="mt-3 flex flex-wrap gap-2">
              <button
                type="button"
                className="inline-flex rounded-full bg-[var(--primary)] px-4 py-2 text-xs font-semibold text-white transition-colors hover:bg-[var(--primary-strong)]"
              >
                Enregistrer
              </button>
              <button
                type="button"
                className="inline-flex rounded-full border border-[var(--line)] px-4 py-2 text-xs font-semibold text-[var(--foreground)] transition-colors hover:border-[var(--accent-red)] hover:text-[var(--accent-red)]"
              >
                Simuler effacement
              </button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}