figlet-ui/components/converter/FontSelector.tsx

'use client';

import * as React from 'react';
import Fuse from 'fuse.js';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';
import { EmptyState } from '@/components/ui/EmptyState';
import { Search, X, Heart, Clock, List, Shuffle, Plus, Check } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import { Button } from '@/components/ui/Button';
import type { FigletFont } from '@/types/figlet';
import { getFavorites, getRecentFonts, toggleFavorite, isFavorite } from '@/lib/storage/favorites';

export interface FontSelectorProps {
  fonts: FigletFont[];
  selectedFont: string;
  onSelectFont: (fontName: string) => void;
  onRandomFont?: () => void;
  isComparisonMode?: boolean;
  comparisonFonts?: string[];
  onAddToComparison?: (fontName: string) => void;
  className?: string;
}

type FilterType = 'all' | 'favorites' | 'recent';

export function FontSelector({
  fonts,
  selectedFont,
  onSelectFont,
  onRandomFont,
  isComparisonMode = false,
  comparisonFonts = [],
  onAddToComparison,
  className
}: FontSelectorProps) {
  const [searchQuery, setSearchQuery] = React.useState('');
  const [filter, setFilter] = React.useState<FilterType>('all');
  const [favorites, setFavorites] = React.useState<string[]>([]);
  const [recentFonts, setRecentFonts] = React.useState<string[]>([]);
  const searchInputRef = React.useRef<HTMLInputElement>(null);

  // Load favorites and recent fonts
  React.useEffect(() => {
    setFavorites(getFavorites());
    setRecentFonts(getRecentFonts());
  }, []);

  // Keyboard shortcuts
  React.useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // "/" to focus search
      if (e.key === '/' && !e.ctrlKey && !e.metaKey) {
        e.preventDefault();
        searchInputRef.current?.focus();
      }
      // "Esc" to clear search
      if (e.key === 'Escape' && searchQuery) {
        e.preventDefault();
        setSearchQuery('');
        searchInputRef.current?.blur();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [searchQuery]);

  // Initialize Fuse.js for fuzzy search
  const fuse = React.useMemo(() => {
    return new Fuse(fonts, {
      keys: ['name', 'fileName'],
      threshold: 0.3,
      includeScore: true,
    });
  }, [fonts]);

  const filteredFonts = React.useMemo(() => {
    let fontsToFilter = fonts;

    // Apply category filter
    if (filter === 'favorites') {
      fontsToFilter = fonts.filter(f => favorites.includes(f.name));
    } else if (filter === 'recent') {
      fontsToFilter = fonts.filter(f => recentFonts.includes(f.name));
      // Sort by recent order
      fontsToFilter.sort((a, b) => {
        return recentFonts.indexOf(a.name) - recentFonts.indexOf(b.name);
      });
    }

    // Apply search query
    if (!searchQuery) return fontsToFilter;

    const results = fuse.search(searchQuery);
    const searchResults = results.map(result => result.item);

    // Filter search results by category
    if (filter === 'favorites') {
      return searchResults.filter(f => favorites.includes(f.name));
    } else if (filter === 'recent') {
      return searchResults.filter(f => recentFonts.includes(f.name));
    }

    return searchResults;
  }, [fonts, searchQuery, fuse, filter, favorites, recentFonts]);

  const handleToggleFavorite = (fontName: string, e: React.MouseEvent) => {
    e.stopPropagation();
    toggleFavorite(fontName);
    setFavorites(getFavorites());
  };

  return (
    <Card className={className}>
      <div className="p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-sm font-medium">Select Font</h3>
          {onRandomFont && (
            <Button
              variant="outline"
              size="sm"
              onClick={onRandomFont}
              title="Random font"
            >
              <Shuffle className="h-4 w-4" />
              Random
            </Button>
          )}
        </div>

        {/* Filter Tabs */}
        <div className="flex gap-1 mb-4 p-1 bg-muted rounded-lg">
          <button
            onClick={() => setFilter('all')}
            className={cn(
              'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
              filter === 'all' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
            )}
          >
            <List className="inline-block h-3 w-3 mr-1" />
            All
          </button>
          <button
            onClick={() => setFilter('favorites')}
            className={cn(
              'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
              filter === 'favorites' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
            )}
          >
            <Heart className="inline-block h-3 w-3 mr-1" />
            Favorites
          </button>
          <button
            onClick={() => setFilter('recent')}
            className={cn(
              'flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors',
              filter === 'recent' ? 'bg-background shadow-sm' : 'hover:bg-background/50'
            )}
          >
            <Clock className="inline-block h-3 w-3 mr-1" />
            Recent
          </button>
        </div>

        {/* Search Input */}
        <div className="relative mb-4">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
          <Input
            ref={searchInputRef}
            type="text"
            placeholder="Search fonts... (Press / to focus)"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9 pr-9"
          />
          {searchQuery && (
            <button
              onClick={() => setSearchQuery('')}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
              aria-label="Clear search"
            >
              <X className="h-4 w-4" />
            </button>
          )}
        </div>

        {/* Font List */}
        <div className="max-h-[400px] overflow-y-auto space-y-1 pr-2">
          {filteredFonts.length === 0 ? (
            <EmptyState
              icon={filter === 'favorites' ? Heart : (filter === 'recent' ? Clock : Search)}
              title={
                filter === 'favorites'
                  ? 'No favorite fonts yet'
                  : filter === 'recent'
                  ? 'No recent fonts'
                  : 'No fonts found'
              }
              description={
                filter === 'favorites'
                  ? 'Click the heart icon on any font to add it to your favorites'
                  : filter === 'recent'
                  ? 'Fonts you use will appear here'
                  : searchQuery
                  ? 'Try a different search term'
                  : 'Loading fonts...'
              }
              className="py-8"
            />
          ) : (
            filteredFonts.map((font) => {
              const isInComparison = comparisonFonts.includes(font.name);
              return (
                <div
                  key={font.name}
                  className={cn(
                    'group flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors',
                    'hover:bg-accent hover:text-accent-foreground',
                    selectedFont === font.name && 'bg-accent text-accent-foreground font-medium'
                  )}
                >
                  <button
                    onClick={() => onSelectFont(font.name)}
                    className="flex-1 text-left"
                  >
                    {font.name}
                  </button>
                  {isComparisonMode && onAddToComparison && (
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        onAddToComparison(font.name);
                      }}
                      className={cn(
                        'opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded',
                        isInComparison && 'opacity-100 bg-primary/10'
                      )}
                      aria-label={isInComparison ? 'In comparison' : 'Add to comparison'}
                      disabled={isInComparison}
                    >
                      {isInComparison ? (
                        <Check className="h-4 w-4 text-primary" />
                      ) : (
                        <Plus className="h-4 w-4 text-muted-foreground hover:text-primary" />
                      )}
                    </button>
                  )}
                  <button
                    onClick={(e) => handleToggleFavorite(font.name, e)}
                    className={cn(
                      'opacity-0 group-hover:opacity-100 transition-opacity',
                      isFavorite(font.name) && 'opacity-100'
                    )}
                    aria-label={isFavorite(font.name) ? 'Remove from favorites' : 'Add to favorites'}
                  >
                    <Heart
                      className={cn(
                        'h-4 w-4 transition-colors',
                        isFavorite(font.name) ? 'fill-red-500 text-red-500' : 'text-muted-foreground hover:text-red-500'
                      )}
                    />
                  </button>
                </div>
              );
            })
          )}
        </div>

        {/* Stats */}
        <div className="mt-4 pt-4 border-t text-xs text-muted-foreground">
          {filteredFonts.length} font{filteredFonts.length !== 1 ? 's' : ''}
          {filter === 'favorites' && ` • ${favorites.length} total favorites`}
          {filter === 'recent' && ` • ${recentFonts.length} recent`}
        </div>
      </div>
    </Card>
  );
}