import React, { useCallback, useEffect, useMemo, useState } from 'react';
import styled, { keyframes } from 'styled-components';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useNavigate, useSearchParams } from 'react-router-dom';
import toast from 'react-hot-toast';
import { useLocale } from '@/app/providers/LocaleProvider';
import { useAuthStore } from '@/features/auth/store/authStore';
import { Button, Card, Input, PanelMessage, Spinner, Textarea } from '@/shared/components/ui';
import { ROUTES } from '@/shared/constants/routes';
import { useOnboarding, ONBOARDING_QUERY_KEY } from '@/features/onboarding/hooks/useOnboarding';
import { OnboardingModal } from '@/features/onboarding/components/OnboardingModal';
import { WizardResumeBar } from '@/features/onboarding/components/WizardResumeBar';
import {
  CATEGORY_TEMPLATES,
  COMPANY_ADMIN_STEPS,
  DEPARTMENT_HEAD_STEPS,
  USER_STEPS,
} from '@/features/onboarding/constants/onboarding.constants';
import type { OnboardingPersona } from '@/features/onboarding/types/onboarding.types';
import {
  getDepartment,
  listDepartmentHeads,
  updateDepartmentPortalSettings,
} from '@/features/admin/services/departmentAdminService';
import {
  canSubmitDepartmentInviteRoleFields,
  DepartmentInviteRoleFields,
} from '@/features/admin/components/DepartmentInviteRoleFields';
import { inviteService } from '@/features/admin/services/inviteService';
import {
  type InviteFieldErrors,
  resolveInviteEmailDomain,
  resolveInviteErrorMessage,
  validateInviteForm,
} from '@/features/admin/utils/inviteFormValidation';
import { createCategory, listCategories } from '@/features/admin/services/categoryAdminService';
import {
  useNotificationPreferenceMutations,
  useNotificationPreferences,
} from '@/features/notifications/hooks/useNotificationPreferences';
import { channelsToEnabledList } from '@/features/notifications/types/notification.types';
import { PERMISSIONS } from '@/features/auth/constants/permissions';
import { usePermissions } from '@/features/auth/hooks/usePermissions';

const confettiPop = keyframes`
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
`;

const Shell = styled.div`
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: ${({ theme }) => theme.spacing[8]} ${({ theme }) => theme.spacing[6]};
`;

const StepNav = styled.div`
  display: flex;
  gap: ${({ theme }) => theme.spacing[2]};
  margin-bottom: ${({ theme }) => theme.spacing[6]};
  flex-wrap: wrap;
`;

const StepDot = styled.div<{ $active: boolean; $done: boolean }>`
  flex: 1;
  min-width: 48px;
  height: 4px;
  border-radius: ${({ theme }) => theme.borderRadius.full};
  background: ${({ theme, $active, $done }) =>
    $active || $done ? theme.colors.primary : theme.colors.border};
  opacity: ${({ $active, $done }) => ($active ? 1 : $done ? 0.7 : 0.4)};
  transition: background 0.2s ease;
`;

const StepTitle = styled.h1`
  margin: 0 0 ${({ theme }) => theme.spacing[2]};
  font-size: ${({ theme }) => theme.typography.fontSize['2xl']};
  text-align: start;
`;

const StepDescription = styled.p`
  margin: 0 0 ${({ theme }) => theme.spacing[6]};
  color: ${({ theme }) => theme.colors.text.secondary};
  text-align: start;
  line-height: ${({ theme }) => theme.typography.lineHeight.relaxed};
`;

const FieldStack = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing[4]};
  margin-bottom: ${({ theme }) => theme.spacing[6]};
`;

const TemplateGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: ${({ theme }) => theme.spacing[3]};
  margin-bottom: ${({ theme }) => theme.spacing[6]};
`;

