import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Layout from '../../components/Layout';

export default function CollectionView() {
  const router = useRouter();
  const { id } = router.query;
  
  // Mock user data for now
  const user = {
    email: 'me@randallstillwell.com',
    role: 'user'
  };

  const [collection, setCollection] = useState(null);
  const [cards, setCards] = useState([]);
  const [loading, setLoading] = useState(true);
  const [isFavorited, setIsFavorited] = useState(false);
  const [showShareModal, setShowShareModal] = useState(false);
  const [copySuccess, setCopySuccess] = useState(false);

  // Filter states
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedRarity, setSelectedRarity] = useState('all');
  const [selectedType, setSelectedType] = useState('all');
  const [sortBy, setSortBy] = useState('name');
  const [viewMode, setViewMode] = useState('grid'); // grid or list

  // Mock collection data
  const mockCollection = {
    id: 1,
    name: "King PikaRomulus",
    description: "A competitive Pokemon deck focused on Pikachu and powerful electric types",
    creator: "Emberwing",
    format: "Standard",
    cost: "$1,430",
    cardCount: 60,
    createdAt: "2023-04-12",
    lastUpdated: "2 months ago",
    isPublic: true,
    isOfficial: false,
    tags: ["competitive", "electric", "pikachu", "standard"],
    tcg: "Pokemon",
    playGuide: "How to play King PikaRomulus",
    views: 2847,
    favorites: 156,
    copies: 89
  };

  // Mock cards data
  const mockCards = [
    {
      id: 1,
      name: "Pikachu VMAX",
      set: "Vivid Voltage",
      rarity: "Rainbow Rare",
      type: "Electric",
      cost: 45.99,
      quantity: 1,
      image: "https://images.pokemontcg.io/swsh4/188_hires.png"
    },
    {
      id: 2,
      name: "Professor's Research",
      set: "Champion's Path",
      rarity: "Uncommon",
      type: "Trainer",
      cost: 2.50,
      quantity: 4,
      image: "https://images.pokemontcg.io/swsh35/62_hires.png"
    },
    {
      id: 3,
      name: "Quick Ball",
      set: "Sword & Shield",
      rarity: "Uncommon",
      type: "Trainer",
      cost: 1.25,
      quantity: 4,
      image: "https://images.pokemontcg.io/swsh1/179_hires.png"
    },
    {
      id: 4,
      name: "Lightning Energy",
      set: "Basic Energy",
      rarity: "Common",
      type: "Energy",
      cost: 0.10,
      quantity: 12,
      image: "https://images.pokemontcg.io/base1/100_hires.png"
    },
    {
      id: 5,
      name: "Zapdos V",
      set: "Chilling Reign",
      rarity: "Ultra Rare",
      type: "Electric",
      cost: 8.75,
      quantity: 2,
      image: "https://images.pokemontcg.io/swsh6/166_hires.png"
    },
    {
      id: 6,
      name: "Ultra Ball",
      set: "Plasma Freeze",
      rarity: "Uncommon",
      type: "Trainer",
      cost: 3.20,
      quantity: 3,
      image: "https://images.pokemontcg.io/pl9/122_hires.png"
    }
  ];

  useEffect(() => {
    if (id) {
      // Simulate API call
      setTimeout(() => {
        setCollection(mockCollection);
        setCards(mockCards);
        setLoading(false);
      }, 500);
    }
  }, [id]);

  const handleCopyLink = async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      setCopySuccess(true);
      setTimeout(() => setCopySuccess(false), 2000);
    } catch (err) {
      console.error('Failed to copy link:', err);
    }
  };

  const handleFavorite = () => {
    setIsFavorited(!isFavorited);
    // Here you would typically make an API call
  };

  const handleSaveCopy = () => {
    // Logic to save a copy to user's collections
    console.log('Saving copy of collection');
  };

  const filteredCards = cards.filter(card => {
    const matchesSearch = card.name.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesRarity = selectedRarity === 'all' || card.rarity === selectedRarity;
    const matchesType = selectedType === 'all' || card.type === selectedType;
    return matchesSearch && matchesRarity && matchesType;
  });

  const sortedCards = [...filteredCards].sort((a, b) => {
    switch (sortBy) {
      case 'name':
        return a.name.localeCompare(b.name);
      case 'cost':
        return b.cost - a.cost;
      case 'rarity':
        return a.rarity.localeCompare(b.rarity);
      case 'type':
        return a.type.localeCompare(b.type);
      default:
        return 0;
    }
  });

  const totalValue = cards.reduce((sum, card) => sum + (card.cost * card.quantity), 0);
  const totalCards = cards.reduce((sum, card) => sum + card.quantity, 0);

  if (loading) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
        </div>
      </Layout>
    );
  }

  if (!collection) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-center">
            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
              Collection not found
            </h2>
            <button
              onClick={() => router.push('/collections')}
              className="px-6 py-3 rounded-lg font-medium gradient-bg-purple text-white hover:shadow-lg transform hover:scale-105 transition-all duration-200"
            >
              Back to Collections
            </button>
          </div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout user={user}>
      {/* Hero Section with Collection Info */}
      <div 
        className="relative h-64 bg-gradient-to-r from-purple-600 to-blue-600 flex items-end"
        style={{
          backgroundImage: 'linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url("https://images.unsplash.com/photo-1606092195730-5d7b9af1efc5?w=1200")',
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }}
      >
        <div className="container mx-auto px-6 pb-8">
          <div className="flex items-center space-x-4 mb-4">
            <div className="p-3 rounded-xl bg-white bg-opacity-20 backdrop-blur-sm">
              <div className="text-2xl">👑</div>
            </div>
            <div>
              <h1 className="text-4xl font-bold text-white mb-2">
                {collection.name}
              </h1>
              <div className="flex items-center space-x-4 text-white text-opacity-90">
                <div className="flex items-center space-x-2">
                  <div className="w-6 h-6 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
                    <span className="text-sm">👤</span>
                  </div>
                  <span>Crafted by {collection.creator}</span>
                </div>
                <span>•</span>
                <span>Format: {collection.format}</span>
                <span>•</span>
                <span>Cost: {collection.cost}</span>
                <span>•</span>
                <span>Appears in: {collection.playGuide}</span>
                <span className="px-2 py-1 rounded-full bg-white bg-opacity-20 text-sm">
                  +4 more
                </span>
              </div>
            </div>
          </div>
          
          <div className="flex items-center space-x-2 text-white text-opacity-75 text-sm">
            <span>Created {collection.createdAt}</span>
            <span>•</span>
            <span>Last updated {collection.lastUpdated}</span>
          </div>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="border-b" style={{ backgroundColor: 'var(--bg-secondary)', borderColor: 'var(--border)' }}>
        <div className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <button
                onClick={handleCopyLink}
                className="flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all duration-200 hover:shadow-md"
                style={{
                  backgroundColor: 'var(--bg-primary)',
                  borderColor: 'var(--border)',
                  color: 'var(--text-primary)'
                }}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                <span>{copySuccess ? 'Copied!' : 'Copy link'}</span>
              </button>

              <button
                onClick={() => setShowShareModal(true)}
                className="flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all duration-200 hover:shadow-md"
                style={{
                  backgroundColor: 'var(--bg-primary)',
                  borderColor: 'var(--border)',
                  color: 'var(--text-primary)'
                }}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
                </svg>
                <span>Copy list</span>
              </button>

              <button
                className="flex items-center space-x-2 px-4 py-2 rounded-lg border transition-all duration-200 hover:shadow-md"
                style={{
                  backgroundColor: 'var(--bg-primary)',
                  borderColor: 'var(--border)',
                  color: 'var(--text-primary)'
                }}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H9.414a1 1 0 01-.707-.293l-2-2A1 1 0 006 6H4a2 2 0 00-2 2v11a2 2 0 002 2h4a2 2 0 002-2v-1" />
                </svg>
                <span>Print proxies</span>
              </button>
            </div>

            <button
              onClick={handleSaveCopy}
              className="flex items-center space-x-2 px-6 py-2 rounded-lg font-medium gradient-bg-purple text-white hover:shadow-lg transform hover:scale-105 transition-all duration-200"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3-3m0 0l-3 3m3-3v12" />
              </svg>
              <span>Save deck</span>
            </button>
          </div>
        </div>
      </div>

      {/* Stats and Filters */}
      <div className="container mx-auto px-6 py-6">
        {/* Collection Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          <div className="text-center p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
            <div className="text-2xl font-bold gradient-text-blue">{totalCards}</div>
            <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>Total Cards</div>
          </div>
          <div className="text-center p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
            <div className="text-2xl font-bold gradient-text-purple">${totalValue.toFixed(2)}</div>
            <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>Total Value</div>
          </div>
          <div className="text-center p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
            <div className="text-2xl font-bold gradient-text-green">{collection.views}</div>
            <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>Views</div>
          </div>
          <div className="text-center p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
            <div className="text-2xl font-bold gradient-text-orange">{collection.favorites}</div>
            <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>Favorites</div>
          </div>
        </div>

        {/* Filters */}
        <div className="p-6 rounded-xl mb-6" style={{ backgroundColor: 'var(--bg-secondary)' }}>
          <div className="flex flex-col lg:flex-row gap-4">
            <div className="flex-1">
              <input
                type="text"
                placeholder="Search cards..."
                className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                style={{
                  backgroundColor: 'var(--bg-primary)',
                  borderColor: 'var(--border)',
                  color: 'var(--text-primary)'
                }}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            
            <div className="flex flex-wrap gap-3">
              <select
                value={selectedRarity}
                onChange={(e) => setSelectedRarity(e.target.value)}
                className="px-4 py-3 rounded-lg border transition-all duration-200"
                style={{
                  backgroundColor: 'var(--bg-primary)',
                  borderColor: 'var(--border)',
                  color: 'var(--text-primary)'
                }}
              >
                <option value="all">All Rarities</option>
                <option value="Common">Common</option>
                <option value="Uncommon">Uncommon</option>
                <option value="Rare">Rare</option>
                <option value="Ultra Rare">Ultra Rare</option>
                <option value="Rainbow Rare">Rainbow Rare</option>
              </select>

              <select
                value={selectedType}
                onChange={(e) => setSelectedType(e.target.value)}
                className="px-4 py-3 rounded-lg border transition-all duration-200"
                style={{
                  backgroundColor: 'var(--bg-primary)',
                  borderColor: 'var(--border)',
                  color: 'var(--text-primary)'
                }}
              >
                <option value="all">All Types</option>
                <option value="Electric">Electric</option>
                <option value="Trainer">Trainer</option>
                <option value="Energy">Energy</option>
              </select>

              <select
                value={sortBy}
                onChange={(e) => setSortBy(e.target.value)}
                className="px-4 py-3 rounded-lg border transition-all duration-200"
                style={{
                  backgroundColor: 'var(--bg-primary)',
                  borderColor: 'var(--border)',
                  color: 'var(--text-primary)'
                }}
              >
                <option value="name">Sort by Name</option>
                <option value="cost">Sort by Price</option>
                <option value="rarity">Sort by Rarity</option>
                <option value="type">Sort by Type</option>
              </select>

              <div className="flex rounded-lg border" style={{ borderColor: 'var(--border)' }}>
                <button
                  onClick={() => setViewMode('grid')}
                  className={`p-3 rounded-l-lg transition-all duration-200 ${
                    viewMode === 'grid' 
                      ? 'gradient-bg-purple text-white' 
                      : 'bg-transparent'
                  }`}
                  style={viewMode !== 'grid' ? { color: 'var(--text-secondary)' } : {}}
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                  </svg>
                </button>
                <button
                  onClick={() => setViewMode('list')}
                  className={`p-3 rounded-r-lg transition-all duration-200 ${
                    viewMode === 'list' 
                      ? 'gradient-bg-purple text-white' 
                      : 'bg-transparent'
                  }`}
                  style={viewMode !== 'list' ? { color: 'var(--text-secondary)' } : {}}
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* Cards Display */}
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
            Cards ({sortedCards.length})
          </h2>
        </div>

        {viewMode === 'grid' ? (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
            {sortedCards.map(card => (
              <div 
                key={card.id} 
                className="group cursor-pointer transition-all duration-300 hover:scale-105"
                onClick={() => router.push(`/card/${card.id}`)}
              >
                <div className="relative rounded-xl overflow-hidden shadow-lg group-hover:shadow-xl transition-all duration-300">
                  <img
                    src={card.image}
                    alt={card.name}
                    className="w-full h-auto object-cover"
                    onError={(e) => {
                      e.target.src = 'https://via.placeholder.com/250x350/6366f1/ffffff?text=No+Image';
                    }}
                  />
                  {card.quantity > 1 && (
                    <div className="absolute top-2 right-2 bg-black bg-opacity-75 text-white text-xs px-2 py-1 rounded-full">
                      {card.quantity}x
                    </div>
                  )}
                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-3">
                    <div className="text-white text-sm font-medium truncate">
                      {card.name}
                    </div>
                    <div className="text-white text-opacity-75 text-xs">
                      ${card.cost}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="space-y-2">
            {sortedCards.map(card => (
              <div 
                key={card.id}
                className="flex items-center p-4 rounded-xl border transition-all duration-200 hover:shadow-md cursor-pointer"
                style={{
                  backgroundColor: 'var(--bg-secondary)',
                  borderColor: 'var(--border)'
                }}
                onClick={() => router.push(`/card/${card.id}`)}
              >
                <img
                  src={card.image}
                  alt={card.name}
                  className="w-16 h-22 object-cover rounded-lg mr-4"
                  onError={(e) => {
                    e.target.src = 'https://via.placeholder.com/64x88/6366f1/ffffff?text=No+Image';
                  }}
                />
                <div className="flex-1">
                  <h3 className="font-semibold" style={{ color: 'var(--text-primary)' }}>
                    {card.name}
                  </h3>
                  <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                    {card.set} • {card.rarity} • {card.type}
                  </div>
                </div>
                <div className="text-right">
                  <div className="font-semibold" style={{ color: 'var(--text-primary)' }}>
                    ${card.cost}
                  </div>
                  <div className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                    Qty: {card.quantity}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

        {sortedCards.length === 0 && (
          <div className="text-center py-12">
            <div className="text-6xl mb-4">🔍</div>
            <h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
              No cards found
            </h3>
            <p style={{ color: 'var(--text-secondary)' }}>
              Try adjusting your search or filter criteria
            </p>
          </div>
        )}
      </div>

      {/* Share Modal */}
      {showShareModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="p-6 rounded-2xl shadow-lg max-w-md w-full mx-4" style={{ backgroundColor: 'var(--bg-secondary)' }}>
            <h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
              Share Collection
            </h2>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                  Collection URL
                </label>
                <div className="flex">
                  <input
                    type="text"
                    value={window.location.href}
                    readOnly
                    className="flex-1 px-4 py-2 rounded-l-lg border"
                    style={{
                      backgroundColor: 'var(--bg-primary)',
                      borderColor: 'var(--border)',
                      color: 'var(--text-primary)'
                    }}
                  />
                  <button
                    onClick={handleCopyLink}
                    className="px-4 py-2 rounded-r-lg gradient-bg-purple text-white hover:shadow-lg transition-all duration-200"
                  >
                    Copy
                  </button>
                </div>
              </div>
            </div>
            <div className="flex space-x-3 mt-6">
              <button
                onClick={() => setShowShareModal(false)}
                className="flex-1 py-2 px-4 rounded-xl border transition-colors"
                style={{ 
                  borderColor: 'var(--border)', 
                  color: 'var(--text-secondary)' 
                }}
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </Layout>
  );
}