import React from 'react';
import { useNavigate } from 'react-router-dom';
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();

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

  return (
    <TenantWelcomeLayout
      eyebrow="Schritt 4"
      title="Bereite dein erstes Event vor"
      subtitle="Fülle wenige Details aus, lade Co-Hosts ein und öffne deine Gästegalerie für das große Ereignis."
    >
      <WelcomeStepCard
        step={4}
        totalSteps={4}
        title="Event-Setup in Minuten"
        description="Wir führen dich durch Name, Datum, Mood und Aufgaben. Danach kannst du Fotos moderieren und Gäste live begleiten."
        icon={ClipboardCheck}
      >
        <div className="grid gap-4 md:grid-cols-3">
          {[
            {
              id: 'story',
              title: 'Story & Stimmung',
              copy: 'Wähle Bildsprache, Farben und Emotionskarten für dein Event.',
              icon: Sparkles,
            },
            {
              id: 'team',
              title: 'Team organisieren',
              copy: 'Lade Moderator*innen oder Fotograf*innen ein und teile Rollen zu.',
              icon: Globe,
            },
            {
              id: 'launch',
              title: 'Go-Live vorbereiten',
              copy: 'Erstelle QR-Codes, teste die Gästegalerie und kommuniziere den Ablauf.',
              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">Bereit für dein erstes Event?</h4>
          <p className="text-sm text-brand-navy/80">
            Du wechselst jetzt in den Event-Manager. Dort kannst du Tasks zuweisen, Mitglieder einladen und die
            Gästegalerie testen. Keine Sorge: Du kannst jederzeit zur Welcome Journey zurückkehren.
          </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);
            }}
          >
            Event erstellen
            <ArrowRight className="ml-2 size-4" />
          </Button>
        </div>
      </WelcomeStepCard>

      <OnboardingCTAList
        actions={[
          {
            id: 'back',
            label: 'Noch einmal Pakete prüfen',
            description: 'Vergleiche Preise oder aktualisiere dein derzeitiges Paket.',
            buttonLabel: 'Zu Paketen',
            onClick: () => navigate(-1),
            variant: 'secondary',
          },
          {
            id: 'dashboard',
            label: 'Zum Dashboard',
            description: 'Springe ins Management, um bestehende Events zu bearbeiten.',
            buttonLabel: 'Dashboard öffnen',
            onClick: () => navigate(ADMIN_HOME_PATH),
          },
          {
            id: 'events',
            label: 'Eventübersicht',
            description: 'Behalte den Überblick über alle aktiven und archivierten Events.',
            buttonLabel: 'Eventliste',
            onClick: () => navigate(ADMIN_EVENTS_PATH),
          },
        ]}
      />
    </TenantWelcomeLayout>
  );
}