'use client';

import { useState, useEffect } from 'react';
import { searchApi, tagApi } from '../../lib/api';
import { Story, Tag } from '../../types/api';
import { Input } from '../ui/Input';
import Button from '../ui/Button';
import LoadingSpinner from '../ui/LoadingSpinner';

interface CollectionFormProps {
  initialData?: {
    name: string;
    description?: string;
    tags?: string[];
    storyIds?: string[];
    coverImagePath?: string;
  };
  onSubmit: (data: {
    name: string;
    description?: string;
    tags?: string[];
    storyIds?: string[];
    coverImage?: File;
  }) => Promise<void>;
  onCancel: () => void;
  loading?: boolean;
  submitLabel?: string;
}

export default function CollectionForm({
  initialData,
  onSubmit,
  onCancel,
  loading = false,
  submitLabel = 'Save Collection'
}: CollectionFormProps) {
  const [name, setName] = useState(initialData?.name || '');
  const [description, setDescription] = useState(initialData?.description || '');
  const [tagInput, setTagInput] = useState('');
  const [selectedTags, setSelectedTags] = useState<string[]>(initialData?.tags || []);
  const [tagSuggestions, setTagSuggestions] = useState<string[]>([]);
  const [selectedStoryIds, setSelectedStoryIds] = useState<string[]>(initialData?.storyIds || []);
  const [coverImage, setCoverImage] = useState<File | null>(null);
  const [coverImagePreview, setCoverImagePreview] = useState<string | null>(null);
  
  // Story selection state
  const [storySearchQuery, setStorySearchQuery] = useState('');
  const [availableStories, setAvailableStories] = useState<Story[]>([]);
  const [selectedStories, setSelectedStories] = useState<Story[]>([]);
  const [loadingStories, setLoadingStories] = useState(false);
  const [showStorySelection, setShowStorySelection] = useState(false);

  // Load tag suggestions when typing
  useEffect(() => {
    if (tagInput.length > 1) {
      const loadSuggestions = async () => {
        try {
          const suggestions = await tagApi.getTagAutocomplete(tagInput);
          setTagSuggestions(suggestions.filter(tag => !selectedTags.includes(tag)));
        } catch (error) {
          console.error('Failed to load tag suggestions:', error);
        }
      };
      
      const debounceTimer = setTimeout(loadSuggestions, 300);
      return () => clearTimeout(debounceTimer);
    } else {
      setTagSuggestions([]);
    }
  }, [tagInput, selectedTags]);

  // Load stories for selection
  useEffect(() => {
    if (showStorySelection) {
      const loadStories = async () => {
        try {
          setLoadingStories(true);
          const result = await searchApi.search({
            query: storySearchQuery || '*',
            page: 0,
            size: 50,
          });
          setAvailableStories(result.results || []);
        } catch (error) {
          console.error('Failed to load stories:', error);
        } finally {
          setLoadingStories(false);
        }
      };

      const debounceTimer = setTimeout(loadStories, 300);
      return () => clearTimeout(debounceTimer);
    }
  }, [storySearchQuery, showStorySelection]);

  // Load selected stories data on mount
  useEffect(() => {
    if (selectedStoryIds.length > 0) {
      const loadSelectedStories = async () => {
        try {
          const result = await searchApi.search({
            query: '*',
            page: 0,
            size: 100,
          });
          const stories = result.results.filter(story => selectedStoryIds.includes(story.id));
          setSelectedStories(stories);
        } catch (error) {
          console.error('Failed to load selected stories:', error);
        }
      };
      loadSelectedStories();
    }
  }, [selectedStoryIds]);

  const handleTagInputKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && tagInput.trim()) {
      e.preventDefault();
      const newTag = tagInput.trim();
      if (!selectedTags.includes(newTag)) {
        setSelectedTags(prev => [...prev, newTag]);
      }
      setTagInput('');
      setTagSuggestions([]);
    }
  };

  const addTag = (tag: string) => {
    if (!selectedTags.includes(tag)) {
      setSelectedTags(prev => [...prev, tag]);
    }
    setTagInput('');
    setTagSuggestions([]);
  };

  const removeTag = (tagToRemove: string) => {
    setSelectedTags(prev => prev.filter(tag => tag !== tagToRemove));
  };

  const handleCoverImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setCoverImage(file);
      const reader = new FileReader();
      reader.onload = (e) => {
        setCoverImagePreview(e.target?.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const toggleStorySelection = (story: Story) => {
    const isSelected = selectedStoryIds.includes(story.id);
    if (isSelected) {
      setSelectedStoryIds(prev => prev.filter(id => id !== story.id));
      setSelectedStories(prev => prev.filter(s => s.id !== story.id));
    } else {
      setSelectedStoryIds(prev => [...prev, story.id]);
      setSelectedStories(prev => [...prev, story]);
    }
  };

  const removeSelectedStory = (storyId: string) => {
    setSelectedStoryIds(prev => prev.filter(id => id !== storyId));
    setSelectedStories(prev => prev.filter(s => s.id !== storyId));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!name.trim()) {
      return;
    }

    await onSubmit({
      name: name.trim(),
      description: description.trim() || undefined,
      tags: selectedTags,
      storyIds: selectedStoryIds,
      coverImage: coverImage || undefined,
    });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Basic Information */}
      <div className="theme-card p-6">
        <h2 className="text-lg font-semibold theme-header mb-4">Basic Information</h2>
        
        <div className="space-y-4">
          <div>
            <label htmlFor="name" className="block text-sm font-medium theme-text mb-1">
              Collection Name *
            </label>
            <Input
              id="name"
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Enter collection name"
              required
              className="w-full"
            />
          </div>

          <div>
            <label htmlFor="description" className="block text-sm font-medium theme-text mb-1">
              Description
            </label>
            <textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Describe this collection (optional)"
              rows={3}
              className="w-full px-3 py-2 border theme-border rounded-lg theme-card theme-text focus:outline-none focus:ring-2 focus:ring-theme-accent"
            />
          </div>

          {/* Cover Image Upload */}
          <div>
            <label htmlFor="coverImage" className="block text-sm font-medium theme-text mb-1">
              Cover Image
            </label>
            <div className="flex items-start gap-4">
              <div className="flex-1">
                <input
                  id="coverImage"
                  type="file"
                  accept="image/jpeg,image/png"
                  onChange={handleCoverImageChange}
                  className="w-full px-3 py-2 border theme-border rounded-lg theme-card theme-text focus:outline-none focus:ring-2 focus:ring-theme-accent"
                />
                <p className="text-xs theme-text opacity-60 mt-1">
                  JPG, PNG, or WebP. Max 800x1200px.
                </p>
              </div>
              
              {(coverImagePreview || initialData?.coverImagePath) && (
                <div className="w-20 h-24 rounded overflow-hidden bg-gray-100">
                  <img
                    src={coverImagePreview || (initialData?.coverImagePath ? `/images/${initialData.coverImagePath}` : '')}
                    alt="Cover preview"
                    className="w-full h-full object-cover"
                  />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Tags */}
      <div className="theme-card p-6">
        <h2 className="text-lg font-semibold theme-header mb-4">Tags</h2>
        
        <div className="space-y-3">
          <div className="relative">
            <Input
              type="text"
              value={tagInput}
              onChange={(e) => setTagInput(e.target.value)}
              onKeyDown={handleTagInputKeyDown}
              placeholder="Type tags and press Enter"
              className="w-full"
            />
            
            {tagSuggestions.length > 0 && (
              <div className="absolute z-10 top-full left-0 right-0 mt-1 bg-white border theme-border rounded-lg shadow-lg max-h-32 overflow-y-auto">
                {tagSuggestions.map((suggestion) => (
                  <button
                    key={suggestion}
                    type="button"
                    onClick={() => addTag(suggestion)}
                    className="w-full px-3 py-2 text-left hover:bg-gray-100 theme-text"
                  >
                    {suggestion}
                  </button>
                ))}
              </div>
            )}
          </div>

          {selectedTags.length > 0 && (
            <div className="flex flex-wrap gap-2">
              {selectedTags.map((tag) => (
                <span
                  key={tag}
                  className="inline-flex items-center px-3 py-1 text-sm rounded-full theme-accent-bg text-white"
                >
                  {tag}
                  <button
                    type="button"
                    onClick={() => removeTag(tag)}
                    className="ml-2 hover:text-red-200"
                  >
                    ×
                  </button>
                </span>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Story Selection */}
      <div className="theme-card p-6">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold theme-header">Stories</h2>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => setShowStorySelection(!showStorySelection)}
          >
            {showStorySelection ? 'Hide' : 'Add'} Stories
          </Button>
        </div>

        {/* Selected Stories */}
        {selectedStories.length > 0 && (
          <div className="mb-4">
            <h3 className="text-sm font-medium theme-text mb-2">
              Selected Stories ({selectedStories.length})
            </h3>
            <div className="space-y-2 max-h-32 overflow-y-auto">
              {selectedStories.map((story) => (
                <div key={story.id} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium theme-text truncate">{story.title}</p>
                    <p className="text-xs theme-text opacity-60">{story.authorName}</p>
                  </div>
                  <button
                    type="button"
                    onClick={() => removeSelectedStory(story.id)}
                    className="ml-2 text-red-600 hover:text-red-800"
                  >
                    ×
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Story Selection Interface */}
        {showStorySelection && (
          <div className="space-y-3">
            <Input
              type="search"
              value={storySearchQuery}
              onChange={(e) => setStorySearchQuery(e.target.value)}
              placeholder="Search stories to add..."
              className="w-full"
            />

            {loadingStories ? (
              <div className="flex justify-center py-4">
                <LoadingSpinner size="sm" />
              </div>
            ) : (
              <div className="max-h-64 overflow-y-auto space-y-2">
                {availableStories.map((story) => {
                  const isSelected = selectedStoryIds.includes(story.id);
                  return (
                    <div
                      key={story.id}
                      className={`p-3 rounded-lg border cursor-pointer transition-colors ${
                        isSelected
                          ? 'border-blue-500 bg-blue-50'
                          : 'theme-border hover:border-gray-400'
                      }`}
                      onClick={() => toggleStorySelection(story)}
                    >
                      <div className="flex items-center gap-3">
                        <input
                          type="checkbox"
                          checked={isSelected}
                          onChange={() => toggleStorySelection(story)}
                          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                        />
                        <div className="flex-1 min-w-0">
                          <p className="font-medium theme-text truncate">{story.title}</p>
                          <p className="text-sm theme-text opacity-60">{story.authorName}</p>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        )}
      </div>

      {/* Form Actions */}
      <div className="flex justify-end gap-3">
        <Button
          type="button"
          variant="ghost"
          onClick={onCancel}
          disabled={loading}
        >
          Cancel
        </Button>
        <Button
          type="submit"
          disabled={loading || !name.trim()}
        >
          {loading ? <LoadingSpinner size="sm" /> : submitLabel}
        </Button>
      </div>
    </form>
  );
}