'use client';

import { useState, useEffect } from 'react';
import { searchApi } from '../../lib/api';
import { Story, Tag, FacetCount } from '../../types/api';
import AppLayout from '../../components/layout/AppLayout';
import { Input } from '../../components/ui/Input';
import Button from '../../components/ui/Button';
import StoryMultiSelect from '../../components/stories/StoryMultiSelect';
import TagFilter from '../../components/stories/TagFilter';
import LoadingSpinner from '../../components/ui/LoadingSpinner';

type ViewMode = 'grid' | 'list';
type SortOption = 'createdAt' | 'title' | 'authorName' | 'rating' | 'wordCount';

export default function LibraryPage() {
  const [stories, setStories] = useState<Story[]>([]);
  const [tags, setTags] = useState<Tag[]>([]);
  const [loading, setLoading] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [viewMode, setViewMode] = useState<ViewMode>('list');
  const [sortOption, setSortOption] = useState<SortOption>('createdAt');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
  const [page, setPage] = useState(0);
  const [totalPages, setTotalPages] = useState(1);
  const [totalElements, setTotalElements] = useState(0);
  const [refreshTrigger, setRefreshTrigger] = useState(0);



  // Convert facet counts to Tag objects for the UI
  const convertFacetsToTags = (facets?: Record<string, FacetCount[]>): Tag[] => {
    if (!facets || !facets.tagNames) {
      return [];
    }
    
    return facets.tagNames.map(facet => ({
      id: facet.value, // Use tag name as ID since we don't have actual IDs from search results
      name: facet.value,
      storyCount: facet.count
    }));
  };

  // Debounce search to avoid too many API calls
  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      const performSearch = async () => {
        try {
          setLoading(true);
          
          // Always use search API for consistency - use '*' for match-all when no query
          const result = await searchApi.search({
            query: searchQuery.trim() || '*', 
            page: page, // Use 0-based pagination consistently
            size: 20,
            tags: selectedTags.length > 0 ? selectedTags : undefined,
            sortBy: sortOption,
            sortDir: sortDirection,
            facetBy: ['tagNames'], // Request tag facets for the filter UI
          });
          
          const currentStories = result?.results || [];
          setStories(currentStories);
          setTotalPages(Math.ceil((result?.totalHits || 0) / 20));
          setTotalElements(result?.totalHits || 0);
          
          // Update tags from facets - these represent all matching stories, not just current page
          const resultTags = convertFacetsToTags(result?.facets);
          setTags(resultTags);
        } catch (error) {
          console.error('Failed to load stories:', error);
          setStories([]);
        } finally {
          setLoading(false);
        }
      };
      
      performSearch();
    }, searchQuery ? 300 : 0); // Debounce search, but not other changes

    return () => clearTimeout(debounceTimer);
  }, [searchQuery, selectedTags, page, sortOption, sortDirection, refreshTrigger]);

  // Reset page when search or filters change
  const resetPage = () => {
    if (page !== 0) {
      setPage(0);
    }
  };

  const handleTagToggle = (tagName: string) => {
    setSelectedTags(prev => {
      const newTags = prev.includes(tagName)
        ? prev.filter(t => t !== tagName)
        : [...prev, tagName];
      resetPage();
      return newTags;
    });
  };

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
    resetPage();
  };

  const handleSortChange = (newSortOption: SortOption) => {
    setSortOption(newSortOption);
    // Set appropriate default direction for the sort option
    if (newSortOption === 'title' || newSortOption === 'authorName') {
      setSortDirection('asc'); // Alphabetical fields default to ascending
    } else {
      setSortDirection('desc'); // Numeric/date fields default to descending
    }
    resetPage();
  };

  const toggleSortDirection = () => {
    setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
    resetPage();
  };

  const clearFilters = () => {
    setSearchQuery('');
    setSelectedTags([]);
    resetPage();
  };

  const handleStoryUpdate = () => {
    // Trigger reload by incrementing refresh trigger
    setRefreshTrigger(prev => prev + 1);
  };

  if (loading) {
    return (
      <AppLayout>
        <div className="flex items-center justify-center py-20">
          <LoadingSpinner size="lg" />
        </div>
      </AppLayout>
    );
  }

  return (
    <AppLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold theme-header">Your Story Library</h1>
            <p className="theme-text mt-1">
              {totalElements} {totalElements === 1 ? 'story' : 'stories'}
              {searchQuery || selectedTags.length > 0 ? ` found` : ` total`}
            </p>
          </div>
          
          <Button href="/add-story">
            Add New Story
          </Button>
        </div>

        {/* Search and Filters */}
        <div className="space-y-4">
          {/* Search Bar */}
          <div className="flex flex-col sm:flex-row gap-4">
            <div className="flex-1">
              <Input
                type="search"
                placeholder="Search by title, author, or tags..."
                value={searchQuery}
                onChange={handleSearchChange}
                className="w-full"
              />
            </div>
            
            {/* View Mode Toggle */}
            <div className="flex items-center gap-2">
              <button
                onClick={() => setViewMode('grid')}
                className={`p-2 rounded-lg transition-colors ${
                  viewMode === 'grid'
                    ? 'theme-accent-bg text-white'
                    : 'theme-card theme-text hover:bg-opacity-80'
                }`}
                aria-label="Grid view"
              >
                ⊞
              </button>
              <button
                onClick={() => setViewMode('list')}
                className={`p-2 rounded-lg transition-colors ${
                  viewMode === 'list'
                    ? 'theme-accent-bg text-white'
                    : 'theme-card theme-text hover:bg-opacity-80'
                }`}
                aria-label="List view"
              >
                ☰
              </button>
            </div>
          </div>

          {/* Sort and Tag Filters */}
          <div className="flex flex-col sm:flex-row gap-4">
            {/* Sort Options */}
            <div className="flex items-center gap-2">
              <label className="theme-text font-medium text-sm">Sort by:</label>
              <select
                value={sortOption}
                onChange={(e) => handleSortChange(e.target.value as SortOption)}
                className="px-3 py-1 rounded-lg theme-card theme-text theme-border border focus:outline-none focus:ring-2 focus:ring-theme-accent"
              >
                <option value="createdAt">Date Added</option>
                <option value="title">Title</option>
                <option value="authorName">Author</option>
                <option value="rating">Rating</option>
                <option value="wordCount">Word Count</option>
              </select>
              
              {/* Sort Direction Toggle */}
              <button
                onClick={toggleSortDirection}
                className="p-2 rounded-lg theme-card theme-text hover:bg-opacity-80 transition-colors border theme-border"
                title={`Sort ${sortDirection === 'asc' ? 'Ascending' : 'Descending'}`}
                aria-label={`Toggle sort direction - currently ${sortDirection === 'asc' ? 'ascending' : 'descending'}`}
              >
                {sortDirection === 'asc' ? '↑' : '↓'}
              </button>
            </div>

            {/* Clear Filters */}
            {(searchQuery || selectedTags.length > 0) && (
              <Button variant="ghost" size="sm" onClick={clearFilters}>
                Clear Filters
              </Button>
            )}
          </div>

          {/* Tag Filter */}
          <TagFilter
            tags={tags}
            selectedTags={selectedTags}
            onTagToggle={handleTagToggle}
          />
        </div>

        {/* Stories Display */}
        {stories.length === 0 && !loading ? (
          <div className="text-center py-20">
            <div className="theme-text text-lg mb-4">
              {searchQuery || selectedTags.length > 0 
                ? 'No stories match your filters' 
                : 'No stories in your library yet'
              }
            </div>
            {searchQuery || selectedTags.length > 0 ? (
              <Button variant="ghost" onClick={clearFilters}>
                Clear Filters
              </Button>
            ) : (
              <Button href="/add-story">
                Add Your First Story
              </Button>
            )}
          </div>
        ) : (
          <StoryMultiSelect
            stories={stories}
            viewMode={viewMode}
            onUpdate={handleStoryUpdate}
            allowMultiSelect={true}
          />
        )}

        {/* Pagination */}
        {totalPages > 1 && (
          <div className="flex justify-center gap-2 mt-8">
            <Button
              variant="ghost"
              onClick={() => setPage(page - 1)}
              disabled={page === 0}
            >
              Previous
            </Button>
            
            <span className="flex items-center px-4 py-2 theme-text">
              Page {page + 1} of {totalPages}
            </span>
            
            <Button
              variant="ghost"
              onClick={() => setPage(page + 1)}
              disabled={page >= totalPages - 1}
            >
              Next
            </Button>
          </div>
        )}
      </div>
    </AppLayout>
  );
}