import { useState } from "react";
import { CheckCircle2, Circle, Compass, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { Trip } from "@/types";

interface OnboardingGuideProps {
  role: "planner" | "traveler";
  hasTrips: boolean;
  onPrimaryAction?: () => void;
  trips?: Trip[];
}

const STORAGE_PREFIX = "triptales:onboarding-dismissed";

export function OnboardingGuide({ role, hasTrips, onPrimaryAction, trips = [] }: OnboardingGuideProps) {
  const storageKey = `${STORAGE_PREFIX}:${role}`;
  const [dismissed, setDismissed] = useState(() => localStorage.getItem(storageKey) === "true");

  const dismiss = () => {
    localStorage.setItem(storageKey, "true");
    setDismissed(true);
  };

  if (dismissed) {
    return (
      <Button variant="ghost" size="sm" className="mb-4" onClick={() => {
        localStorage.removeItem(storageKey);
        setDismissed(false);
      }}>
        <Compass className="mr-2 h-4 w-4" aria-hidden="true" />Afficher le guide de démarrage
      </Button>
    );
  }

  const plannerSteps = [
    { label: "Votre compte est prêt", done: true },
    { label: "Créer un voyage", done: hasTrips },
    { label: "Ajouter un voyageur", done: trips.some((trip) => Boolean(trip.members?.length || trip.invitations?.length)) },
    { label: "Ajouter une première étape", done: trips.some((trip) => trip.steps.length > 0) },
    { label: "Partager le voyage", done: trips.some((trip) => trip.steps.some((step) => step.isPublished)) },
  ];
  if (role === "planner" && plannerSteps.every((item) => item.done)) return null;
  const steps = role === "planner"
    ? [
        ...plannerSteps,
      ]
    : [
        { label: "Consulter votre programme", done: hasTrips },
        { label: "Valider les étapes proposées", done: false },
        { label: "Retrouver vos documents de voyage", done: false },
      ];

  return (
    <section className="surface-card relative mb-8 overflow-hidden border-primary/25 bg-accent/40 p-5 sm:p-6" aria-labelledby={`${role}-onboarding-title`}>
      <Button variant="ghost" size="icon" className="absolute right-2 top-2" onClick={dismiss} aria-label="Masquer le guide de démarrage">
        <X className="h-4 w-4" aria-hidden="true" />
      </Button>
      <div className="pr-10">
        <p className="text-sm font-bold uppercase tracking-[0.14em] text-primary">Bien démarrer</p>
        <h2 id={`${role}-onboarding-title`} className="mt-1 text-xl font-bold">
          {role === "planner" ? (hasTrips ? "Bien démarrer" : "Bienvenue sur TripTales") : "Votre voyage, simplement"}
        </h2>
        <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
          {role === "planner"
            ? "Créez le séjour, organisez le programme puis partagez-le avec un ou plusieurs voyageurs."
            : "Votre Travel Planner vous partage ici votre voyage, votre itinéraire et vos documents."}
        </p>
      </div>
      <ul className="mt-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-5">
        {steps.map((step) => (
          <li key={step.label} className="flex items-start gap-2 rounded-xl bg-white/75 p-3 text-sm font-medium">
            {step.done ? <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-[#4f8261]" aria-hidden="true" /> : <Circle className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />}
            {step.label}
          </li>
        ))}
      </ul>
      {role === "planner" && !hasTrips && onPrimaryAction && (
        <Button className="mt-4 w-full sm:w-auto" onClick={onPrimaryAction}>Créer mon premier voyage</Button>
      )}
    </section>
  );
}