﻿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";

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) => (
            <div
              key={item.id}
              className="flex flex-col gap-3 rounded-2xl border border-brand-rose-soft bg-brand-card p-5 shadow-brand-primary"
            >
              <span className="flex size-10 items-center justify-center rounded-full bg-brand-rose-soft text-brand-rose shadow-inner">
                <item.icon className="size-5" />
              </span>
              <h3 className="text-lg font-semibold text-brand-slate">{item.title}</h3>
              <p className="text-sm text-brand-navy/80">{item.copy}</p>
            </div>
          ))}
        </div>

        <div className="mt-6 flex flex-col items-start gap-3 rounded-3xl border border-brand-rose-soft bg-brand-sky-soft/40 p-6 text-brand-navy">
          <h4 className="text-lg font-semibold text-brand-rose">{t("eventSetup.cta.heading")}</h4>
          <p className="text-sm text-brand-navy/80">{t("eventSetup.cta.description")}</p>
          <Button
            size="lg"
            className="mt-2 rounded-full bg-brand-rose text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)]"
            onClick={() => {
              markStep({ lastStep: "event-create-intent" });
              navigate(ADMIN_EVENT_CREATE_PATH);
            }}
          >
            {t("eventSetup.cta.button")}
            <ArrowRight className="ml-2 size-4" />
          </Button>
        </div>
      </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>
  );
}
