'use client';

import { useTheme } from '@/contexts/ThemeContext';
import { Button } from '@/components/ui/Button';
import {
  Theme,
  THEME_CONFIG,
  THEME_NAMES,
  getThemeIcon,
  getThemeDescription,
} from '@/lib/ui-config';

// Génération des thèmes à partir de la configuration centralisée
const themes: { id: Theme; name: string; description: string; icon: string }[] =
  THEME_CONFIG.allThemes.map((themeId) => {
    return {
      id: themeId,
      name: THEME_NAMES[themeId],
      description: getThemeDescription(themeId),
      icon: getThemeIcon(themeId),
    };
  });

// Composant pour l'aperçu du thème
function ThemePreview({
  themeId,
  isSelected,
}: {
  themeId: Theme;
  isSelected: boolean;
}) {
  return (
    <div
      className={`w-16 h-12 rounded-lg border-2 overflow-hidden ${themeId}`}
      style={{
        borderColor: isSelected ? 'var(--primary)' : 'var(--border)',
        backgroundColor: 'var(--background)',
      }}
    >
      {/* Barre de titre */}
      <div className="h-3 w-full" style={{ backgroundColor: 'var(--card)' }} />

      {/* Contenu avec couleurs du thème */}
      <div className="p-1 h-9 flex flex-col gap-0.5">
        {/* Ligne de texte */}
        <div
          className="h-1 rounded-sm"
          style={{ backgroundColor: 'var(--foreground)' }}
        />

        {/* Couleurs d'accent */}
        <div className="flex gap-0.5">
          <div
            className="h-1 flex-1 rounded-sm"
            style={{ backgroundColor: 'var(--primary)' }}
          />
          <div
            className="h-1 flex-1 rounded-sm"
            style={{ backgroundColor: 'var(--accent)' }}
          />
          <div
            className="h-1 flex-1 rounded-sm"
            style={{ backgroundColor: 'var(--success)' }}
          />
        </div>
      </div>
    </div>
  );
}

export function ThemeSelector() {
  const { theme, setTheme } = useTheme();

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-mono font-semibold text-[var(--foreground)]">
            Thème de l&apos;interface
          </h3>
          <p className="text-sm text-[var(--muted-foreground)] mt-1">
            Choisissez l&apos;apparence de TowerControl
          </p>
        </div>
        <div className="text-sm text-[var(--muted-foreground)]">
          Actuel:{' '}
          <span className="font-medium text-[var(--primary)] capitalize">
            {theme}
          </span>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {themes.map((themeOption) => (
          <Button
            key={themeOption.id}
            onClick={() => setTheme(themeOption.id)}
            variant={theme === themeOption.id ? 'selected' : 'secondary'}
            className="p-4 h-auto text-left justify-start"
          >
            <div className="flex items-start gap-3">
              {/* Aperçu du thème */}
              <div className="flex-shrink-0">
                <ThemePreview
                  themeId={themeOption.id}
                  isSelected={theme === themeOption.id}
                />
              </div>

              <div className="flex-1 min-w-0">
                <div className="font-medium text-[var(--foreground)] mb-1 flex items-center gap-2">
                  {themeOption.name}
                </div>
                <div className="text-xs text-[var(--muted-foreground)] leading-relaxed">
                  {themeOption.description}
                </div>
                {theme === themeOption.id && (
                  <div className="mt-2 text-xs text-[var(--primary)] font-medium">
                    ✓ Sélectionné
                  </div>
                )}
              </div>
            </div>
          </Button>
        ))}
      </div>
    </div>
  );
}
