import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

const PRESETS = [
  { label: '15m', minutes: 15 },
  { label: '30m', minutes: 30 },
  { label: '60m', minutes: 60 },
];

export default function BonusTimeDrawer({ category, onSubmit, onClose }) {
  const [custom, setCustom] = useState('');

  const handleCustomSubmit = () => {
    const mins = parseInt(custom, 10);
    if (mins > 0) onSubmit(mins);
  };

  return (
    <AnimatePresence>
      {/* Overlay */}
      <motion.div
        className="fixed inset-0 z-[200] flex items-end justify-center"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        onClick={onClose}
      >
        {/* Backdrop */}
        <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />

        {/* Drawer */}
        <motion.div
          className="relative glass-card-dark rounded-b-none w-full max-w-[600px] p-6 pb-10"
          style={{
            borderTop: '1px solid rgba(245, 245, 220, 0.15)',
            borderBottom: 'none',
            borderRadius: '20px 20px 0 0',
          }}
          initial={{ y: '100%' }}
          animate={{ y: 0 }}
          exit={{ y: '100%' }}
          transition={{ type: 'spring', damping: 28, stiffness: 320 }}
          onClick={(e) => e.stopPropagation()}
        >
          {/* Handle */}
          <div className="w-10 h-1 bg-cream/20 rounded-full mx-auto mb-5" />

          {/* Title */}
          <h3 className="font-serif text-lg text-cream text-center mb-6 tracking-wide">
            Bonus Time: {category}
          </h3>

          {/* Preset buttons */}
          <div className="grid grid-cols-3 gap-3 mb-5">
            {PRESETS.map((p) => (
              <button
                key={p.minutes}
                className="btn-manor btn-manor-green py-4 text-base font-bold"
                onClick={() => onSubmit(p.minutes)}
              >
                {p.label}
              </button>
            ))}
          </div>

          {/* Divider */}
          <div className="flex items-center gap-3 mb-5">
            <div className="flex-1 h-px bg-cream/10" />
            <span className="text-cream-dark text-[0.6rem] uppercase tracking-[2px]">or custom</span>
            <div className="flex-1 h-px bg-cream/10" />
          </div>

          {/* Custom input */}
          <div className="flex gap-3 mb-5">
            <input
              type="number"
              placeholder="Minutes (1-480)"
              min="1"
              max="480"
              value={custom}
              onChange={(e) => setCustom(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleCustomSubmit()}
              className="manor-input flex-1"
            />
            <button
              className="btn-manor btn-manor-green px-6"
              onClick={handleCustomSubmit}
              disabled={!custom}
            >
              Set
            </button>
          </div>

          {/* Cancel */}
          <button className="btn-manor btn-manor-ghost w-full py-3" onClick={onClose}>
            Cancel
          </button>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
}
