'use client';

import { useState } from 'react';
import { collectionApi } from '../../lib/api';
import { Collection } from '../../types/api';
import Button from '../ui/Button';
import LoadingSpinner from '../ui/LoadingSpinner';

interface StorySelectionToolbarProps {
  selectedCount: number;
  totalCount: number;
  isSelectionMode: boolean;
  onSelectAll: () => void;
  onClearSelection: () => void;
  onBatchOperation: (operation: string) => void;
  selectedStoryIds: string[];
}

export default function StorySelectionToolbar({
  selectedCount,
  totalCount,
  isSelectionMode,
  onSelectAll,
  onClearSelection,
  onBatchOperation,
  selectedStoryIds
}: StorySelectionToolbarProps) {
  const [showAddToCollection, setShowAddToCollection] = useState(false);
  const [collections, setCollections] = useState<Collection[]>([]);
  const [loadingCollections, setLoadingCollections] = useState(false);
  const [addingToCollection, setAddingToCollection] = useState(false);
  const [newCollectionName, setNewCollectionName] = useState('');
  const [showCreateNew, setShowCreateNew] = useState(false);

  const loadCollections = async () => {
    try {
      setLoadingCollections(true);
      const result = await collectionApi.getCollections({
        page: 0,
        limit: 50,
        archived: false,
      });
      setCollections(result.results || []);
    } catch (error) {
      console.error('Failed to load collections:', error);
    } finally {
      setLoadingCollections(false);
    }
  };

  const handleShowAddToCollection = async () => {
    setShowAddToCollection(true);
    await loadCollections();
  };

  const handleAddToExistingCollection = async (collectionId: string) => {
    try {
      setAddingToCollection(true);
      await collectionApi.addStoriesToCollection(collectionId, selectedStoryIds);
      setShowAddToCollection(false);
      onBatchOperation('addToCollection');
    } catch (error) {
      console.error('Failed to add stories to collection:', error);
    } finally {
      setAddingToCollection(false);
    }
  };

  const handleCreateNewCollection = async () => {
    if (!newCollectionName.trim()) return;

    try {
      setAddingToCollection(true);
      const collection = await collectionApi.createCollection({
        name: newCollectionName.trim(),
        storyIds: selectedStoryIds,
      });
      setShowAddToCollection(false);
      setNewCollectionName('');
      setShowCreateNew(false);
      onBatchOperation('createCollection');
    } catch (error) {
      console.error('Failed to create collection:', error);
    } finally {
      setAddingToCollection(false);
    }
  };

  if (!isSelectionMode && selectedCount === 0) {
    return null;
  }

  return (
    <>
      <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
        <div className="flex items-center justify-between flex-wrap gap-4">
          {/* Selection Info */}
          <div className="flex items-center gap-4">
            <span className="font-medium text-blue-900 dark:text-blue-100">
              {selectedCount} of {totalCount} stories selected
            </span>
            
            <Button
              variant="ghost"
              size="sm"
              onClick={selectedCount === totalCount ? onClearSelection : onSelectAll}
              className="text-blue-600 hover:text-blue-800 dark:text-blue-400"
            >
              {selectedCount === totalCount ? 'Deselect All' : 'Select All'}
            </Button>
            
            {selectedCount > 0 && (
              <Button
                variant="ghost"
                size="sm"
                onClick={onClearSelection}
                className="text-blue-600 hover:text-blue-800 dark:text-blue-400"
              >
                Clear
              </Button>
            )}
          </div>

          {/* Batch Actions */}
          {selectedCount > 0 && (
            <div className="flex items-center gap-2">
              <Button
                size="sm"
                onClick={handleShowAddToCollection}
                disabled={addingToCollection}
              >
                Add to Collection
              </Button>
            </div>
          )}
        </div>
      </div>

      {/* Add to Collection Modal */}
      {showAddToCollection && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="theme-card max-w-lg w-full max-h-[80vh] overflow-hidden flex flex-col">
            {/* Header */}
            <div className="flex items-center justify-between p-6 border-b theme-border">
              <h2 className="text-xl font-semibold theme-header">
                Add {selectedCount} Stories to Collection
              </h2>
              <button
                onClick={() => {
                  setShowAddToCollection(false);
                  setShowCreateNew(false);
                  setNewCollectionName('');
                }}
                disabled={addingToCollection}
                className="text-gray-500 hover:text-gray-700 disabled:opacity-50"
              >
                ×
              </button>
            </div>

            {/* Content */}
            <div className="flex-1 overflow-y-auto p-6">
              {loadingCollections ? (
                <div className="flex justify-center py-8">
                  <LoadingSpinner size="md" />
                </div>
              ) : (
                <div className="space-y-4">
                  {/* Create New Collection */}
                  <div className="space-y-3">
                    <button
                      onClick={() => setShowCreateNew(!showCreateNew)}
                      className="w-full p-3 border-2 border-dashed theme-border rounded-lg theme-text hover:border-gray-400 transition-colors"
                    >
                      + Create New Collection
                    </button>
                    
                    {showCreateNew && (
                      <div className="space-y-3">
                        <input
                          type="text"
                          value={newCollectionName}
                          onChange={(e) => setNewCollectionName(e.target.value)}
                          placeholder="Enter collection name"
                          className="w-full px-3 py-2 border theme-border rounded-lg theme-card theme-text focus:outline-none focus:ring-2 focus:ring-blue-500"
                          onKeyDown={(e) => {
                            if (e.key === 'Enter') {
                              handleCreateNewCollection();
                            }
                          }}
                        />
                        <div className="flex gap-2">
                          <Button
                            size="sm"
                            onClick={handleCreateNewCollection}
                            disabled={!newCollectionName.trim() || addingToCollection}
                          >
                            {addingToCollection ? <LoadingSpinner size="sm" /> : 'Create'}
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => {
                              setShowCreateNew(false);
                              setNewCollectionName('');
                            }}
                            disabled={addingToCollection}
                          >
                            Cancel
                          </Button>
                        </div>
                      </div>
                    )}
                  </div>

                  {/* Existing Collections */}
                  {collections.length > 0 && (
                    <div className="space-y-2">
                      <h3 className="font-medium theme-text">Add to Existing Collection:</h3>
                      <div className="space-y-2 max-h-64 overflow-y-auto">
                        {collections.map((collection) => (
                          <button
                            key={collection.id}
                            onClick={() => handleAddToExistingCollection(collection.id)}
                            disabled={addingToCollection}
                            className="w-full p-3 text-left theme-card hover:border-gray-400 border theme-border rounded-lg transition-colors disabled:opacity-50"
                          >
                            <div className="font-medium theme-text">{collection.name}</div>
                            <div className="text-sm theme-text opacity-70">
                              {collection.storyCount} stories
                            </div>
                          </button>
                        ))}
                      </div>
                    </div>
                  )}

                  {collections.length === 0 && !loadingCollections && (
                    <div className="text-center py-8 theme-text opacity-70">
                      No collections found. Create a new one above.
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </>
  );
}