const TemplateCard = styled.button<{ $selected: boolean }>`
  padding: ${({ theme }) => theme.spacing[4]};
  border-radius: ${({ theme }) => theme.borderRadius.lg};
  border: 2px solid ${({ theme, $selected }) => ($selected ? theme.colors.primary : theme.colors.border)};
  background: ${({ theme, $selected }) => ($selected ? `${theme.colors.primary}10` : theme.colors.surface)};
  cursor: pointer;
  text-align: start;
  font: inherit;
  color: ${({ theme }) => theme.colors.text.primary};

  &:focus-visible {
    outline: 2px solid ${({ theme }) => theme.colors.primary};
    outline-offset: 2px;
  }
`;

const Footer = styled.div`
  display: flex;
  justify-content: space-between;
  gap: ${({ theme }) => theme.spacing[3]};
  flex-wrap: wrap;
  padding-top: ${({ theme }) => theme.spacing[4]};
  border-top: 1px solid ${({ theme }) => theme.colors.border};
`;

const Celebrate = styled.div`
  text-align: center;
  padding: ${({ theme }) => theme.spacing[8]} 0;
  animation: ${confettiPop} 0.5s ease-out;
`;

const PortalPreview = styled.div`
  padding: ${({ theme }) => theme.spacing[3]} ${({ theme }) => theme.spacing[4]};
  border-radius: ${({ theme }) => theme.borderRadius.md};
  background: ${({ theme }) => theme.colors.background};
  border: 1px dashed ${({ theme }) => theme.colors.border};
  font-family: monospace;
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  text-align: start;
  word-break: break-all;
`;

const ToggleRow = styled.label`
  display: flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[3]};
  cursor: pointer;
  text-align: start;
`;

const InviteList = styled.ul`
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing[2]};
`;

const InviteItem = styled.li`
  padding: ${({ theme }) => theme.spacing[3]};
  border: 1px solid ${({ theme }) => theme.colors.border};
  border-radius: ${({ theme }) => theme.borderRadius.md};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  text-align: start;
`;

function getStepsForPersona(persona: OnboardingPersona): readonly string[] {
  switch (persona) {
    case 'company_admin':
      return COMPANY_ADMIN_STEPS;
    case 'department_head':
      return DEPARTMENT_HEAD_STEPS;
    default:
      return USER_STEPS;
  }
}

function getDefaultStep(persona: OnboardingPersona, savedStep: string | null): string {
  const steps = getStepsForPersona(persona);
  if (savedStep && steps.includes(savedStep)) {
    return savedStep;
  }
  return steps[0];
}

