import React from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { ClipboardCheck, Sparkles, Globe, ArrowRight } from "lucide-react";

import {
  TenantWelcomeLayout,
  WelcomeStepCard,
  OnboardingCTAList,
  useOnboardingProgress,
} from "..";
import { Button } from "@/components/ui/button";
import { ADMIN_EVENT_CREATE_PATH, ADMIN_EVENTS_PATH, ADMIN_HOME_PATH } from "../../constants";
import { FrostedSurface } from "../../components/tenant";

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

  React.useEffect(() => {
    markStep({ lastStep: "event-setup" });
  }, [markStep]);

  return (
    <TenantWelcomeLayout
      eyebrow={t("eventSetup.layout.eyebrow")}
      title={t("eventSetup.layout.title")}
      subtitle={t("eventSetup.layout.subtitle")}
    >
      <WelcomeStepCard
        step={4}
        totalSteps={4}
        title={t("eventSetup.step.title")}
        description={t("eventSetup.step.description")}
        icon={ClipboardCheck}
      >
        <div className="grid gap-4 md:grid-cols-3">
          {[
            {
              id: "story",
              title: t("eventSetup.tiles.story.title"),
              copy: t("eventSetup.tiles.story.copy"),
              icon: Sparkles,
            },
            {
              id: "team",
              title: t("eventSetup.tiles.team.title"),
              copy: t("eventSetup.tiles.team.copy"),
              icon: Globe,
            },
            {
              id: "launch",
              title: t("eventSetup.tiles.launch.title"),
              copy: t("eventSetup.tiles.launch.copy"),
              icon: ArrowRight,
            },
          ].map((item) => (
            <FrostedSurface
              key={item.id}
              className="flex flex-col gap-3 border border-white/20 p-5 text-slate-900 shadow-md shadow-rose-200/20 dark:border-slate-800/70 dark:bg-slate-950/80 dark:text-slate-100"
            >
              <span className="flex size-10 items-center justify-center rounded-full bg-rose-100/80 text-rose-500 shadow-inner shadow-rose-200/60 dark:bg-rose-500/20 dark:text-rose-200">
                <item.icon className="size-5" />
              </span>
              <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{item.title}</h3>
              <p className="text-sm text-slate-600 dark:text-slate-400">{item.copy}</p>
            </FrostedSurface>
          ))}
        </div>

        <FrostedSurface className="mt-6 flex flex-col items-start gap-3 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">
          <h4 className="text-lg font-semibold text-rose-400 dark:text-rose-200">{t("eventSetup.cta.heading")}</h4>
          <p className="text-sm text-slate-600 dark:text-slate-400">{t("eventSetup.cta.description")}</p>
          <Button
            size="lg"
            className="mt-2 rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-white shadow-lg shadow-rose-300/30 hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]"
            onClick={() => {
              markStep({ lastStep: "event-create-intent" });
              navigate(ADMIN_EVENT_CREATE_PATH);
            }}
          >
            {t("eventSetup.cta.button")}
            <ArrowRight className="ml-2 size-4" />
          </Button>
        </FrostedSurface>
      </WelcomeStepCard>

      <OnboardingCTAList
        actions={[
          {
            id: "back",
            label: t("eventSetup.actions.back.label"),
            description: t("eventSetup.actions.back.description"),
            buttonLabel: t("eventSetup.actions.back.button"),
            onClick: () => navigate(-1),
            variant: "secondary",
          },
          {
            id: "dashboard",
            label: t("eventSetup.actions.dashboard.label"),
            description: t("eventSetup.actions.dashboard.description"),
            buttonLabel: t("eventSetup.actions.dashboard.button"),
            onClick: () => navigate(ADMIN_HOME_PATH),
          },
          {
            id: "events",
            label: t("eventSetup.actions.events.label"),
            description: t("eventSetup.actions.events.description"),
            buttonLabel: t("eventSetup.actions.events.button"),
            onClick: () => navigate(ADMIN_EVENTS_PATH),
          },
        ]}
      />
    </TenantWelcomeLayout>
  );
}