import React from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
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();
  const { t } = useTranslation("onboarding");

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

  return (
    <TenantWelcomeLayout
      eyebrow={t("layout.eyebrow")}
      title={t("layout.title")}
      subtitle={t("layout.subtitle")}
      footer={
        <>
          <span className="text-brand-navy/80">{t("layout.alreadyFamiliar")}</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)}
          >
            {t("layout.jumpToDashboard")}
            <ChevronRight className="size-4" />
          </button>
        </>
      }
    >
      <WelcomeHero
        eyebrow={t("hero.eyebrow")}
        title={t("hero.title")}
        scriptTitle={t("hero.scriptTitle")}
        description={t("hero.description")}
        actions={[
          {
            label: t("hero.primary.label"),
            onClick: () => navigate(ADMIN_WELCOME_PACKAGES_PATH),
            icon: Sparkles,
          },
          {
            label: t("hero.secondary.label"),
            onClick: () => navigate(ADMIN_EVENTS_PATH),
            icon: CalendarDays,
            variant: "outline",
          },
        ]}
      />

      <OnboardingHighlightsGrid
        items={[
          {
            id: "gallery",
            icon: Camera,
            title: t("highlights.gallery.title"),
            description: t("highlights.gallery.description"),
            badge: t("highlights.gallery.badge"),
          },
          {
            id: "team",
            icon: Users,
            title: t("highlights.team.title"),
            description: t("highlights.team.description"),
          },
          {
            id: "story",
            icon: Sparkles,
            title: t("highlights.story.title"),
            description: t("highlights.story.description"),
          },
        ]}
      />

      <OnboardingCTAList
        actions={[
          {
            id: "choose-package",
            label: t("ctaList.choosePackage.label"),
            description: t("ctaList.choosePackage.description"),
            onClick: () => navigate(ADMIN_WELCOME_PACKAGES_PATH),
            icon: Sparkles,
            buttonLabel: t("ctaList.choosePackage.button"),
          },
          {
            id: "create-event",
            label: t("ctaList.createEvent.label"),
            description: t("ctaList.createEvent.description"),
            onClick: () => navigate(ADMIN_EVENTS_PATH),
            icon: CalendarDays,
            buttonLabel: t("ctaList.createEvent.button"),
            variant: "secondary",
          },
        ]}
      />
    </TenantWelcomeLayout>
  );
}