import React from "react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useCheckoutWizard } from "../WizardContext";
import { Trans, useTranslation } from 'react-i18next';

interface ConfirmationStepProps {
  onViewProfile?: () => void;
  onGoToAdmin?: () => void;
}

export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfile, onGoToAdmin }) => {
  const { t } = useTranslation('marketing');
  const { selectedPackage } = useCheckoutWizard();
  const handleProfile = React.useCallback(() => {
    if (typeof onViewProfile === 'function') {
      onViewProfile();
      return;
    }
    window.location.href = '/settings/profile';
  }, [onViewProfile]);

  const handleAdmin = React.useCallback(() => {
    if (typeof onGoToAdmin === 'function') {
      onGoToAdmin();
      return;
    }
    window.location.href = '/event-admin';
  }, [onGoToAdmin]);

  const packageName = selectedPackage?.name ?? '';

  return (
    <div className="space-y-6">
      <Alert className="border-primary/40 bg-primary/5">
        <AlertTitle className="text-xl font-semibold">
          {t('checkout.confirmation_step.welcome')}
        </AlertTitle>
        <AlertDescription className="space-y-2 text-base leading-relaxed">
          <Trans
            t={t}
            i18nKey="checkout.confirmation_step.package_summary"
            components={{ strong: <span className="font-semibold" /> }}
            values={{ name: packageName }}
          />
          <p className="text-sm text-muted-foreground">
            {t('checkout.confirmation_step.email_followup')}
          </p>
        </AlertDescription>
      </Alert>
      <div className="flex flex-wrap gap-3 justify-end">
        <Button variant="outline" onClick={handleProfile}>
          {t('checkout.confirmation_step.open_profile')}
        </Button>
        <Button onClick={handleAdmin}>{t('checkout.confirmation_step.to_admin')}</Button>
      </div>
    </div>
  );
};