import { X, Check, Sun, Moon } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
import { useLanguage } from '../contexts/LanguageContext';
import { getThemeGroups } from '../themes';
import useDialogA11y from '../hooks/useDialogA11y';

export default function ThemeSelector({ onClose }) {
  const { theme, setTheme } = useTheme();
  const { t } = useLanguage();
  const groups = getThemeGroups();
  const dialogRef = useDialogA11y(true, onClose);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="fixed inset-0 bg-black/60 backdrop-blur-xs" onClick={onClose} aria-hidden="true" />

      <div
        ref={dialogRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="theme-selector-title"
        tabIndex={-1}
        className="relative bg-th-card rounded-2xl border border-th-border shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden focus:outline-hidden"
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-th-border">
          <div>
            <h2 id="theme-selector-title" className="text-lg font-semibold text-th-text">{t('themes.selectTheme')}</h2>
            <p className="text-sm text-th-text-s mt-0.5">{t('themes.selectThemeSubtitle')}</p>
          </div>
          <button
            onClick={onClose}
            aria-label={t('common.close')}
            className="p-2 rounded-lg hover:bg-th-hover text-th-text-s transition-colors"
          >
            <X size={20} />
          </button>
        </div>

        {/* Theme Grid */}
        <div className="p-6 overflow-y-auto max-h-[60vh] space-y-6">
          {Object.entries(groups).map(([groupName, groupThemes]) => (
            <div key={groupName}>
              <h3 className="text-sm font-semibold text-th-text-s uppercase tracking-wider mb-3">
                {groupName}
              </h3>
              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                {groupThemes.map(t => (
                  <button
                    key={t.id}
                    onClick={() => setTheme(t.id)}
                    aria-pressed={theme === t.id}
                    className={`relative group rounded-xl p-3 border-2 transition-all duration-200 text-left ${
                      theme === t.id
                        ? 'border-th-accent shadow-lg scale-[1.02]'
                        : 'border-transparent hover:border-th-border hover:shadow-md'
                    }`}
                    style={{ backgroundColor: t.colors.bg }}
                  >
                    {/* Color preview */}
                    <div className="flex items-center gap-2 mb-2">
                      <div
                        className="w-full h-8 rounded-lg flex items-center px-3 gap-2"
                        style={{ backgroundColor: t.colors.bg }}
                      >
                        <div
                          className="w-3 h-3 rounded-full"
                          style={{ backgroundColor: t.colors.accent }}
                        />
                        <div
                          className="h-1.5 rounded-full flex-1"
                          style={{ backgroundColor: t.colors.text, opacity: 0.3 }}
                        />
                      </div>
                    </div>

                    {/* Theme info */}
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-1.5">
                        {t.type === 'light' ? (
                          <Sun size={12} style={{ color: t.colors.text }} />
                        ) : (
                          <Moon size={12} style={{ color: t.colors.text }} />
                        )}
                        <span
                          className="text-xs font-medium"
                          style={{ color: t.colors.text }}
                        >
                          {t.name}
                        </span>
                      </div>
                      {theme === t.id && (
                        <div
                          className="w-5 h-5 rounded-full flex items-center justify-center"
                          style={{ backgroundColor: t.colors.accent }}
                        >
                          <Check size={12} className="text-white" />
                        </div>
                      )}
                    </div>
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
