'use client';

import { useTranslations } from 'next-intl';

import { Calendar, CheckCircle, RefreshCw } from 'lucide-react';

import { Button } from '@/components/ui/button';

import { Link, useRouter } from '@/i18n/navigation';

interface StepSuccessProps {
  onReset: () => void;
}

export default function StepSuccess({ onReset }: StepSuccessProps) {
  const t = useTranslations('eventSubmit.stepSuccess');
  const router = useRouter();

  return (
    <div className="flex flex-col items-center justify-center gap-6 py-10 sm:py-12 max-w-2xl mx-auto text-center text-[#151720]">
      <div className="flex h-20 w-20 items-center justify-center bg-green-500/10 text-green-600 shadow-[0_20px_50px_-35px_rgba(16,185,129,0.8)]">
        <CheckCircle className="w-12 h-12" />
      </div>

      <h2 className="text-2xl sm:text-3xl font-semibold uppercase tracking-[0.12em] text-[#151720]">
        {t('title')}
      </h2>

      <div className="w-full border border-[#151720]/10 bg-white/80 p-6 shadow-[0_25px_70px_-55px_rgba(20,25,40,0.35)]">
        <p className="text-sm sm:text-base text-[#151720]/75">
          {t.rich('successMessage', {
            bold: (chunks) => <strong className="font-semibold text-[#151720]">{chunks}</strong>,
            calendarLink: (chunks) => (
              <Link
                href={{ pathname: '/programok' }}
                className="font-semibold underline underline-offset-4 decoration-[#151720]/30 hover:decoration-[#151720]"
              >
                {chunks}
              </Link>
            ),
          })}
        </p>
      </div>

      <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
        <Button
          type="button"
          onClick={onReset}
          className="flex items-center justify-center gap-2 bg-[#151720] text-white hover:bg-[#151720]/85 uppercase tracking-[0.2em] text-xs sm:text-sm min-w-[200px]"
        >
          <RefreshCw className="w-4 h-4" />
          {t('newEventButton')}
        </Button>

        <Button
          type="button"
          onClick={() => router.push('/programok')}
          variant="outline"
          className="flex items-center justify-center gap-2 min-w-[200px] border-[#151720]/30 text-[#151720]/70 hover:border-[#151720]/60 hover:text-[#151720] hover:bg-white uppercase tracking-[0.2em] text-xs sm:text-sm"
        >
          <Calendar className="w-4 h-4" />
          {t('gotToCalendar')}
        </Button>
      </div>
    </div>
  );
}