import { AnimatePresence, motion } from 'framer-motion';
import { Eye, Palette, RotateCcw, X } from 'lucide-react';
import { useTheme } from '../../context/ThemeContext';

interface ThemeSettingsDrawerProps {
  isOpen: boolean;
  onClose: () => void;
}

export function ThemeSettingsDrawer({ isOpen, onClose }: ThemeSettingsDrawerProps) {
  const {
    theme,
    setTheme,
    themes,
    themeLabels,
    fontSize,
    setFontSize,
    highContrast,
    setHighContrast,
    dyslexicFont,
    setDyslexicFont,
    resetAccessibility,
  } = useTheme();

  const themeColors: Record<string, { bg: string; primary: string; accent: string }> = {
    embrace: { bg: '#ffffff', primary: '#2563eb', accent: '#f59e0b' },
    light: { bg: '#f8fafc', primary: '#0284c7', accent: '#10b981' },
    dark: { bg: '#0f172a', primary: '#38bdf8', accent: '#fbbf24' },
    ocean: { bg: '#f0fdf4', primary: '#0d9488', accent: '#f43f5e' },
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-50 overflow-hidden">
          {/* Backdrop */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="fixed inset-0 bg-black/50 backdrop-blur-xs transition-opacity"
          />

          {/* Drawer Panel */}
          <motion.div
            initial={{ x: '100%' }}
            animate={{ x: 0 }}
            exit={{ x: '100%' }}
            transition={{ type: 'spring', damping: 25, stiffness: 220 }}
            className="fixed inset-y-0 right-0 flex max-w-full pl-10"
          >
            <div className="w-screen max-w-md border-l border-theme bg-[var(--color-surface)] shadow-2xl flex flex-col justify-between">
              {/* Drawer Header */}
              <div className="flex items-center justify-between border-b border-theme p-5">
                <div className="flex items-center gap-2.5">
                  <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10 text-primary">
                    <Eye className="h-5 w-5" />
                  </div>
                  <div>
                    <h2 className="font-bold text-lg text-[var(--color-text)]">Theme & Accessibility Options</h2>
                    <p className="text-xs text-muted">Customize display colors, contrast, text scaling & accessibility</p>
                  </div>
                </div>

                <button
                  type="button"
                  onClick={onClose}
                  className="rounded-full p-2 text-muted hover:bg-surface hover:text-[var(--color-text)] transition-colors"
                  aria-label="Close Settings Drawer"
                >
                  <X className="h-5 w-5" />
                </button>
              </div>

              {/* Drawer Body Options */}
              <div className="flex-1 overflow-y-auto p-6 space-y-8">
                {/* 1. Color Themes */}
                <div className="space-y-3">
                  <span className="text-xs font-bold uppercase tracking-wider text-primary flex items-center gap-1.5">
                    <Palette className="h-4 w-4" /> Color Theme Presets
                  </span>

                  <div className="grid grid-cols-2 gap-3">
                    {themes.map((t) => {
                      const colors = themeColors[t] || themeColors.embrace;
                      const isActive = theme === t;
                      return (
                        <button
                          key={t}
                          type="button"
                          onClick={() => setTheme(t)}
                          className={`flex flex-col justify-between rounded-2xl border p-3.5 text-left transition-all cursor-pointer ${
                            isActive
                              ? 'border-primary bg-primary/5 shadow-md ring-2 ring-primary/20'
                              : 'border-theme bg-[var(--color-bg)] hover:border-primary/50'
                          }`}
                        >
                          <div className="flex items-center justify-between gap-2 mb-2">
                            <span className="text-xs font-bold text-[var(--color-text)]">
                              {themeLabels[t]}
                            </span>
                            {isActive && (
                              <span className="h-2 w-2 rounded-full bg-primary animate-pulse" />
                            )}
                          </div>

                          <div className="flex items-center gap-1.5 pt-1">
                            <span
                              className="h-4 w-4 rounded-full border border-black/10 shadow-xs"
                              style={{ backgroundColor: colors.primary }}
                            />
                            <span
                              className="h-4 w-4 rounded-full border border-black/10 shadow-xs"
                              style={{ backgroundColor: colors.accent }}
                            />
                            <span
                              className="h-4 w-4 rounded-full border border-black/10 shadow-xs"
                              style={{ backgroundColor: colors.bg }}
                            />
                          </div>
                        </button>
                      );
                    })}
                  </div>
                </div>

                {/* 2. Accessibility & View Options Section */}
                <div className="space-y-4 pt-4 border-t border-theme">
                  <span className="text-xs font-bold uppercase tracking-wider text-primary flex items-center gap-1.5">
                    <Eye className="h-4 w-4" /> Accessibility & View Options
                  </span>

                  {/* Text Size Scaling */}
                  <div className="space-y-2">
                    <label className="block text-xs font-bold text-[var(--color-text)]">
                      Text Size & Font Scaling
                    </label>
                    <div className="grid grid-cols-3 gap-2 bg-[var(--color-bg)] p-1.5 rounded-2xl border border-theme">
                      <button
                        type="button"
                        onClick={() => setFontSize('normal')}
                        className={`rounded-xl py-2 text-xs font-bold transition-all cursor-pointer ${
                          fontSize === 'normal'
                            ? 'bg-primary text-white shadow-sm'
                            : 'text-muted hover:text-[var(--color-text)]'
                        }`}
                      >
                        A (Normal)
                      </button>
                      <button
                        type="button"
                        onClick={() => setFontSize('large')}
                        className={`rounded-xl py-2 text-xs font-bold transition-all cursor-pointer ${
                          fontSize === 'large'
                            ? 'bg-primary text-white shadow-sm'
                            : 'text-muted hover:text-[var(--color-text)]'
                        }`}
                      >
                        A+ (Large)
                      </button>
                      <button
                        type="button"
                        onClick={() => setFontSize('xlarge')}
                        className={`rounded-xl py-2 text-xs font-bold transition-all cursor-pointer ${
                          fontSize === 'xlarge'
                            ? 'bg-primary text-white shadow-sm'
                            : 'text-muted hover:text-[var(--color-text)]'
                        }`}
                      >
                        A++ (X-Large)
                      </button>
                    </div>
                  </div>

                  {/* Contrast & Dyslexic Options */}
                  <div className="space-y-3 pt-2">
                    {/* High Contrast Row */}
                    <div
                      onClick={() => setHighContrast(!highContrast)}
                      className={`flex items-center justify-between rounded-2xl border p-3.5 cursor-pointer transition-all ${
                        highContrast
                          ? 'border-primary bg-primary/10 ring-2 ring-primary/20'
                          : 'border-theme bg-[var(--color-bg)] hover:border-primary/40'
                      }`}
                    >
                      <div>
                        <strong className="block text-xs font-bold text-[var(--color-text)]">
                          High Contrast Mode
                        </strong>
                        <span className="text-[11px] text-muted">Enhances text outlines & bold contrast</span>
                      </div>

                      <button
                        type="button"
                        role="switch"
                        aria-checked={highContrast}
                        onClick={(e) => {
                          e.stopPropagation();
                          setHighContrast(!highContrast);
                        }}
                        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ${
                          highContrast ? 'bg-primary' : 'bg-muted/40'
                        }`}
                      >
                        <span
                          className={`inline-block h-5 w-5 transform rounded-full bg-white transition duration-200 ${
                            highContrast ? 'translate-x-5' : 'translate-x-0'
                          }`}
                        />
                      </button>
                    </div>

                    {/* Dyslexic Font Row */}
                    <div
                      onClick={() => setDyslexicFont(!dyslexicFont)}
                      className={`flex items-center justify-between rounded-2xl border p-3.5 cursor-pointer transition-all ${
                        dyslexicFont
                          ? 'border-primary bg-primary/10 ring-2 ring-primary/20'
                          : 'border-theme bg-[var(--color-bg)] hover:border-primary/40'
                      }`}
                    >
                      <div>
                        <strong className="block text-xs font-bold text-[var(--color-text)]">
                          Dyslexic Friendly Font
                        </strong>
                        <span className="text-[11px] text-muted">Switches to OpenDyslexic typography</span>
                      </div>

                      <button
                        type="button"
                        role="switch"
                        aria-checked={dyslexicFont}
                        onClick={(e) => {
                          e.stopPropagation();
                          setDyslexicFont(!dyslexicFont);
                        }}
                        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ${
                          dyslexicFont ? 'bg-primary' : 'bg-muted/40'
                        }`}
                      >
                        <span
                          className={`inline-block h-5 w-5 transform rounded-full bg-white transition duration-200 ${
                            dyslexicFont ? 'translate-x-5' : 'translate-x-0'
                          }`}
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              {/* Drawer Footer */}
              <div className="border-t border-theme p-5 bg-[var(--color-bg-alt)] flex items-center justify-between">
                <button
                  type="button"
                  onClick={resetAccessibility}
                  className="flex items-center gap-1.5 text-xs font-semibold text-muted hover:text-primary transition-colors cursor-pointer"
                >
                  <RotateCcw className="h-3.5 w-3.5" /> Restore Defaults
                </button>
                <button
                  type="button"
                  onClick={onClose}
                  className="rounded-xl bg-primary px-4 py-2 text-xs font-bold text-white shadow-sm hover:bg-[var(--color-primary-hover)] transition-colors cursor-pointer"
                >
                  Done
                </button>
              </div>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
}