'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import { Loader2 } from 'lucide-react';
import { AGE_BANDS } from '@/lib/types';
import Mascot from '../Mascot';

export default function Onboarding() {
  const router = useRouter();
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState('');

  async function choose(band: string) {
    setBusy(band);
    setError('');
    try {
      const res = await fetch('/api/onboarding', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ageBand: band }),
      });
      const data = await res.json();
      if (res.ok && data.ok) {
        router.replace('/app');
        return;
      }
      setError(data.error ?? 'কিছু একটা সমস্যা হয়েছে।');
    } catch {
      setError('নেটওয়ার্ক সমস্যা, আবার চেষ্টা করো।');
    } finally {
      setBusy(null);
    }
  }

  return (
    <div className="mx-auto flex min-h-dvh max-w-xl flex-col justify-center px-4 py-10 sm:px-6">
      <div className="flex flex-col items-center text-center">
        <Mascot mood="wave" size={96} />
        <h1 className="mt-3 font-heading text-2xl font-extrabold text-ink sm:text-3xl">
          তোমার বয়স কত?
        </h1>
        <p className="mt-1 text-ink-soft">তাহলে ঠিক তোমার জন্য লেসন সাজাতে পারব ✨</p>
      </div>

      {error && (
        <p className="mt-5 rounded-2xl bg-mango-50 px-4 py-3 text-center text-sm font-medium text-mango-700">
          {error}
        </p>
      )}

      <div className="mt-7 grid grid-cols-2 gap-3">
        {AGE_BANDS.map((b, i) => (
          <motion.button
            key={b.id}
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: i * 0.06 }}
            whileTap={{ scale: 0.97 }}
            disabled={busy !== null}
            onClick={() => choose(b.id)}
            className="flex flex-col items-center gap-1 rounded-3xl bg-white p-5 text-center shadow-card transition disabled:opacity-60"
          >
            <span className="text-4xl" aria-hidden>
              {busy === b.id ? '' : b.emoji}
            </span>
            {busy === b.id && <Loader2 className="h-8 w-8 animate-spin text-mango-500" />}
            <span className="mt-1 font-heading text-xl font-bold text-ink">{b.label}</span>
            <span className="text-xs text-ink-soft">{b.blurb}</span>
          </motion.button>
        ))}
      </div>
    </div>
  );
}