import React, { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { tcgApi } from '../../services/tcgApi';
import type { CreateDeckData } from '../../types';

interface DeckManagerProps {
  isOpen: boolean;
  onClose: () => void;
  deckId?: string; // For editing existing deck
}

const DeckManager: React.FC<DeckManagerProps> = ({
  isOpen,
  onClose,
  deckId
}) => {
  const queryClient = useQueryClient();
  
  const [formData, setFormData] = useState<CreateDeckData>({
    name: '',
    description: '',
    game: 'MTG',
    format: '',
    tags: [],
    color: '#8b5cf6',
    isPublic: false,
  });

  const [selectedTags, setSelectedTags] = useState<string[]>([]);


  const colors = [
    '#8b5cf6', '#3b82f6', '#10b981', '#f59e0b', '#ef4444', 
    '#ec4899', '#6366f1', '#06b6d4', '#84cc16', '#f97316'
  ];

  // Queries
  const { data: existingDeck } = useQuery({
    queryKey: ['deck', deckId],
    queryFn: () => tcgApi.decks.getDeck(deckId!),
    enabled: !!deckId,
  });

  const { data: tags = [] } = useQuery({
    queryKey: ['tags'],
    queryFn: () => tcgApi.tags.getTags(),
  });

  // Mutations
  const createMutation = useMutation({
    mutationFn: tcgApi.decks.createDeck,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['decks'] });
      onClose();
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Partial<CreateDeckData> }) =>
      tcgApi.decks.updateDeck(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['decks'] });
      queryClient.invalidateQueries({ queryKey: ['deck', deckId] });
      onClose();
    },
  });

  // Initialize form with existing deck data
  useEffect(() => {
    if (existingDeck) {
      setFormData({
        name: existingDeck.name,
        description: existingDeck.description || '',
        game: existingDeck.game,
        format: existingDeck.format || '',
        tags: existingDeck.tags,
        color: existingDeck.color || '#8b5cf6',
        isPublic: existingDeck.isPublic,
      });
      setSelectedTags(existingDeck.tags);
    }
  }, [existingDeck]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    const submitData = {
      ...formData,
      tags: selectedTags,
    };

    if (deckId && existingDeck) {
      updateMutation.mutate({ id: deckId, data: submitData });
    } else {
      createMutation.mutate(submitData);
    }
  };

  const getGameBadgeColor = (game: string) => {
    switch (game) {
      case 'MTG': return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300';
      case 'POKEMON': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300';  
      case 'LORCANA': return 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300';
      case 'YUGIOH': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
      default: return 'bg-surface-100 text-surface-800 dark:bg-surface-700 dark:text-surface-300';
    }
  };

  const getFormatOptions = (game: string) => {
    switch (game) {
      case 'MTG':
        return [
          { value: 'standard', label: 'Standard' },
          { value: 'modern', label: 'Modern' },
          { value: 'commander', label: 'Commander' },
          { value: 'pioneer', label: 'Pioneer' },
          { value: 'legacy', label: 'Legacy' },
          { value: 'vintage', label: 'Vintage' },
          { value: 'draft', label: 'Draft' },
          { value: 'sealed', label: 'Sealed' },
        ];
      case 'POKEMON':
        return [
          { value: 'standard', label: 'Standard' },
          { value: 'expanded', label: 'Expanded' },
          { value: 'unlimited', label: 'Unlimited' },
        ];
      case 'LORCANA':
        return [
          { value: 'standard', label: 'Standard' },
          { value: 'constructed', label: 'Constructed' },
        ];
      case 'YUGIOH':
        return [
          { value: 'advanced', label: 'Advanced' },
          { value: 'traditional', label: 'Traditional' },
        ];
      default:
        return [];
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 bg-black/50" onClick={onClose}>
      <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-surface-900 rounded-t-3xl max-h-[90vh] overflow-hidden animate-slide-up">
        <div className="p-6">
          <div className="w-12 h-1.5 bg-surface-300 dark:bg-surface-600 rounded-full mx-auto mb-6"></div>
          
          {/* Header */}
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-xl font-bold text-surface-900 dark:text-white">
              {deckId ? 'Edit Deck' : 'New Deck'}
            </h2>
            <button
              onClick={onClose}
              className="p-2 rounded-xl text-surface-400 hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          <div className="max-h-[calc(90vh-8rem)] overflow-y-auto">
            <form onSubmit={handleSubmit} className="space-y-6" onClick={(e) => e.stopPropagation()}>
              
              {/* Deck Preview */}
              <div className="p-4 bg-surface-50 dark:bg-surface-800 rounded-2xl">
                <div className="flex items-center space-x-4">
                  <div
                    className="w-12 h-12 rounded-xl flex items-center justify-center text-white text-xl font-semibold shadow-md"
                    style={{ backgroundColor: formData.color }}
                  >
                    🎴
                  </div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-surface-900 dark:text-white">
                      {formData.name || 'Deck Name'}
                    </h3>
                    {formData.description && (
                      <p className="text-sm text-surface-600 dark:text-surface-400">
                        {formData.description}
                      </p>
                    )}
                    <div className="flex items-center space-x-2 mt-2">
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${getGameBadgeColor(formData.game)}`}>
                        {formData.game}
                      </span>
                      {formData.format && (
                        <span className="px-2 py-1 bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 rounded-full text-xs font-medium">
                          {formData.format}
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              </div>

              {/* Name */}
              <div>
                <label className="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-2">
                  Deck Name *
                </label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
                  placeholder="Enter deck name..."
                  className="w-full px-4 py-3 bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded-xl text-surface-900 dark:text-white placeholder-surface-500 dark:placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors"
                  required
                />
              </div>

              {/* Description */}
              <div>
                <label className="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-2">
                  Description
                </label>
                <textarea
                  value={formData.description}
                  onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
                  rows={3}
                  placeholder="Describe your deck..."
                  className="w-full px-4 py-3 bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded-xl text-surface-900 dark:text-white placeholder-surface-500 dark:placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors resize-none"
                />
              </div>

              {/* Game and Format */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-2">
                    Game *
                  </label>
                  <select
                    value={formData.game}
                    onChange={(e) => setFormData(prev => ({ ...prev, game: e.target.value as any, format: '' }))}
                    className="w-full px-4 py-3 bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded-xl text-surface-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors"
                  >
                    <option value="MTG">Magic: The Gathering</option>
                    <option value="POKEMON">Pokémon</option>
                    <option value="LORCANA">Disney Lorcana</option>
                    <option value="YUGIOH">Yu-Gi-Oh!</option>
                  </select>
                </div>

                <div>
                  <label className="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-2">
                    Format
                  </label>
                  <select
                    value={formData.format}
                    onChange={(e) => setFormData(prev => ({ ...prev, format: e.target.value }))}
                    className="w-full px-4 py-3 bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded-xl text-surface-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors"
                  >
                    <option value="">Select Format</option>
                    {getFormatOptions(formData.game).map((format) => (
                      <option key={format.value} value={format.value}>
                        {format.label}
                      </option>
                    ))}
                  </select>
                </div>
              </div>

              {/* Color */}
              <div>
                <label className="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-2">
                  Color
                </label>
                <div className="grid grid-cols-5 gap-2">
                  {colors.map((color) => (
                    <button
                      key={color}
                      type="button"
                      onClick={() => setFormData(prev => ({ ...prev, color }))}
                      className={`w-full h-12 rounded-lg transition-all ${
                        formData.color === color ? 'ring-2 ring-surface-400 ring-offset-2 dark:ring-offset-surface-900' : ''
                      }`}
                      style={{ backgroundColor: color }}
                    />
                  ))}
                </div>
              </div>

              {/* Tags */}
              <div>
                <label className="block text-sm font-medium text-surface-700 dark:text-surface-300 mb-2">
                  Tags
                </label>
                <div className="flex flex-wrap gap-2">
                  {tags.map((tag) => (
                    <button
                      key={tag.id}
                      type="button"
                      onClick={() => {
                        setSelectedTags(prev =>
                          prev.includes(tag.id)
                            ? prev.filter(id => id !== tag.id)
                            : [...prev, tag.id]
                        );
                      }}
                      className={`px-3 py-2 rounded-full text-sm font-medium transition-colors ${
                        selectedTags.includes(tag.id)
                          ? 'text-white'
                          : 'bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300'
                      }`}
                      style={{
                        backgroundColor: selectedTags.includes(tag.id) ? tag.color : undefined,
                      }}
                    >
                      {tag.name}
                    </button>
                  ))}
                </div>
              </div>

              {/* Privacy Toggle */}
              <div>
                <label className="flex items-center justify-between">
                  <div>
                    <span className="text-sm font-medium text-surface-700 dark:text-surface-300">
                      Public Deck
                    </span>
                    <p className="text-xs text-surface-600 dark:text-surface-400 mt-1">
                      Allow others to view your deck
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={() => setFormData(prev => ({ ...prev, isPublic: !prev.isPublic }))}
                    className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
                      formData.isPublic ? 'bg-primary-600' : 'bg-surface-200 dark:bg-surface-700'
                    }`}
                  >
                    <span
                      className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
                        formData.isPublic ? 'translate-x-5' : 'translate-x-0'
                      }`}
                    />
                  </button>
                </label>
              </div>

              {/* Deck Cards Section */}
              {deckId && existingDeck && (
                <div>
                  <div className="mb-4">
                    <h3 className="text-lg font-semibold text-surface-900 dark:text-white">
                      Deck Cards ({existingDeck.mainboard?.length || 0})
                    </h3>
                  </div>

                  {/* Deck Cards List */}
                  <div className="space-y-2 max-h-48 overflow-y-auto">
                    {existingDeck.mainboard?.map((deckCard, index) => (
                      <div key={index} className="flex items-center justify-between p-3 bg-surface-50 dark:bg-surface-700 rounded-lg">
                        <div className="flex items-center space-x-3">
                          <span className="text-sm font-medium text-surface-900 dark:text-white">
                            {deckCard.quantity}x
                          </span>
                          <span className="text-sm text-surface-700 dark:text-surface-300">
                            {deckCard.card?.name || 'Unknown Card'}
                          </span>
                        </div>
                        <button
                          type="button"
                          onClick={() => {/* Remove card from deck */}}
                          className="p-1 text-red-400 hover:text-red-600 rounded transition-colors"
                        >
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </button>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Submit Button */}
              <button
                type="submit"
                disabled={!formData.name.trim() || createMutation.isPending || updateMutation.isPending}
                className="w-full bg-gradient-to-r from-primary-500 to-accent-500 hover:from-primary-600 hover:to-accent-600 disabled:from-surface-400 disabled:to-surface-400 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl disabled:shadow-none transform hover:-translate-y-0.5 disabled:transform-none"
              >
                {(createMutation.isPending || updateMutation.isPending) ? (
                  <div className="flex items-center justify-center">
                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    {deckId ? 'Updating...' : 'Creating...'}
                  </div>
                ) : (
                  deckId ? 'Update Deck' : 'Create Deck'
                )}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DeckManager;