'use client';

import { useEffect } from 'react';
import confetti from 'canvas-confetti';
import { ArrowRight, Check, Sparkles } from 'lucide-react';
import AlgebraJoinButton from '@/components/algebra1/AlgebraJoinButton';

export default function DiagnosticResult({
  studentName,
  outcome,
  strengths,
  gaps,
  strengthTopics,
  gapTopics,
  emailSent,
  parentFirstName,
  parentLastName,
  parentEmail,
  parentPhone,
  onRestart,
}) {
  const ready = outcome === 'ready';
  useEffect(() => {
    confetti({
      particleCount: 120,
      spread: 70,
      origin: { y: 0.6 },
      colors: ['#D4AF37', '#731F32', '#F5EDDC'],
      disableForReducedMotion: true,
    });
  }, []);

  return (
    <main className="mx-auto max-w-2xl px-5 py-10 sm:py-14">
      <div className="mb-8 flex items-center gap-2.5">
        <div
          className="flex h-9 w-9 items-center justify-center rounded-lg text-[10px] font-extrabold"
          style={{ background: 'linear-gradient(135deg, #4A1429, #8B2252)', color: '#D4AF37' }}
        >
          CV
        </div>
        <div>
          <div
            className="text-xs font-extrabold tracking-wide"
            style={{ color: '#2D0A18', fontFamily: "'Fraunces', Georgia, serif" }}
          >
            Cambridge Veritas
          </div>
          <div className="text-[9px] font-bold uppercase tracking-[0.18em]" style={{ color: '#B8912E' }}>
            Algebra I · Placement Diagnostic
          </div>
        </div>
      </div>

      <h1
        className="mb-3 text-3xl font-extrabold leading-tight sm:text-4xl"
        style={{ color: '#2D0A18', fontFamily: "'Fraunces', Georgia, serif" }}
      >
        Nice work, {studentName}!
      </h1>
      <p className="mb-7 text-sm font-medium leading-relaxed" style={{ color: '#4A3A30' }}>
        Thank you both for completing the placement check. Here&apos;s what we saw — and exactly what we&apos;d recommend.
      </p>

      <section
        className="mb-6 rounded-3xl p-6 shadow-xl sm:p-8"
        style={ready
          ? { background: 'linear-gradient(135deg, #4A1429, #8B2252)', border: '1.5px solid rgba(212,175,56,0.5)' }
          : { background: '#FBF7EE', border: '1.5px dashed rgba(212,175,56,0.6)' }}
      >
        <span
          className="mb-4 inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-[10px] font-bold uppercase tracking-widest"
          style={{ background: '#D4AF37', color: '#2D0A18' }}
        >
          <Check className="h-3.5 w-3.5" /> {ready ? 'Ready for the October batch' : 'Ready — with a little prep first'}
        </span>
        <h2
          className="mb-3 text-xl font-extrabold sm:text-2xl"
          style={{ color: ready ? '#FFFFFF' : '#2D0A18', fontFamily: "'Fraunces', Georgia, serif" }}
        >
          {ready
            ? `${studentName} has the foundations to start strong on October 13.`
            : 'Not to worry — every strong start begins somewhere.'}
        </h2>
        <p className="text-sm font-medium leading-relaxed" style={{ color: ready ? 'rgba(255,255,255,0.8)' : '#4A3A30' }}>
          {ready
            ? `We'd love to welcome ${studentName} into the 6:00pm batch — six students max, Tuesday and Thursday. Reserve their seat below, and Aisha will reach out personally to welcome you both.`
            : `We'll give ${studentName} a free Foundation Prep Weekend before the batch begins — two tutor-led classes to shore up the foundations. It's on us: no charge, no strings. Join below and we'll set it up.`}
        </p>
      </section>

      <section className="mb-6 rounded-3xl p-6 sm:p-8" style={{ background: '#FFFFFF', border: '1.5px solid rgba(212,175,56,0.5)' }}>
        <p className="mb-5 text-[10px] font-bold uppercase tracking-[0.22em]" style={{ color: '#B8912E' }}>
          What we saw
        </p>
        <div className="grid gap-6 sm:grid-cols-2">
          <div>
            <h3 className="mb-3 text-sm font-extrabold" style={{ color: '#2D0A18' }}>Strong on</h3>
            {strengthTopics && <p className="mb-3 text-xs font-medium leading-relaxed" style={{ color: '#4A3A30' }}>{strengthTopics}</p>}
            {strengths.length ? (
              <ul className="space-y-2">
                {strengths.map((item) => (
                  <li key={item} className="flex items-center gap-2.5 text-xs font-bold" style={{ color: '#4A3A30' }}>
                    <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full" style={{ background: 'rgba(115,31,50,0.1)' }}>
                      <Check className="h-3 w-3" style={{ color: '#731F32' }} />
                    </span>
                    {item}
                  </li>
                ))}
              </ul>
            ) : (
              <p className="text-xs font-medium" style={{ color: '#9A8A70' }}>
                Still building confidence across topics — that&apos;s exactly what the prep class is for.
              </p>
            )}
          </div>

          <div>
            <h3 className="mb-3 text-sm font-extrabold" style={{ color: '#2D0A18' }}>Could use a little practice</h3>
            {gapTopics && <p className="mb-3 text-xs font-medium leading-relaxed" style={{ color: '#4A3A30' }}>{gapTopics}</p>}
            {gaps.length ? (
              <ul className="space-y-2">
                {gaps.map((item) => (
                  <li key={item} className="flex items-center gap-2.5 text-xs font-bold" style={{ color: '#4A3A30' }}>
                    <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full" style={{ background: 'rgba(212,175,56,0.2)' }}>
                      <Sparkles className="h-3 w-3" style={{ color: '#B8912E' }} />
                    </span>
                    {item}
                  </li>
                ))}
              </ul>
            ) : (
              <p className="text-xs font-medium" style={{ color: '#9A8A70' }}>Nothing stood out — great signs for October.</p>
            )}
          </div>
        </div>
      </section>

      <section className="mb-6 rounded-3xl p-6 text-center sm:p-8" style={{ background: '#FFFFFF', border: '1.5px solid rgba(212,175,56,0.5)' }}>
        <p className="mb-1.5 text-sm font-extrabold" style={{ color: '#2D0A18' }}>
          {ready ? 'Reserve their seat in the October batch.' : 'Join the October batch — the prep weekend comes with it, free.'}
        </p>
        <p className="mb-6 text-xs font-semibold" style={{ color: '#9A8A70' }}>
          The 6:00pm batch · Tue & Thu · starts October 13 · six students max
        </p>
        <AlgebraJoinButton
          className="inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3.5 text-sm font-bold transition-opacity hover:opacity-90"
          style={{ background: '#D4AF37', color: '#2D0A18' }}
          prefill={{
            firstName: parentFirstName,
            lastName: parentLastName,
            email: parentEmail,
            phone: parentPhone,
          }}
        >
          Join now — $179/month <ArrowRight className="h-4 w-4" />
        </AlgebraJoinButton>
        <p className="mt-4 text-[11px] font-semibold" style={{ color: '#9A8A70' }}>
          Aisha will reach out on WhatsApp after you join to welcome {studentName} personally.
        </p>
      </section>

      <p className="mb-2 text-center text-xs font-semibold" style={{ color: '#9A8A70' }}>
        {emailSent
          ? `A copy of these results is on its way to ${parentEmail}.`
          : 'Your results are saved — Aisha will share them with you directly.'}
      </p>
      <p className="text-center">
        <button type="button" onClick={onRestart} className="text-xs font-bold underline" style={{ color: '#731F32' }}>
          Another child? Take the placement check again
        </button>
      </p>
    </main>
  );
}