/**
 * Archival Memory List Component
 * Displays list of archival memories with search, filtering, and sorting
 */

import React, { useState, useEffect, useMemo } from 'react';
import { useI18n } from '../../i18n';
import { useMemory } from '../../hooks/useMemory';
import { MemoryCard } from './MemoryCard';
import type { ArchivalMemory } from '../../types/memory';

type SortOption = 'date-desc' | 'date-asc' | 'importance-desc' | 'importance-asc' | 'relevance' | 'access-desc';
type ImportanceFilter = 'all' | 'high' | 'medium' | 'low';

export const ArchivalMemoryList: React.FC = () => {
  const { t } = useI18n();
  const {
    archivalMemories,
    archivalLoading,
    archivalError,
    archivalHasMore,
    archivalQuery,
    loadArchivalMemories,
    deleteArchivalMemory,
  } = useMemory();

  const [searchQuery, setSearchQuery] = useState('');
  const [debouncedQuery, setDebouncedQuery] = useState('');
  const [sortBy, setSortBy] = useState<SortOption>('date-desc');
  const [importanceFilter, setImportanceFilter] = useState<ImportanceFilter>('all');
  const [showFilters, setShowFilters] = useState(false);
  const [isCompact, setIsCompact] = useState(false);

  // Debounce search query
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedQuery(searchQuery);
    }, 500);

    return () => clearTimeout(timer);
  }, [searchQuery]);

  // Load memories when debounced query changes
  useEffect(() => {
    loadArchivalMemories(debouncedQuery, false);
  }, [debouncedQuery]);

  // Initial load
  useEffect(() => {
    if (archivalMemories.length === 0 && !archivalLoading) {
      loadArchivalMemories('', false);
    }
  }, []);

  const handleLoadMore = () => {
    loadArchivalMemories(debouncedQuery, true);
  };

  // Filter and sort memories
  const processedMemories = useMemo(() => {
    let filtered = [...archivalMemories];

    // Apply importance filter
    if (importanceFilter !== 'all') {
      filtered = filtered.filter(m => {
        if (importanceFilter === 'high') return m.importance >= 0.8;
        if (importanceFilter === 'medium') return m.importance >= 0.5 && m.importance < 0.8;
        if (importanceFilter === 'low') return m.importance < 0.5;
        return true;
      });
    }

    // Apply sorting
    filtered.sort((a, b) => {
      switch (sortBy) {
        case 'date-desc':
          return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
        case 'date-asc':
          return new Date(a.created_at).getTime() - new Date(b.created_at).getTime();
        case 'importance-desc':
          return b.importance - a.importance;
        case 'importance-asc':
          return a.importance - b.importance;
        case 'access-desc':
          return b.access_count - a.access_count;
        case 'relevance':
          if (a.similarity !== undefined && b.similarity !== undefined) {
            return b.similarity - a.similarity;
          }
          return 0;
        default:
          return 0;
      }
    });

    return filtered;
  }, [archivalMemories, importanceFilter, sortBy]);

  const activeFiltersCount = (importanceFilter !== 'all' ? 1 : 0);

  return (
    <div className="space-y-4">
      {/* Search and Filters Header */}
      <div className="border-3 border-brutal-black bg-white dark:bg-zinc-800 shadow-brutal p-4">
        <div className="flex items-center justify-between mb-3">
          <h3 className="font-brutal text-lg uppercase tracking-tight text-brutal-black dark:text-white">
            {t('archival.title')}
          </h3>
          <div className="flex gap-2">
            <button
              onClick={() => setIsCompact(!isCompact)}
              className={`px-3 py-1 border-2 border-brutal-black font-bold text-xs uppercase transition-all shadow-[2px_2px_0_0_#000000] brutal-btn ${isCompact ? 'bg-brutal-black text-white' : 'bg-white dark:bg-zinc-700 dark:text-white hover:bg-neutral-100 dark:hover:bg-zinc-600'
                }`}
              title={isCompact ? t('archival.view.switchToCards') : t('archival.view.switchToList')}
            >
              {isCompact ? '☰ List' : '☷ Cards'}
            </button>
            <button
              onClick={() => setShowFilters(!showFilters)}
              className={`px-3 py-1 border-2 border-brutal-black font-bold text-xs uppercase transition-all shadow-[2px_2px_0_0_#000000] brutal-btn ${showFilters ? 'bg-brutal-black text-white' : 'bg-white dark:bg-zinc-700 dark:text-white hover:bg-neutral-100 dark:hover:bg-zinc-600'
                }`}
            >
              {showFilters ? '▲' : '▼'} {t('archival.filters')} {activeFiltersCount > 0 && `(${activeFiltersCount})`}
            </button>
          </div>
        </div>

        {/* Search Bar */}
        <div className="relative mb-3">
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder={t('archival.searchPlaceholder')}
            className="w-full pl-3 pr-10 py-2 border-3 border-brutal-black rounded-none focus:outline-none focus:ring-4 focus:ring-brutal-black text-sm font-sans transition-all bg-white dark:bg-zinc-700 text-brutal-black dark:text-white placeholder:text-neutral-400"
          />
          {searchQuery && (
            <button
              onClick={() => setSearchQuery('')}
              className="absolute right-2 top-1/2 -translate-y-1/2 w-6 h-6 border-2 border-brutal-black bg-white dark:bg-zinc-600 dark:text-white hover:bg-brutal-black hover:text-white flex items-center justify-center font-bold transition-colors"
            >
              ×
            </button>
          )}
        </div>

        {searchQuery !== debouncedQuery && (
          <div className="flex items-center gap-2 text-xs text-neutral-500">
            <div className="w-3 h-3 border-2 border-brutal-black border-t-transparent animate-spin rounded-full"></div>
            <span>{t('archival.searching')}</span>
          </div>
        )}

        {/* Filters Panel */}
        {showFilters && (
          <div className="mt-4 pt-4 border-t-3 border-brutal-black space-y-3 animate-brutal-slide">
            {/* Sort By */}
            <div>
              <label className="block text-xs font-bold uppercase text-neutral-600 dark:text-neutral-400 mb-2">
                {t('archival.sortBy')}
              </label>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                {[
                  { value: 'date-desc', label: t('archival.sort.newestFirst') },
                  { value: 'date-asc', label: t('archival.sort.oldestFirst') },
                  { value: 'importance-desc', label: t('archival.sort.highToLow') },
                  { value: 'importance-asc', label: t('archival.sort.lowToHigh') },
                  { value: 'access-desc', label: t('archival.sort.mostAccessed') },
                  { value: 'relevance', label: t('archival.sort.mostRelevant') },
                ].map((option) => (
                  <button
                    key={option.value}
                    onClick={() => setSortBy(option.value as SortOption)}
                    className={`px-3 py-2 border-2 border-brutal-black text-xs font-bold uppercase transition-all ${sortBy === option.value
                      ? 'bg-brutal-black text-white'
                      : 'bg-white dark:bg-zinc-700 dark:text-white hover:bg-neutral-100 dark:hover:bg-zinc-600'
                      }`}
                  >
                    {option.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Importance Filter */}
            <div>
              <label className="block text-xs font-bold uppercase text-neutral-600 dark:text-neutral-400 mb-2">
                {t('archival.importanceLevel')}
              </label>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                {[
                  { value: 'all', label: t('archival.importance.all') },
                  { value: 'high', label: t('archival.importance.highRange') },
                  { value: 'medium', label: t('archival.importance.mediumRange') },
                  { value: 'low', label: t('archival.importance.lowRange') },
                ].map((option) => (
                  <button
                    key={option.value}
                    onClick={() => setImportanceFilter(option.value as ImportanceFilter)}
                    className={`px-3 py-2 border-2 border-brutal-black text-xs font-bold uppercase transition-all ${importanceFilter === option.value
                      ? 'bg-brutal-black text-white'
                      : 'bg-white dark:bg-zinc-700 dark:text-white hover:bg-neutral-100 dark:hover:bg-zinc-600'
                      }`}
                  >
                    {option.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Clear Filters */}
            {activeFiltersCount > 0 && (
              <button
                onClick={() => {
                  setImportanceFilter('all');
                  setSortBy('date-desc');
                }}
                className="w-full py-2 border-2 border-brutal-black bg-white dark:bg-zinc-700 dark:text-white hover:bg-neutral-100 dark:hover:bg-zinc-600 font-bold text-xs uppercase transition-all"
              >
                {t('archival.clearFilters')}
              </button>
            )}
          </div>
        )}
      </div>

      {/* Results Count */}
      {processedMemories.length > 0 && (
        <div className="flex items-center justify-between text-xs text-neutral-600 dark:text-neutral-400 px-1">
          <span>
            {t('archival.showingCount', { count: String(processedMemories.length) })}
            {importanceFilter !== 'all' && ` (${t('archival.filteredBy', { importance: importanceFilter })})`}
          </span>
        </div>
      )}

      {/* Error State */}
      {archivalError && (
        <div className="border-3 border-brutal-black bg-white dark:bg-zinc-800 p-6 animate-brutal-shake">
          <div className="flex items-start gap-3">
            <span className="text-3xl">⚠️</span>
            <div>
              <p className="font-bold text-brutal-black dark:text-white mb-1">{t('archival.errorTitle')}</p>
              <p className="text-sm text-brutal-black dark:text-neutral-300">{archivalError}</p>
            </div>
          </div>
        </div>
      )}

      {/* Empty State */}
      {processedMemories.length === 0 && !archivalLoading && (
        <div className="border-3 border-brutal-black bg-white dark:bg-zinc-800 p-12 text-center">
          <h4 className="font-brutal text-2xl uppercase mb-2 dark:text-white">
            {debouncedQuery || importanceFilter !== 'all'
              ? t('archival.empty.noMatchesTitle')
              : t('archival.empty.noMemoriesTitle')}
          </h4>
          <p className="text-neutral-600 dark:text-neutral-400 text-sm max-w-md mx-auto">
            {debouncedQuery
              ? t('archival.empty.noMatchesDesc')
              : importanceFilter !== 'all'
                ? t('archival.empty.noImportanceDesc', { importance: importanceFilter })
                : t('archival.empty.noMemoriesDesc')}
          </p>
          {(debouncedQuery || importanceFilter !== 'all') && (
            <button
              onClick={() => {
                setSearchQuery('');
                setImportanceFilter('all');
              }}
              className="mt-4 px-4 py-2 border-2 border-brutal-black bg-white dark:bg-zinc-700 dark:text-white hover:bg-neutral-100 dark:hover:bg-zinc-600 font-bold text-xs uppercase shadow-brutal-sm"
            >
              {t('archival.clearAllFilters')}
            </button>
          )}
        </div>
      )}

      {/* Memory Cards */}
      <div className={isCompact ? "space-y-2" : "space-y-3"}>
        {processedMemories.map((memory) => (
          <MemoryCard
            key={memory.id}
            memory={memory}
            onDelete={deleteArchivalMemory}
            searchQuery={debouncedQuery}
            compact={isCompact}
          />
        ))}
      </div>

      {/* Loading State */}
      {archivalLoading && (
        <div className="border-3 border-brutal-black bg-white dark:bg-zinc-800 p-8 text-center">
          <div className="flex items-center justify-center gap-3 mb-2">
            <div className="w-4 h-4 border-3 border-brutal-black dark:border-white border-t-transparent animate-spin rounded-full"></div>
            <p className="text-neutral-800 dark:text-white font-bold uppercase">{t('archival.loading')}</p>
          </div>
        </div>
      )}

      {/* Load More Button */}
      {archivalHasMore && !archivalLoading && archivalMemories.length > 0 && (
        <button
          onClick={handleLoadMore}
          className="w-full py-3 border-3 border-brutal-black bg-white dark:bg-zinc-800 dark:text-white hover:bg-neutral-100 dark:hover:bg-zinc-700 brutal-btn shadow-[2px_2px_0_0_#000] font-bold uppercase transition-all"
        >
          {t('archival.loadMore')}
        </button>
      )}
    </div>
  );
};
