import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useBreakReminder } from '../providers/BreakReminderProvider';
import { useADHDMode } from '../providers/ADHDModeProvider';
import { Button } from '@/components/ui/button';
import { X, Clock, Droplet, PersonStanding, Eye, Apple, Wind, Timer } from 'lucide-react';
import { useTranslation } from 'react-i18next';

const breakSuggestions = [
  { id: 'stretch', icon: PersonStanding, duration: 2 },
  { id: 'water', icon: Droplet, duration: 1 },
  { id: 'walk', icon: Timer, duration: 5 },
  { id: 'eyes', icon: Eye, duration: 1 },
  { id: 'snack', icon: Apple, duration: 3 },
  { id: 'breathe', icon: Wind, duration: 2 },
];

export function BreakReminderOverlay() {
  const { t } = useTranslation();
  const { isReminderVisible, minutesSinceBreak, logBreak, snooze, dismiss } = useBreakReminder();
  const { isEnabled, settings } = useADHDMode();

  if (!isEnabled || !isReminderVisible) return null;

  return (
    <AnimatePresence>
      <motion.div
        initial={{ x: '100%', opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        exit={{ x: '100%', opacity: 0 }}
        transition={{ type: 'spring', damping: 25, stiffness: 200 }}
        className={`
          fixed right-4 top-1/2 -translate-y-1/2 z-50
          w-80 max-w-[calc(100vw-2rem)]
          bg-gradient-to-br from-blue-50 to-purple-50
          dark:from-blue-950/90 dark:to-purple-950/90
          rounded-2xl shadow-2xl border border-border/50
          backdrop-blur-sm
          ${settings.reducedAnimations ? '' : 'animate-pulse-soft'}
        `}
      >
        {/* Dismiss button */}
        <button
          onClick={dismiss}
          className="absolute top-3 right-3 p-1 rounded-full hover:bg-white/50 dark:hover:bg-black/20 transition-colors"
        >
          <X className="h-4 w-4 text-muted-foreground" />
        </button>

        <div className="p-6">
          {/* Header */}
          <div className="flex items-center gap-3 mb-4">
            <div className="flex items-center justify-center w-12 h-12 rounded-full bg-primary/20">
              <Clock className="h-6 w-6 text-primary" />
            </div>
            <div>
              <h3 className="font-semibold text-lg">{t('adhd.breakReminder.title')}</h3>
              <p className="text-sm text-muted-foreground">
                {t('adhd.breakReminder.workingFor', { minutes: minutesSinceBreak })}
              </p>
            </div>
          </div>

          {/* Message */}
          <p className="text-sm text-foreground/80 mb-4">
            {t('adhd.breakReminder.message')}
          </p>

          {/* Break suggestions */}
          <div className="grid grid-cols-3 gap-2 mb-4">
            {breakSuggestions.map((suggestion) => {
              const Icon = suggestion.icon;
              return (
                <button
                  key={suggestion.id}
                  onClick={() => logBreak(suggestion.id, suggestion.duration)}
                  className={`
                    flex flex-col items-center gap-1 p-3 rounded-lg
                    bg-white/50 dark:bg-black/20 hover:bg-white/80 dark:hover:bg-black/40
                    transition-all duration-200
                    ${settings.largerTargets ? 'min-h-[80px]' : 'min-h-[60px]'}
                  `}
                >
                  <Icon className="h-5 w-5 text-primary" />
                  <span className="text-xs font-medium">
                    {t(`adhd.breakReminder.types.${suggestion.id}`)}
                  </span>
                  <span className="text-[10px] text-muted-foreground">
                    {suggestion.duration} min
                  </span>
                </button>
              );
            })}
          </div>

          {/* Snooze options */}
          <div className="flex gap-2">
            <Button
              variant="outline"
              size="sm"
              onClick={() => snooze(5)}
              className="flex-1 text-xs"
            >
              {t('adhd.breakReminder.snooze5')}
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => snooze(15)}
              className="flex-1 text-xs"
            >
              {t('adhd.breakReminder.snooze15')}
            </Button>
          </div>

          {/* Gentle message */}
          <p className="text-xs text-center text-muted-foreground mt-4 italic">
            {t('adhd.breakReminder.gentle')}
          </p>
        </div>
      </motion.div>
    </AnimatePresence>
  );
}
