import { AnimatePresence, motion } from 'framer-motion';
import { HelpCircle, RotateCcw, ShieldCheck } from 'lucide-react';
import { useState } from 'react';
import { ELIGIBILITY_QUIZ_QUESTIONS } from '../../data/content';
import { LinkButton } from '../ui/Button';

export function NdisEligibilityQuiz() {
  const [currentStep, setCurrentStep] = useState(0);
  const [answers, setAnswers] = useState<Record<string, number>>({});
  const [completed, setCompleted] = useState(false);

  const question = ELIGIBILITY_QUIZ_QUESTIONS[currentStep];

  function handleSelect(questionId: string, optionIndex: number) {
    const nextAnswers = { ...answers, [questionId]: optionIndex };
    setAnswers(nextAnswers);

    if (currentStep < ELIGIBILITY_QUIZ_QUESTIONS.length - 1) {
      setCurrentStep((prev) => prev + 1);
    } else {
      setCompleted(true);
    }
  }

  function handleReset() {
    setAnswers({});
    setCurrentStep(0);
    setCompleted(false);
  }

  const isEligibleScore = Object.entries(answers).every(([qId, optIdx]) => {
    const q = ELIGIBILITY_QUIZ_QUESTIONS.find((q) => q.id === qId);
    return q?.options[optIdx]?.eligible ?? false;
  });

  return (
    <div id="eligibility" className="scroll-mt-28 rounded-3xl border border-theme bg-[var(--color-surface)] p-6 md:p-8 shadow-xl">
      <div className="flex items-center gap-3 border-b border-theme pb-4">
        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)] text-primary">
          <HelpCircle className="h-5 w-5" />
        </div>
        <div>
          <h2 className="font-[family-name:var(--font-display)] text-2xl font-bold text-[var(--color-text)]">
            NDIS Eligibility & Readiness Checker
          </h2>
          <p className="text-xs text-muted">Answer 4 quick questions to evaluate your NDIS readiness.</p>
        </div>
      </div>

      {!completed ? (
        <div className="mt-6">
          {/* Progress Bar */}
          <div className="mb-6 flex items-center justify-between text-xs font-semibold text-muted">
            <span>Question {currentStep + 1} of {ELIGIBILITY_QUIZ_QUESTIONS.length}</span>
            <span>{Math.round(((currentStep + 1) / ELIGIBILITY_QUIZ_QUESTIONS.length) * 100)}%</span>
          </div>
          <div className="h-2 w-full overflow-hidden rounded-full bg-[var(--color-bg)] mb-6">
            <motion.div
              className="h-full bg-primary"
              initial={{ width: 0 }}
              animate={{ width: `${((currentStep + 1) / ELIGIBILITY_QUIZ_QUESTIONS.length) * 100}%` }}
            />
          </div>

          <AnimatePresence mode="wait">
            <motion.div
              key={question.id}
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -20 }}
              className="space-y-4"
            >
              <h3 className="text-lg font-bold text-[var(--color-text)]">{question.question}</h3>
              <div className="grid gap-3 sm:grid-cols-2">
                {question.options.map((opt, idx) => (
                  <button
                    key={opt.label}
                    type="button"
                    onClick={() => handleSelect(question.id, idx)}
                    className="flex flex-col items-start rounded-2xl border border-theme p-4 text-left transition-all hover:-translate-y-0.5 hover:border-primary hover:bg-[color-mix(in_srgb,var(--color-primary)_8%,transparent)]"
                  >
                    <span className="font-semibold text-sm text-[var(--color-text)]">{opt.label}</span>
                    {opt.note && <span className="mt-1 text-xs text-primary font-medium">{opt.note}</span>}
                  </button>
                ))}
              </div>
            </motion.div>
          </AnimatePresence>
        </div>
      ) : (
        <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} className="mt-6 text-center py-4 space-y-4">
          {isEligibleScore ? (
            <div className="rounded-2xl bg-[color-mix(in_srgb,var(--color-primary)_10%,transparent)] p-6 text-center">
              <ShieldCheck className="mx-auto h-12 w-12 text-primary" />
              <h3 className="mt-2 text-xl font-bold text-[var(--color-text)]">Great News! You Meet NDIS Criteria</h3>
              <p className="mt-2 max-w-lg mx-auto text-sm text-muted">
                Based on your answers, you or your loved one meet key NDIS access requirements in Victoria. Embrace HomeCare can guide you through your initial NDIS Access Request or optimize your current plan.
              </p>
              <div className="mt-6 flex flex-wrap justify-center gap-4">
                <LinkButton to="/contact#book">Book Free NDIS Consultation</LinkButton>
                <button
                  type="button"
                  onClick={handleReset}
                  className="inline-flex items-center gap-1.5 rounded-full border border-theme px-4 py-2 text-xs font-semibold text-[var(--color-text)] hover:bg-[var(--color-bg)]"
                >
                  <RotateCcw className="h-3.5 w-3.5" /> Retake Quiz
                </button>
              </div>
            </div>
          ) : (
            <div className="rounded-2xl bg-amber-500/10 p-6 text-center border border-amber-500/30">
              <HelpCircle className="mx-auto h-12 w-12 text-amber-600" />
              <h3 className="mt-2 text-xl font-bold text-[var(--color-text)]">Alternative Support Options Available</h3>
              <p className="mt-2 max-w-lg mx-auto text-sm text-muted">
                While you may not meet standard NDIS criteria, Embrace HomeCare provides fee-for-service, Aged Care home packages, and community support options. Contact our team to explore options.
              </p>
              <div className="mt-6 flex flex-wrap justify-center gap-4">
                <LinkButton to="/contact">Speak With Our Specialist</LinkButton>
                <button
                  type="button"
                  onClick={handleReset}
                  className="inline-flex items-center gap-1.5 rounded-full border border-theme px-4 py-2 text-xs font-semibold text-[var(--color-text)] hover:bg-[var(--color-bg)]"
                >
                  <RotateCcw className="h-3.5 w-3.5" /> Retake Quiz
                </button>
              </div>
            </div>
          )}
        </motion.div>
      )}
    </div>
  );
}