import React from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Sparkles, Users, Camera, CalendarDays, ChevronRight, CreditCard, UserPlus, Palette } from "lucide-react";

import {
  TenantWelcomeLayout,
  WelcomeHero,
  OnboardingHighlightsGrid,
  OnboardingCTAList,
  useOnboardingProgress,
} from "..";
import { ADMIN_WELCOME_PACKAGES_PATH, ADMIN_EVENTS_PATH } from "../../constants";
import { ChecklistRow, FrostedSurface } from "../../components/tenant";

export default function WelcomeLandingPage() {
  const navigate = useNavigate();
  const { markStep, progress } = useOnboardingProgress();
  const { t } = useTranslation("onboarding");

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

  const progressStatus = React.useMemo(
    () => ({
      complete: t("landingProgress.status.complete"),
      pending: t("landingProgress.status.pending"),
    }),
    [t]
  );

  const progressSteps = React.useMemo(
    () => [
      {
        key: "package",
        icon: <CreditCard className="h-5 w-5" />,
        label: t("landingProgress.steps.package.title"),
        hint: t("landingProgress.steps.package.hint"),
        completed: progress.packageSelected,
      },
      {
        key: "invite",
        icon: <UserPlus className="h-5 w-5" />,
        label: t("landingProgress.steps.invite.title"),
        hint: t("landingProgress.steps.invite.hint"),
        completed: progress.inviteCreated,
      },
      {
        key: "branding",
        icon: <Palette className="h-5 w-5" />,
        label: t("landingProgress.steps.branding.title"),
        hint: t("landingProgress.steps.branding.hint"),
        completed: progress.brandingConfigured,
      },
    ],
    [progress.packageSelected, progress.inviteCreated, progress.brandingConfigured, t]
  );

  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",
          },
        ]}
      />

      <FrostedSurface className="space-y-4 rounded-3xl border border-white/20 p-6 text-slate-900 shadow-md shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-100">
        <div className="space-y-2">
          <p className="text-xs font-semibold uppercase tracking-[0.35em] text-rose-300 dark:text-rose-200">
            {t("landingProgress.eyebrow")}
          </p>
          <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-100">
            {t("landingProgress.title")}
          </h2>
          <p className="text-sm text-slate-600 dark:text-slate-300">
            {t("landingProgress.description")}
          </p>
        </div>
        <div className="grid gap-3">
          {progressSteps.map((step) => (
            <ChecklistRow
              key={step.key}
              icon={step.icon}
              label={step.label}
              hint={step.hint}
              completed={step.completed}
              status={progressStatus}
            />
          ))}
        </div>
      </FrostedSurface>

      <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>
  );
}