'use client';

import { X, Filter } from 'lucide-react';
import { useReviewIQFilters } from '@/contexts/ReviewIQFilterContext';
import { DOMAIN_LABELS, INTENSITY_LABELS, TimeRange } from './types';

/**
 * Filter bar showing active filters with clear button.
 */
export function FilterBar() {
  const {
    filters,
    toggleSentiment,
    setURTDomain,
    toggleIntensity,
    setTimeRange,
    setBrushRange,
    clearFilters,
    hasActiveFilters,
  } = useReviewIQFilters();

  if (!hasActiveFilters) {
    return null;
  }

  const timeRangeLabels: Record<TimeRange, string> = {
    '7d': 'Last 7 days',
    '14d': 'Last 14 days',
    '30d': 'Last 30 days',
    '90d': 'Last 90 days',
    '1y': 'Last year',
    'all': 'All time',
  };

  return (
    <div className="bg-blue-50 border-2 border-blue-200 rounded-xl p-4 flex items-center justify-between flex-wrap gap-3">
      <div className="flex items-center gap-2 flex-wrap">
        <Filter className="w-5 h-5 text-blue-700" />
        <span className="font-semibold text-blue-900">Active Filters:</span>

        {/* Time Range (only show if not default) */}
        {filters.timeRange !== '30d' && (
          <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium flex items-center gap-2 border border-blue-300">
            {timeRangeLabels[filters.timeRange]}
            <button
              onClick={() => setTimeRange('30d')}
              className="hover:bg-blue-200 rounded-full p-0.5"
            >
              <X className="w-3 h-3" />
            </button>
          </span>
        )}

        {/* Brush Range */}
        {filters.brushRange && (
          <span className="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-medium flex items-center gap-2 border border-purple-300">
            {filters.brushRange.start} to {filters.brushRange.end}
            <button
              onClick={() => setBrushRange(null)}
              className="hover:bg-purple-200 rounded-full p-0.5"
            >
              <X className="w-3 h-3" />
            </button>
          </span>
        )}

        {/* Sentiment Filters */}
        {filters.sentiment.map((s) => (
          <span
            key={s}
            className={`px-3 py-1 rounded-full text-sm font-medium flex items-center gap-2 border ${
              s === 'positive'
                ? 'bg-green-100 text-green-800 border-green-300'
                : s === 'negative'
                ? 'bg-red-100 text-red-800 border-red-300'
                : 'bg-yellow-100 text-yellow-800 border-yellow-300'
            }`}
          >
            {s.charAt(0).toUpperCase() + s.slice(1)}
            <button
              onClick={() => toggleSentiment(s)}
              className="hover:bg-opacity-50 rounded-full p-0.5"
            >
              <X className="w-3 h-3" />
            </button>
          </span>
        ))}

        {/* URT Domain */}
        {filters.urtDomain && (
          <span className="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium flex items-center gap-2 border border-indigo-300">
            {DOMAIN_LABELS[filters.urtDomain] || filters.urtDomain}
            <button
              onClick={() => setURTDomain(null)}
              className="hover:bg-indigo-200 rounded-full p-0.5"
            >
              <X className="w-3 h-3" />
            </button>
          </span>
        )}

        {/* Intensity Filters */}
        {filters.intensity.map((i) => (
          <span
            key={i}
            className="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm font-medium flex items-center gap-2 border border-orange-300"
          >
            {INTENSITY_LABELS[i] || i} Intensity
            <button
              onClick={() => toggleIntensity(i)}
              className="hover:bg-orange-200 rounded-full p-0.5"
            >
              <X className="w-3 h-3" />
            </button>
          </span>
        ))}
      </div>

      <button
        onClick={clearFilters}
        className="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors flex items-center gap-2"
      >
        <X className="w-4 h-4" />
        Clear All
      </button>
    </div>
  );
}
