/**
 * Quest Filter Bar Component - LOTR themed quest filtering
 * Provides compact, thematic filtering for quests by status, type, and location
 * Uses collapsible categories to minimize space usage
 */

import React, { useState } from 'react';
import { Location, Quest } from '../types';

interface QuestFilterBarProps {
  quests: Quest[];
  locations: Location[];
  onStatusChange: (status: string | null) => void;
  onTypeChange: (type: string | null) => void;
  onLocationChange: (locationId: number | null) => void;
  selectedStatus: string | null;
  selectedType: string | null;
  selectedLocation: number | null;
}

type FilterCategory = 'status' | 'type' | 'location';

export const QuestFilterBar: React.FC<QuestFilterBarProps> = ({
  quests,
  locations,
  onStatusChange,
  onTypeChange,
  onLocationChange,
  selectedStatus,
  selectedType,
  selectedLocation,
}) => {
  const [expandedCategories, setExpandedCategories] = useState<Set<FilterCategory>>(
    new Set<FilterCategory>(['status'])
  );

  const toggleCategory = (category: FilterCategory) => {
    const newExpanded = new Set(expandedCategories);
    if (newExpanded.has(category)) {
      newExpanded.delete(category);
    } else {
      newExpanded.add(category);
    }
    setExpandedCategories(newExpanded);
  };

  const getStatusColor = (status: string | null) => {
    switch (status) {
      case 'the_road_goes_ever_on':
        return 'bg-in-progress/20 text-in-progress border-in-progress/40 hover:bg-in-progress/30';
      case 'it_is_done':
        return 'bg-ready/20 text-ready border-ready/40 hover:bg-ready/30';
      case 'the_shadow_falls':
        return 'bg-blocked/20 text-blocked border-blocked/40 hover:bg-blocked/30';
      default:
        return 'bg-parchment-light text-text-primary border-gold/30 hover:bg-gold/20';
    }
  };

  const getStatusLabel = (status: string) => {
    switch (status) {
      case 'the_road_goes_ever_on':
        return 'In Progress';
      case 'it_is_done':
        return 'Completed';
      case 'the_shadow_falls':
        return 'Blocked';
      default:
        return 'All Quests';
    }
  };

  const statuses = [
    { key: null, label: getStatusLabel('') },
    { key: 'the_road_goes_ever_on', label: getStatusLabel('the_road_goes_ever_on') },
    { key: 'it_is_done', label: getStatusLabel('it_is_done') },
    { key: 'the_shadow_falls', label: getStatusLabel('the_shadow_falls') },
  ];

  const questTypes = [
    'The Journey',
    'The Battle',
    'The Fellowship',
    'The Ring',
  ];

  return (
    <div className="bg-gradient-to-br from-parchment-light to-parchment border-l-4 border-gold rounded-lg p-4 mb-6 shadow-md">
      {/* Status Filter Category */}
      <div className="mb-4">
        <button
          onClick={() => toggleCategory('status')}
          className="flex items-center justify-between w-full mb-2 font-epic text-sm text-forest-dark hover:text-forest transition-colors"
          aria-expanded={expandedCategories.has('status')}
        >
          <span>Quest Status</span>
          <span className={`transition-transform ${expandedCategories.has('status') ? 'rotate-180' : ''}`}>
            ▼
          </span>
        </button>

        {expandedCategories.has('status') && (
          <div className="flex flex-wrap gap-2">
            {statuses.map(({ key, label }) => (
              <button
                key={key || 'all'}
                onClick={() => onStatusChange(key)}
                className={`px-3 py-2 rounded-md text-sm font-readable border transition-all ${
                  selectedStatus === key
                    ? `bg-forest text-parchment-light border-forest-dark shadow-md`
                    : getStatusColor(key)
                }`}
                aria-pressed={selectedStatus === key}
                data-testid={`status-filter-${key || 'all'}`}
              >
                {label} ({quests.filter(q => (key ? q.status === key : true)).length})
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Type Filter Category */}
      <div className="mb-4">
        <button
          onClick={() => toggleCategory('type')}
          className="flex items-center justify-between w-full mb-2 font-epic text-sm text-forest-dark hover:text-forest transition-colors"
          aria-expanded={expandedCategories.has('type')}
        >
          <span>Quest Type</span>
          <span className={`transition-transform ${expandedCategories.has('type') ? 'rotate-180' : ''}`}>
            ▼
          </span>
        </button>

        {expandedCategories.has('type') && (
          <div className="flex flex-wrap gap-2">
            <button
              onClick={() => onTypeChange(null)}
              className={`px-3 py-2 rounded-md text-sm font-readable border transition-all ${
                selectedType === null
                  ? `bg-forest text-parchment-light border-forest-dark shadow-md`
                  : 'bg-parchment-light text-text-primary border-gold/30 hover:bg-gold/20'
              }`}
              aria-pressed={selectedType === null}
              data-testid="type-filter-all"
            >
              All Types ({quests.length})
            </button>
            {questTypes.map((type) => (
              <button
                key={type}
                onClick={() => onTypeChange(type)}
                className={`px-3 py-2 rounded-md text-sm font-readable border transition-all ${
                  selectedType === type
                    ? `bg-forest text-parchment-light border-forest-dark shadow-md`
                    : 'bg-parchment-light text-text-primary border-gold/30 hover:bg-gold/20'
                }`}
                aria-pressed={selectedType === type}
                data-testid={`type-filter-${type.replace(/\s+/g, '_')}`}
              >
                {type} ({quests.filter(q => q.quest_type === type).length})
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Location Filter Category */}
      {locations.length > 0 && (
        <div>
          <button
            onClick={() => toggleCategory('location')}
            className="flex items-center justify-between w-full mb-2 font-epic text-sm text-forest-dark hover:text-forest transition-colors"
            aria-expanded={expandedCategories.has('location')}
          >
            <span>Location</span>
            <span className={`transition-transform ${expandedCategories.has('location') ? 'rotate-180' : ''}`}>
              ▼
            </span>
          </button>

          {expandedCategories.has('location') && (
            <div className="flex flex-wrap gap-2">
              <button
                onClick={() => onLocationChange(null)}
                className={`px-3 py-2 rounded-md text-sm font-readable border transition-all ${
                  selectedLocation === null
                    ? `bg-forest text-parchment-light border-forest-dark shadow-md`
                    : 'bg-parchment-light text-text-primary border-gold/30 hover:bg-gold/20'
                }`}
                aria-pressed={selectedLocation === null}
                data-testid="location-filter-all"
              >
                All Locations
              </button>
              {locations.map((location) => (
                <button
                  key={location.id}
                  onClick={() => onLocationChange(location.id)}
                  className={`px-3 py-2 rounded-md text-sm font-readable border transition-all ${
                    selectedLocation === location.id
                      ? `bg-forest text-parchment-light border-forest-dark shadow-md`
                      : 'bg-parchment-light text-text-primary border-gold/30 hover:bg-gold/20'
                  }`}
                  aria-pressed={selectedLocation === location.id}
                  data-testid={`location-filter-${location.name.replace(/\s+/g, '_')}`}
                >
                  {location.name} ({quests.filter(q => q.location_id === location.id).length})
                </button>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default QuestFilterBar;
