'use client';

import React, { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { ArrowLeft } from 'lucide-react';
import { AURA_SCAN_QUESTIONS, chakraOfQuestion } from '@/lib/aura/questions';
import { chakraMeta } from '@/lib/aura/chakraMeta';
import { localizeQuestion } from '@/lib/aura/questionsI18n';
import { useLocale, useMessages } from '@/i18n/client';
import { cn } from '@/lib/cn';

interface AuraQuestionnaireProps {
  initialAnswers?: Record<string, number>;
  onComplete: (answers: Record<string, number>) => void;
}

/** The 35-question check-in (5 per chakra) whose answers colour the aura photo. */
export const AuraQuestionnaire: React.FC<AuraQuestionnaireProps> = ({ initialAnswers, onComplete }) => {
  const locale = useLocale();
  const t = useMessages().camera.questionnaire;
  const [answers, setAnswers] = useState<Record<string, number>>(initialAnswers ?? {});
  const [index, setIndex] = useState(0);
  // Guards the short pause between tapping an answer and moving on.
  const [locked, setLocked] = useState(false);

  const total = AURA_SCAN_QUESTIONS.length;
  const q = AURA_SCAN_QUESTIONS[index];
  const chakra = chakraOfQuestion(q);
  const meta = chakraMeta(locale)[chakra];
  const text = localizeQuestion(q, locale);

  const choose = (answerIdx: number) => {
    if (locked) return;
    const next = { ...answers, [q.id]: answerIdx };
    setAnswers(next);
    setLocked(true);
    window.setTimeout(() => {
      setLocked(false);
      if (index < total - 1) setIndex(index + 1);
      else onComplete(next);
    }, 220);
  };

  return (
    <div className="p-6 sm:p-8">
      {/* Progress */}
      <div className="flex items-center justify-between text-xs text-[#86868B]">
        <button
          type="button"
          onClick={() => setIndex((i) => Math.max(0, i - 1))}
          disabled={index === 0}
          className="inline-flex items-center gap-1.5 transition-colors hover:text-white disabled:invisible"
        >
          <ArrowLeft className="size-3.5" />
          {t.previous}
        </button>
        <span className="font-mono tabular-nums">
          {index + 1} / {total}
        </span>
      </div>
      <div className="mt-3 h-1 overflow-hidden rounded-full bg-white/10">
        <motion.div
          className="h-full rounded-full"
          style={{ backgroundColor: meta.color, boxShadow: `0 0 10px ${meta.color}` }}
          animate={{ width: `${((index + 1) / total) * 100}%` }}
          transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
        />
      </div>

      <AnimatePresence mode="wait" initial={false}>
        <motion.div
          key={q.id}
          initial={{ opacity: 0, x: 24 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -24 }}
          transition={{ duration: 0.25 }}
          className="mt-8"
        >
          <span
            className="inline-flex items-center gap-2 rounded-full px-3 py-1 text-[11px] font-semibold"
            style={{ backgroundColor: `${meta.color}22`, color: meta.color }}
          >
            <span className="size-1.5 rounded-full" style={{ backgroundColor: meta.color }} />
            {text.topic}
          </span>
          <h3 className="mt-4 text-lg leading-snug font-medium text-white sm:text-xl">{text.question}</h3>

          <ul className="mt-6 space-y-2.5">
            {text.answers.map((answer, i) => {
              const selected = answers[q.id] === i;
              return (
                <li key={i}>
                  <button
                    type="button"
                    onClick={() => choose(i)}
                    className={cn(
                      'w-full rounded-2xl px-4 py-3.5 text-left text-sm leading-snug ring-1 transition-colors',
                      selected
                        ? 'bg-white text-black ring-white'
                        : 'bg-white/[0.04] text-slate-200 ring-white/10 hover:bg-white/[0.09]',
                    )}
                  >
                    {answer}
                  </button>
                </li>
              );
            })}
          </ul>
        </motion.div>
      </AnimatePresence>

      <p className="mt-6 text-center text-[11px] text-[#86868B]">
        {t.hint}
      </p>
    </div>
  );
};