import { motion } from 'framer-motion';
import { CheckCircle2, ArrowRight, TrendingUp, Sparkles } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { useShouldReduceAnimations } from '@/hooks/use-reduced-motion';
import { JourneyTimeline } from './JourneyTimeline';

interface ProjectionDay {
  day: number;
  label: string;
  description?: string;
}

interface QuizResultPhase2Props {
  diagnosisSummary: string;
  recommendedFocus: string;
  projectionPayload: { days: ProjectionDay[] };
  onCTAClick: () => void;
  isLoading?: boolean;
}

export function QuizResultPhase2({ 
  diagnosisSummary,
  recommendedFocus,
  projectionPayload,
  onCTAClick, 
  isLoading = false,
}: QuizResultPhase2Props) {
  const { t } = useTranslation('quiz');
  const shouldReduceAnimations = useShouldReduceAnimations();
  const focusTitle = t(`resultPhase2.focusTitles.${recommendedFocus}`, {
    defaultValue: t('resultPhase2.focusFallback'),
  });

  return (
    <div className="w-full max-w-lg mx-auto space-y-8 py-4">
      {/* Success Icon - Premium glow */}
      <motion.div
        initial={shouldReduceAnimations ? {} : { scale: 0, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.5, type: 'spring', stiffness: 200, damping: 20 }}
        className="flex justify-center"
      >
        <div className="relative">
          {/* Outer glow ring */}
          <div className="absolute inset-0 w-20 h-20 rounded-full bg-primary/20 blur-xl animate-pulse" />
          {/* Inner ring */}
          <div className="relative w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
            <motion.div
              initial={{ rotate: -180, opacity: 0 }}
              animate={{ rotate: 0, opacity: 1 }}
              transition={{ delay: 0.2, duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
            >
              <CheckCircle2 className="w-10 h-10 text-primary" />
            </motion.div>
          </div>
        </div>
      </motion.div>

      {/* Personalized Title - Apple typography - No Y displacement to prevent CLS */}
      <motion.div
        initial={shouldReduceAnimations ? {} : { opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.45, delay: 0.15, ease: [0.25, 0.1, 0.25, 1] }}
        className="text-center"
      >
        <h2 className="text-2xl md:text-3xl font-bold text-foreground leading-tight tracking-tight">
          {t('resultPhase2.titlePrefix')}
          <span className="text-gradient">{focusTitle}</span>
          {t('resultPhase2.titleSuffix')}
        </h2>
      </motion.div>

      {/* Diagnosis Summary - Glass card - No Y displacement to prevent CLS */}
      <motion.div
        initial={shouldReduceAnimations ? {} : { opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.45, delay: 0.25, ease: [0.25, 0.1, 0.25, 1] }}
        className="quiz-result-card p-5"
      >
        <div className="flex items-start gap-4">
          <div className="relative flex-shrink-0 mt-0.5">
            <div className="absolute inset-0 bg-primary/20 rounded-xl blur-lg" />
            <div className="relative w-10 h-10 rounded-xl bg-primary/15 flex items-center justify-center border border-primary/20">
              <TrendingUp className="w-5 h-5 text-primary" />
            </div>
          </div>
          <div className="flex-1">
            <h3 className="text-sm font-semibold text-foreground mb-2 flex items-center gap-2">
              <Sparkles className="w-4 h-4 text-primary" />
              {t('resultPhase2.diagnosisLabel')}
            </h3>
            <p className="text-sm text-muted-foreground leading-relaxed">
              {diagnosisSummary}
            </p>
          </div>
        </div>
      </motion.div>

      {/* 21-Day Journey Timeline - No Y displacement to prevent CLS */}
      <motion.div
        initial={shouldReduceAnimations ? {} : { opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.45, delay: 0.35, ease: [0.25, 0.1, 0.25, 1] }}
      >
        <JourneyTimeline days={projectionPayload.days} />
      </motion.div>

      {/* Method Message - Subtle quote - No Y displacement to prevent CLS */}
      <motion.div
        initial={shouldReduceAnimations ? {} : { opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.45, delay: 0.45, ease: [0.25, 0.1, 0.25, 1] }}
        className="text-center py-2"
      >
        <p className="text-sm text-muted-foreground/80 italic">
          {t('resultPhase2.methodQuote')}
        </p>
      </motion.div>

      {/* CTA Button - Premium glow - No Y displacement to prevent CLS */}
      <motion.div
        initial={shouldReduceAnimations ? {} : { opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.45, delay: 0.55, ease: [0.25, 0.1, 0.25, 1] }}
      >
        <Button
          onClick={onCTAClick}
          disabled={isLoading}
          size="lg"
          className="glow-button w-full h-14 text-base font-semibold gap-2 group rounded-xl"
        >
          {t('resultPhase2.ctaText')}
          <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
        </Button>
      </motion.div>
    </div>
  );
}