'use client';

import { useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Check, ShieldCheck, Zap } from 'lucide-react';
import type { FeatureDetail } from './features';

export default function FeatureModal({
  feature,
  onClose,
  onStart,
}: {
  feature: FeatureDetail | null;
  onClose: () => void;
  onStart: () => void;
}) {
  useEffect(() => {
    if (!feature) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [feature, onClose]);

  return (
    <AnimatePresence>
      {feature && (
        <motion.div
          className="fixed inset-0 z-[70] flex items-end justify-center sm:items-center"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <div className="absolute inset-0 bg-ink/40 backdrop-blur-sm" onClick={onClose} aria-hidden />

          <motion.div
            role="dialog"
            aria-modal="true"
            aria-label={feature.title}
            className="relative w-full max-w-md rounded-t-4xl bg-cream-50 p-6 shadow-soft sm:rounded-4xl sm:p-7"
            initial={{ y: 40, opacity: 0, scale: 0.98 }}
            animate={{ y: 0, opacity: 1, scale: 1 }}
            exit={{ y: 40, opacity: 0 }}
            transition={{ type: 'spring', stiffness: 320, damping: 30 }}
          >
            <button
              onClick={onClose}
              className="absolute right-4 top-4 rounded-full p-2 text-ink-soft transition hover:bg-cream-200"
              aria-label="বন্ধ করো"
            >
              <X className="h-5 w-5" />
            </button>

            <div className={`flex h-16 w-16 items-center justify-center rounded-3xl ${feature.bg} ${feature.fg}`}>
              <feature.icon className="h-8 w-8" />
            </div>
            <h2 className="mt-4 font-heading text-2xl font-extrabold text-ink">{feature.title}</h2>
            <p className="text-sm font-semibold text-mango-600">{feature.tagline}</p>

            <p className="mt-3 text-[15px] leading-relaxed text-ink-soft">{feature.body}</p>

            <ul className="mt-4 space-y-2.5">
              {feature.points.map((p) => (
                <li key={p} className="flex items-start gap-2.5 text-sm text-ink">
                  <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-leaf-500 text-white">
                    <Check className="h-3.5 w-3.5" />
                  </span>
                  {p}
                </li>
              ))}
            </ul>

            {feature.note && (
              <div className="mt-4 flex items-start gap-2 rounded-2xl bg-leaf-50 px-4 py-3 text-sm text-leaf-700">
                <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0" />
                {feature.note}
              </div>
            )}

            <button
              onClick={onStart}
              className="mt-6 flex w-full items-center justify-center gap-2 rounded-2xl bg-mango-500 px-5 py-3.5 font-bold text-white shadow-pop transition active:scale-[0.98]"
            >
              <Zap className="h-5 w-5" /> ৩০ সেকেন্ডে শুরু করো
            </button>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}