import React from "react";
import { useNavigate } from "react-router-dom";
import { Sparkles, Users, Camera, CalendarDays, ChevronRight } from "lucide-react";
import {
  TenantWelcomeLayout,
  WelcomeHero,
  OnboardingHighlightsGrid,
  OnboardingCTAList,
  useOnboardingProgress,
} from "..";
import { ADMIN_WELCOME_PACKAGES_PATH, ADMIN_EVENTS_PATH } from "../../constants";

export default function WelcomeLandingPage() {
  const navigate = useNavigate();
  const { markStep } = useOnboardingProgress();

  React.useEffect(() => {
    markStep({ welcomeSeen: true, lastStep: "landing" });
  }, [markStep]);

  return (
    <TenantWelcomeLayout
      eyebrow="Fotospiel Tenant Admin"
      title="Willkommen im Event-Erlebnisstudio"
      subtitle="Starte mit einer inspirierten Einführung, sichere dir dein Event-Paket und kreiere die perfekte Gästegalerie – alles optimiert für mobile Hosts."
      footer={
        <>
          <span className="text-brand-navy/80">Schon vertraut mit Fotospiel?</span>
          <button
            type="button"
            className="inline-flex items-center gap-1 text-sm font-semibold text-brand-rose hover:text-[var(--brand-rose-strong)]"
            onClick={() => navigate(ADMIN_EVENTS_PATH)}
          >
            Direkt zum Dashboard
            <ChevronRight className="size-4" />
          </button>
        </>
      }
    >
      <WelcomeHero
        eyebrow="Dein Event, deine Bühne"
        title="Gestalte das nächste Fotospiel Erlebnis"
        scriptTitle="Einmalig für Gäste, mühelos für dich."
        description="Mit nur wenigen Schritten führst du deine Gäste durch ein magisches Fotoabenteuer – inklusive Storytelling, Aufgaben und moderierter Galerie."
        actions={[
          {
            label: "Pakete entdecken",
            buttonLabel: "Pakete entdecken",
            onClick: () => navigate(ADMIN_WELCOME_PACKAGES_PATH),
            icon: Sparkles,
          },
          {
            label: "Events anzeigen",
            buttonLabel: "Bestehende Events anzeigen",
            onClick: () => navigate(ADMIN_EVENTS_PATH),
            icon: CalendarDays,
            variant: "outline",
          },
        ]}
      />

      <OnboardingHighlightsGrid
        items={[
          {
            id: "gallery",
            icon: Camera,
            title: "Premium Gästegalerie",
            description:
              "Kuratiere Fotos in Echtzeit, markiere Highlights und teile QR-Codes mit einem Tap.",
            badge: "Neu",
          },
          {
            id: "team",
            icon: Users,
            title: "Flexibles Team-Onboarding",
            description:
              "Lade Co-Hosts ein, weise Rollen zu und behalte den Überblick über Moderation und Aufgaben.",
          },
          {
            id: "sparkles",
            icon: Sparkles,
            title: "Storytelling in Etappen",
            description:
              "Geführte Aufgaben und Emotionskarten machen jedes Event zu einer erinnerungswürdigen Reise.",
          },
        ]}
      />

      <OnboardingCTAList
        actions={[
          {
            id: "choose-package",
            label: "Dein Eventpaket auswählen",
            description:
              "Reserviere Credits oder Abos, um sofort Events zu aktivieren. Flexible Optionen für jede Eventgröße.",
            onClick: () => navigate(ADMIN_WELCOME_PACKAGES_PATH),
            icon: Sparkles,
            buttonLabel: "Weiter zu Paketen",
          },
          {
            id: "create-event",
            label: "Event vorbereiten",
            description:
              "Sammle Eventdetails, plane Aufgaben und sorge für einen reibungslosen Ablauf noch vor dem Tag des Events.",
            onClick: () => navigate(ADMIN_EVENTS_PATH),
            icon: CalendarDays,
            buttonLabel: "Zum Event-Manager",
            variant: "secondary",
          },
        ]}
      />
    </TenantWelcomeLayout>
  );
}