export const SetupWizard: React.FC = () => {
  const { t } = useLocale();
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const queryClient = useQueryClient();
  const user = useAuthStore((state) => state.user);
  const { can, isSuperAdmin } = usePermissions();
  const {
    shouldShowWizard,
    persona,
    departmentId,
    currentStep,
    updateStep,
    complete,
    isUpdating,
    isLoading,
  } = useOnboarding();

  const steps = useMemo(() => (persona ? getStepsForPersona(persona) : []), [persona]);
  const [activeStep, setActiveStep] = useState<string>('portal');
  const [wizardMinimized, setWizardMinimized] = useState(false);

  const invalidateOnboardingData = useCallback(() => {
    void queryClient.invalidateQueries({ queryKey: ONBOARDING_QUERY_KEY });
  }, [queryClient]);

  useEffect(() => {
    if (persona) {
      setActiveStep(getDefaultStep(persona, currentStep ?? null));
    }
  }, [persona, currentStep]);

  useEffect(() => {
    const onboardingStep = searchParams.get('onboarding');
    if (!onboardingStep || !persona) {
      return;
    }

    const stepList = getStepsForPersona(persona);
    if (!stepList.includes(onboardingStep)) {
      return;
    }

    setActiveStep(onboardingStep);
    setWizardMinimized(false);

    const nextParams = new URLSearchParams(searchParams);
    nextParams.delete('onboarding');
    setSearchParams(nextParams, { replace: true });
  }, [persona, searchParams, setSearchParams]);

  const stepIndex = steps.indexOf(activeStep);

  const departmentQuery = useQuery({
    queryKey: ['onboarding', 'department', departmentId],
    queryFn: () => getDepartment(departmentId!),
    enabled: Boolean(departmentId) && persona === 'department_head',
  });

  const invitesQuery = useQuery({
    queryKey: ['admin', 'invites'],
    queryFn: () => inviteService.list(),
    enabled: persona === 'department_head' && activeStep === 'invite',
  });

  const categoriesQuery = useQuery({
    queryKey: ['admin', 'categories', departmentId],
    queryFn: () => listCategories(departmentId!),
    enabled: Boolean(departmentId) && activeStep === 'workflow',
  });

  const notificationPreferencesQuery = useNotificationPreferences();
  const { updateMutation: updateNotificationPrefsMutation } = useNotificationPreferenceMutations();

  const [portalForm, setPortalForm] = useState({
    name: '',
    slug: '',
    portal_enabled: true,
    portal_description_en: '',
    portal_description_ar: '',
  });

  const [inviteForm, setInviteForm] = useState({
    email: '',
    role_name: 'agent',
    is_department_head: false,
  });
  const [inviteTransferAcknowledged, setInviteTransferAcknowledged] = useState(false);
  const [inviteFieldErrors, setInviteFieldErrors] = useState<InviteFieldErrors>({});
  const canSetOfficialHead = isSuperAdmin || can(PERMISSIONS.DEPARTMENT_HEADS_MANAGE);
  const allowedInviteEmailDomain = resolveInviteEmailDomain(user?.company?.domain);

  const inviteDepartmentHeadsQuery = useQuery({
    queryKey: ['onboarding', 'department', departmentId, 'heads'],
    queryFn: () => listDepartmentHeads(departmentId!),
    enabled: Boolean(departmentId) && canSetOfficialHead && activeStep === 'invite',
  });

  const [selectedTemplate, setSelectedTemplate] = useState<keyof typeof CATEGORY_TEMPLATES>('it_support');

  useEffect(() => {
    if (departmentQuery.data) {
      setPortalForm({
        name: departmentQuery.data.name,
        slug: departmentQuery.data.slug ?? '',
        portal_enabled: departmentQuery.data.portal_enabled ?? true,
        portal_description_en: departmentQuery.data.portal_description_en ?? '',
        portal_description_ar: departmentQuery.data.portal_description_ar ?? '',
      });
    }
  }, [departmentQuery.data]);

  const savePortalMutation = useMutation({
    mutationFn: () =>
      updateDepartmentPortalSettings(departmentId!, {
        portal_enabled: portalForm.portal_enabled,
        portal_description_en: portalForm.portal_description_en || null,
        portal_description_ar: portalForm.portal_description_ar || null,
      }),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ['onboarding', 'department', departmentId] });
      invalidateOnboardingData();
    },
  });

  const inviteMutation = useMutation({
    mutationFn: (normalizedEmail: string) =>
      inviteService.create({
        email: normalizedEmail,
        company_id: user!.company_id,
        department_id: departmentId!,
        role_name: inviteForm.role_name,
        is_department_head: canSetOfficialHead ? inviteForm.is_department_head : false,
      }),
    onSuccess: (_invite, normalizedEmail) => {
      setInviteForm({ email: '', role_name: 'agent', is_department_head: false });
      setInviteTransferAcknowledged(false);
      setInviteFieldErrors({});
      void invitesQuery.refetch();
      invalidateOnboardingData();
      toast.success(t('auth:invite.sentSuccess', { email: normalizedEmail }));
    },
    onError: (error) => {
      const resolved = resolveInviteErrorMessage(error, {
        forbidden: t('auth:invite.forbidden'),
        userExists: t('auth:invite.validation.userExists'),
        invalidDomain: t('auth:invite.validation.invalidDomain'),
        sendFailed: t('auth:invite.sendFailed'),
      });
      if (resolved.field === 'email') {
        setInviteFieldErrors({ email: resolved.message });
      }
      toast.error(resolved.message);
    },
  });

  const handleInviteSend = () => {
    const requiresTransferAck =
      inviteForm.is_department_head && (inviteDepartmentHeadsQuery.data?.length ?? 0) > 0;
    const validation = validateInviteForm({
      email: inviteForm.email,
      departmentId: departmentId ?? undefined,
      requireDepartment: true,
      requiresTransferAck,
      transferAcknowledged: inviteTransferAcknowledged,
      allowedDomain: allowedInviteEmailDomain,
      messages: {
        emailRequired: t('auth:invite.validation.emailRequired'),
        emailInvalid: t('auth:invite.validation.emailInvalid'),
        emailDomain: t('auth:invite.validation.emailDomain', { domain: allowedInviteEmailDomain }),
        companyRequired: t('auth:invite.validation.companyRequired'),
        departmentRequired: t('auth:invite.validation.departmentRequired'),
        transferAckRequired: t('auth:invite.validation.transferAckRequired'),
      },
    });

    if (!validation.valid) {
      setInviteFieldErrors(validation.errors);
      const firstError =
        validation.errors.email ??
        validation.errors.department ??
        validation.errors.transferAck;
      if (firstError) {
        toast.error(firstError);
      }
      return;
    }

    inviteMutation.mutate(validation.normalizedEmail);
  };

  const applyTemplateMutation = useMutation({
    mutationFn: async () => {
      const template = CATEGORY_TEMPLATES[selectedTemplate];
      for (const category of template.categories) {
        await createCategory({
          department_id: departmentId!,
          name_en: category.name_en,
          name_ar: category.name_ar,
          is_active: true,
          sort_order: 0,
        });
      }
    },
    onSuccess: () => {
      void categoriesQuery.refetch();
      invalidateOnboardingData();
      toast.success(t('onboarding:wizard.workflow.applied'));
    },
  });

  const toggleNotificationPreference = useCallback(
    async (notificationType: string, channel: 'email' | 'in_app', enabled: boolean) => {
      const preference = notificationPreferencesQuery.data?.find(
        (item) => item.notification_type === notificationType,
      );
      if (!preference) {
        return;
      }

      const channels = {
        ...preference.channels,
        [channel]: enabled,
      };

      await updateNotificationPrefsMutation.mutateAsync([
        {
          notification_type: notificationType,
          channels: channelsToEnabledList(channels),
        },
      ]);
      invalidateOnboardingData();
      toast.success(t('onboarding:wizard.notifications.saved'));
    },
    [
      invalidateOnboardingData,
      notificationPreferencesQuery.data,
      t,
      updateNotificationPrefsMutation,
    ],
  );

  const goToStep = useCallback(
    async (step: string) => {
      setActiveStep(step);
      await updateStep(step);
    },
    [updateStep],
  );

  const goNext = useCallback(async () => {
    const next = steps[stepIndex + 1];
    if (next) {
      await goToStep(next);
    }
  }, [goToStep, stepIndex, steps]);

  const goBack = useCallback(async () => {
    const prev = steps[stepIndex - 1];
    if (prev) {
      await goToStep(prev);
    }
  }, [goToStep, stepIndex, steps]);

  const finishWizard = useCallback(async () => {
    setWizardMinimized(false);
    await complete();
  }, [complete]);

  const closeWizard = useCallback(async () => {
    await updateStep(activeStep);
    setWizardMinimized(true);
  }, [activeStep, updateStep]);

  const openManagePage = useCallback(
    (route: string) => {
      setWizardMinimized(true);
      navigate(route);
    },
    [navigate],
  );

  const portalUrl = portalForm.slug
    ? `${window.location.origin}${ROUTES.DEPARTMENT_PORTAL(portalForm.slug)}`
    : '';

  const copyPortalLink = async () => {
    if (!portalUrl) {
      return;
    }
    await navigator.clipboard.writeText(portalUrl);
    toast.success(t('onboarding:wizard.goLive.copied'));
  };

  if (isLoading || !persona || !shouldShowWizard) {
    return null;
  }

  const wizardTitle =
    persona === 'department_head'
      ? t('onboarding:wizard.departmentHead.title')
      : persona === 'company_admin'
        ? t('onboarding:wizard.companyAdmin.title')
        : t('onboarding:wizard.user.title');

  const renderDepartmentHeadStep = () => {
    switch (activeStep) {
      case 'portal':
        return (
          <>
            <StepTitle>{t('onboarding:wizard.portal.title')}</StepTitle>
            <StepDescription>{t('onboarding:wizard.portal.description')}</StepDescription>
            {departmentQuery.isLoading ? (
              <Spinner />
            ) : (
              <FieldStack>
                <Input
                  label={t('onboarding:wizard.portal.name')}
                  value={portalForm.name}
                  readOnly
                />
                <Input
                  label={t('onboarding:wizard.portal.slug')}
                  value={portalForm.slug}
                  readOnly
                />
                <div>
                  <div style={{ marginBottom: '0.5rem', fontSize: '0.875rem' }}>
                    {t('onboarding:wizard.portal.urlPreview')}
                  </div>
                  <PortalPreview>{portalUrl || t('onboarding:wizard.portal.urlPlaceholder')}</PortalPreview>
                </div>
                <ToggleRow>
                  <input
                    type="checkbox"
                    checked={portalForm.portal_enabled}
                    onChange={(e) => setPortalForm((f) => ({ ...f, portal_enabled: e.target.checked }))}
                  />
                  {t('onboarding:wizard.portal.enabled')}
                </ToggleRow>
                <Textarea
                  label={t('onboarding:wizard.portal.descriptionEn')}
                  value={portalForm.portal_description_en}
                  onChange={(e) => setPortalForm((f) => ({ ...f, portal_description_en: e.target.value }))}
                  rows={3}
                />
                <Textarea
                  label={t('onboarding:wizard.portal.descriptionAr')}
                  value={portalForm.portal_description_ar}
                  onChange={(e) => setPortalForm((f) => ({ ...f, portal_description_ar: e.target.value }))}
                  rows={3}
                />
              </FieldStack>
            )}
            <Footer>
              <div />
              <Button
                variant="primary"
                loading={savePortalMutation.isPending || isUpdating}
                onClick={async () => {
                  await savePortalMutation.mutateAsync();
                  await goNext();
                }}
              >
                {t('onboarding:wizard.saveContinue')}
              </Button>
            </Footer>
          </>
        );

      case 'invite':
        return (
          <>
            <StepTitle>{t('onboarding:wizard.invite.title')}</StepTitle>
            <StepDescription>{t('onboarding:wizard.invite.description')}</StepDescription>
            <FieldStack>
              <Input
                label={t('onboarding:wizard.invite.email')}
                type="email"
                value={inviteForm.email}
                error={inviteFieldErrors.email}
                hint={t('auth:invite.emailHint', { domain: allowedInviteEmailDomain })}
                onChange={(e) => {
                  setInviteForm((f) => ({ ...f, email: e.target.value }));
                  if (inviteFieldErrors.email) {
                    setInviteFieldErrors((current) => ({ ...current, email: undefined }));
                  }
                }}
              />
              <DepartmentInviteRoleFields
                roleName={inviteForm.role_name}
                isDepartmentHead={inviteForm.is_department_head}
                onRoleNameChange={(value) =>
                  setInviteForm((form) => ({ ...form, role_name: value }))
                }
                onDepartmentHeadChange={(value) => {
                  setInviteForm((form) => ({ ...form, is_department_head: value }));
                  if (!value) {
                    setInviteTransferAcknowledged(false);
                  }
                }}
                canSetOfficialHead={canSetOfficialHead}
                showManagerOption
                departmentId={departmentId ?? undefined}
                transferAcknowledged={inviteTransferAcknowledged}
                onTransferAcknowledgedChange={(value) => {
                  setInviteTransferAcknowledged(value);
                  if (inviteFieldErrors.transferAck) {
                    setInviteFieldErrors((current) => ({ ...current, transferAck: undefined }));
                  }
                }}
              />
              {inviteFieldErrors.transferAck ? (
                <PanelMessage $variant="error">{inviteFieldErrors.transferAck}</PanelMessage>
              ) : null}
              <Button
                variant="secondary"
                disabled={
                  !inviteForm.email ||
                  !canSubmitDepartmentInviteRoleFields(
                    inviteForm.is_department_head,
                    inviteDepartmentHeadsQuery.data?.length ?? 0,
                    inviteTransferAcknowledged,
                  )
                }
                loading={inviteMutation.isPending}
                onClick={handleInviteSend}
              >
                {t('onboarding:wizard.invite.send')}
              </Button>
            </FieldStack>
            {invitesQuery.data && invitesQuery.data.length > 0 && (
              <InviteList>
                {invitesQuery.data
                  .filter((invite) => invite.department_id === departmentId && invite.status === 'pending')
                  .map((invite) => (
                    <InviteItem key={invite.id}>{invite.email}</InviteItem>
                  ))}
              </InviteList>
            )}
            <Footer>
              <Button variant="ghost" onClick={() => void goBack()}>
                {t('onboarding:wizard.back')}
              </Button>
              <div style={{ display: 'flex', gap: '0.5rem' }}>
                <Button variant="secondary" onClick={() => void goNext()}>
                  {t('onboarding:wizard.skipForNow')}
                </Button>
                <Button variant="primary" onClick={() => void goNext()}>
                  {t('onboarding:wizard.continue')}
                </Button>
              </div>
            </Footer>
          </>
        );

      case 'workflow':
        return (
          <>
            <StepTitle>{t('onboarding:wizard.workflow.title')}</StepTitle>
            <StepDescription>{t('onboarding:wizard.workflow.description')}</StepDescription>
            <TemplateGrid>
              {(Object.keys(CATEGORY_TEMPLATES) as Array<keyof typeof CATEGORY_TEMPLATES>).map((key) => (
                <TemplateCard
                  key={key}
                  type="button"
                  $selected={selectedTemplate === key}
                  onClick={() => setSelectedTemplate(key)}
                >
                  {t(`onboarding:wizard.workflow.templates.${key}`)}
                </TemplateCard>
              ))}
            </TemplateGrid>
            {selectedTemplate !== 'custom' && (
              <Button
                variant="secondary"
                loading={applyTemplateMutation.isPending}
                onClick={() => applyTemplateMutation.mutate()}
                style={{ marginBottom: '1.5rem' }}
              >
                {t('onboarding:wizard.workflow.useTemplate')}
              </Button>
            )}
            {categoriesQuery.data && categoriesQuery.data.length > 0 && (
              <Card variant="outlined" padding="md" style={{ marginBottom: '1.5rem' }}>
                {categoriesQuery.data.map((cat) => (
                  <div key={cat.id} style={{ textAlign: 'start', padding: '0.25rem 0' }}>
                    {cat.name_en}
                  </div>
                ))}
              </Card>
            )}
            <Footer>
              <Button variant="ghost" onClick={() => void goBack()}>
                {t('onboarding:wizard.back')}
              </Button>
              <Button variant="primary" onClick={() => void goNext()}>
                {t('onboarding:wizard.continue')}
              </Button>
            </Footer>
          </>
        );

      case 'notifications': {
        const slaWarningPref = notificationPreferencesQuery.data?.find(
          (item) => item.notification_type === 'sla_warning',
        );
        const ticketAssignedPref = notificationPreferencesQuery.data?.find(
          (item) => item.notification_type === 'ticket_assigned',
        );

        return (
          <>
            <StepTitle>{t('onboarding:wizard.notifications.title')}</StepTitle>
            <StepDescription>{t('onboarding:wizard.notifications.description')}</StepDescription>
            {notificationPreferencesQuery.isLoading ? (
              <Spinner />
            ) : (
              <FieldStack>
                <ToggleRow>
                  <input
                    type="checkbox"
                    checked={slaWarningPref?.channels.email ?? false}
                    disabled={!slaWarningPref || updateNotificationPrefsMutation.isPending}
                    onChange={(e) =>
                      void toggleNotificationPreference('sla_warning', 'email', e.target.checked)
                    }
                  />
                  {t('onboarding:wizard.notifications.slaWarning')}
                </ToggleRow>
                <ToggleRow>
                  <input
                    type="checkbox"
                    checked={ticketAssignedPref?.channels.in_app ?? false}
                    disabled={!ticketAssignedPref || updateNotificationPrefsMutation.isPending}
                    onChange={(e) =>
                      void toggleNotificationPreference('ticket_assigned', 'in_app', e.target.checked)
                    }
                  />
                  {t('onboarding:wizard.notifications.realtime')}
                </ToggleRow>
                <Button
                  variant="secondary"
                  onClick={() => openManagePage(ROUTES.NOTIFICATION_PREFERENCES)}
                >
                  {t('onboarding:wizard.notifications.configurePreferences')}
                </Button>
                <Card variant="outlined" padding="md">
                  <p style={{ margin: 0, textAlign: 'start', fontSize: '0.875rem', color: 'inherit', opacity: 0.8 }}>
                    {t('onboarding:wizard.notifications.slaHint')}
                  </p>
                  <Button
                    variant="primary"
                    style={{ marginTop: '1rem' }}
                    onClick={() => openManagePage(ROUTES.SETTINGS_SLA)}
                  >
                    {t('onboarding:wizard.notifications.configureSla')}
                  </Button>
                </Card>
              </FieldStack>
            )}
            <Footer>
              <Button variant="ghost" onClick={() => void goBack()}>
                {t('onboarding:wizard.back')}
              </Button>
              <Button variant="primary" onClick={() => void goNext()}>
                {t('onboarding:wizard.continue')}
              </Button>
            </Footer>
          </>
        );
      }

      case 'go_live':
        return (
          <>
            <Celebrate>
              <div style={{ fontSize: '3rem', marginBottom: '1rem' }} aria-hidden>✦</div>
              <StepTitle>{t('onboarding:wizard.goLive.title')}</StepTitle>
              <StepDescription>{t('onboarding:wizard.goLive.description')}</StepDescription>
            </Celebrate>
            <FieldStack>
              <PortalPreview>{portalUrl}</PortalPreview>
              <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
                <Button variant="secondary" onClick={() => void copyPortalLink()} disabled={!portalUrl}>
                  {t('onboarding:wizard.goLive.copyLink')}
                </Button>
                <Button
                  variant="secondary"
                  onClick={() => {
                    void finishWizard();
                    navigate(ROUTES.TICKET_CREATE);
                  }}
                >
                  {t('onboarding:wizard.goLive.createTestTicket')}
                </Button>
                <Button
                  variant="primary"
                  onClick={() => {
                    void finishWizard();
                    navigate(ROUTES.DASHBOARD);
                  }}
                >
                  {t('onboarding:wizard.goLive.openDashboard')}
                </Button>
              </div>
            </FieldStack>
          </>
        );

      default:
        return null;
    }
  };

  const renderCompanyAdminStep = () => {
    const content: Record<string, { title: string; description: string; route: string; cta: string }> = {
      departments: {
        title: t('onboarding:wizard.companyAdmin.steps.departments.title'),
        description: t('onboarding:wizard.companyAdmin.steps.departments.description'),
        route: ROUTES.ADMIN_DEPARTMENTS,
        cta: t('onboarding:wizard.companyAdmin.steps.departments.cta'),
      },
      heads: {
        title: t('onboarding:wizard.companyAdmin.steps.heads.title'),
        description: t('onboarding:wizard.companyAdmin.steps.heads.description'),
        route: ROUTES.ADMIN_USERS,
        cta: t('onboarding:wizard.companyAdmin.steps.heads.cta'),
      },
      settings: {
        title: t('onboarding:wizard.companyAdmin.steps.settings.title'),
        description: t('onboarding:wizard.companyAdmin.steps.settings.description'),
        route: ROUTES.SETTINGS,
        cta: t('onboarding:wizard.companyAdmin.steps.settings.cta'),
      },
      users: {
        title: t('onboarding:wizard.companyAdmin.steps.users.title'),
        description: t('onboarding:wizard.companyAdmin.steps.users.description'),
        route: ROUTES.ADMIN_USERS,
        cta: t('onboarding:wizard.companyAdmin.steps.users.cta'),
      },
      review: {
        title: t('onboarding:wizard.companyAdmin.steps.review.title'),
        description: t('onboarding:wizard.companyAdmin.steps.review.description'),
        route: ROUTES.SETTINGS_SLA,
        cta: t('onboarding:wizard.companyAdmin.steps.review.cta'),
      },
    };

    const step = content[activeStep];
    if (!step) {
      return null;
    }

    const isLast = activeStep === 'review';

    return (
      <>
        <StepTitle>{step.title}</StepTitle>
        <StepDescription>{step.description}</StepDescription>
        <Footer>
          <Button variant="ghost" onClick={() => void goBack()} disabled={stepIndex === 0}>
            {t('onboarding:wizard.back')}
          </Button>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <Button variant="secondary" onClick={() => openManagePage(step.route)}>
              {step.cta}
            </Button>
            {isLast ? (
              <Button variant="primary" onClick={() => void finishWizard()}>
                {t('onboarding:wizard.finish')}
              </Button>
            ) : (
              <Button variant="primary" onClick={() => void goNext()}>
                {t('onboarding:wizard.continue')}
              </Button>
            )}
          </div>
        </Footer>
      </>
    );
  };

  const renderUserStep = () => {
    switch (activeStep) {
      case 'welcome':
        return (
          <>
            <Celebrate>
              <StepTitle>{t('onboarding:wizard.user.steps.welcome.title')}</StepTitle>
              <StepDescription>{t('onboarding:wizard.user.steps.welcome.description')}</StepDescription>
            </Celebrate>
            <Footer>
              <div />
              <Button variant="primary" onClick={() => void goNext()}>
                {t('onboarding:wizard.continue')}
              </Button>
            </Footer>
          </>
        );
      case 'department':
        return (
          <>
            <StepTitle>{t('onboarding:wizard.user.steps.department.title')}</StepTitle>
            <StepDescription>{t('onboarding:wizard.user.steps.department.description')}</StepDescription>
            <Footer>
              <Button variant="ghost" onClick={() => void goBack()}>{t('onboarding:wizard.back')}</Button>
              <Button variant="primary" onClick={() => void goNext()}>{t('onboarding:wizard.continue')}</Button>
            </Footer>
          </>
        );
      case 'ticket':
        return (
          <>
            <StepTitle>{t('onboarding:wizard.user.steps.ticket.title')}</StepTitle>
            <StepDescription>{t('onboarding:wizard.user.steps.ticket.description')}</StepDescription>
            <Footer>
              <Button variant="ghost" onClick={() => void goBack()}>{t('onboarding:wizard.back')}</Button>
              <Button variant="primary" onClick={() => { void finishWizard(); navigate(ROUTES.PROFILE_MY_TICKETS); }}>
                {t('onboarding:wizard.user.steps.ticket.cta')}
              </Button>
            </Footer>
          </>
        );
      case 'track':
        return (
          <>
            <StepTitle>{t('onboarding:wizard.user.steps.track.title')}</StepTitle>
            <StepDescription>{t('onboarding:wizard.user.steps.track.description')}</StepDescription>
            <Footer>
              <Button variant="ghost" onClick={() => void goBack()}>{t('onboarding:wizard.back')}</Button>
              <Button variant="primary" onClick={() => { void finishWizard(); navigate(ROUTES.DASHBOARD); }}>
                {t('onboarding:wizard.finish')}
              </Button>
            </Footer>
          </>
        );
      default:
        return null;
    }
  };

  return (
    <>
      <OnboardingModal
        isOpen={!wizardMinimized}
        title={wizardTitle}
        onClose={() => void closeWizard()}
        closeAriaLabel={t('onboarding:wizard.saveAndExit')}
        headerExtra={
          <span style={{ fontSize: '0.875rem', opacity: 0.7 }}>
            {t('onboarding:wizard.stepProgress', { current: stepIndex + 1, total: steps.length })}
          </span>
        }
      >
        <Shell>
          <StepNav aria-hidden>
            {steps.map((step, index) => (
              <StepDot key={step} $active={index === stepIndex} $done={index < stepIndex} />
            ))}
          </StepNav>
          {persona === 'department_head' && renderDepartmentHeadStep()}
          {persona === 'company_admin' && renderCompanyAdminStep()}
          {persona === 'user' && renderUserStep()}
        </Shell>
      </OnboardingModal>
      {wizardMinimized && <WizardResumeBar onResume={() => setWizardMinimized(false)} />}
    </>
  );
};