import { useState, useContext } from 'react';
import Layout from '../components/Layout';

export default function Dashboard() {
  const user = {
    email: 'me@randallstillwell.com',
    role: 'user'
  };

  const [searchQuery, setSearchQuery] = useState('');

  return (
    <Layout user={user} showSearch={true}>
      {/* Dashboard Content */}
      <div className="p-6">
        {/* Dashboard Header */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary-light)' }}>
              Dashboard
            </h1>
            <p className="text-lg" style={{ color: 'var(--text-secondary-light)' }}>
              Track your collection, build decks, and connect with the TCG community.
            </p>
          </div>
          
          {/* Action Buttons */}
          <div className="flex space-x-4">
            <button className="action-btn-primary flex items-center space-x-2">
              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
              <span>+ Add Cards</span>
            </button>
            <button className="action-btn-secondary flex items-center space-x-2">
              <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              <span>Scan Cards</span>
            </button>
          </div>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <div className="card">
            <div className="flex items-center">
              <div className="p-3 rounded-2xl mr-4" style={{ backgroundColor: 'var(--accent-blue-light)' }}>
                <svg className="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                </svg>
              </div>
              <div>
                <p className="text-2xl font-bold" style={{ color: 'var(--text-primary-light)' }}>247</p>
                <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>Total Cards</p>
                <p className="text-xs text-green-500">+12 from last month</p>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="flex items-center">
              <div className="p-3 rounded-2xl mr-4" style={{ backgroundColor: 'var(--accent-purple-light)' }}>
                <svg className="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                </svg>
              </div>
              <div>
                <p className="text-2xl font-bold" style={{ color: 'var(--text-primary-light)' }}>$2,847.5</p>
                <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>Collection Value</p>
                <p className="text-xs text-green-500">+$245 from last month</p>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="flex items-center">
              <div className="p-3 rounded-2xl mr-4" style={{ backgroundColor: 'var(--accent-pink-light)' }}>
                <svg className="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
              </div>
              <div>
                <p className="text-2xl font-bold" style={{ color: 'var(--text-primary-light)' }}>12</p>
                <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>Total Decks</p>
                <p className="text-xs text-green-500">+2 from last month</p>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="flex items-center">
              <div className="p-3 rounded-2xl mr-4" style={{ backgroundColor: 'var(--accent-blue-light)' }}>
                <svg className="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
                </svg>
              </div>
              <div>
                <p className="text-2xl font-bold" style={{ color: 'var(--text-primary-light)' }}>8</p>
                <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>Followers</p>
                <p className="text-xs text-green-500">+3 from last month</p>
              </div>
            </div>
          </div>
        </div>

        {/* Dashboard Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Recent Cards */}
          <div className="card">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold" style={{ color: 'var(--text-primary-light)' }}>Recent Cards</h3>
              <button className="text-sm gradient-text-blue hover:underline">View All</button>
            </div>
            <div className="space-y-4">
              <div className="flex items-center p-4 rounded-2xl" style={{ backgroundColor: 'var(--bg-tertiary-light)' }}>
                <div className="w-10 h-10 rounded-lg mr-4 flex items-center justify-center" style={{ backgroundColor: 'var(--accent-purple-light)' }}>
                  <span className="text-white font-bold text-sm">MTG</span>
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold" style={{ color: 'var(--text-primary-light)' }}>Black Lotus</h4>
                  <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>Mythic • MTG</p>
                </div>
                <div className="text-right">
                  <p className="font-semibold" style={{ color: 'var(--text-primary-light)' }}>$25,000 Value</p>
                </div>
              </div>
              <div className="flex items-center p-4 rounded-2xl" style={{ backgroundColor: 'var(--bg-tertiary-light)' }}>
                <div className="w-10 h-10 rounded-lg mr-4 flex items-center justify-center" style={{ backgroundColor: 'var(--accent-blue-light)' }}>
                  <span className="text-white font-bold text-sm">PKM</span>
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold" style={{ color: 'var(--text-primary-light)' }}>Charizard</h4>
                  <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>Holo • Pokemon</p>
                </div>
                <div className="text-right">
                  <p className="font-semibold" style={{ color: 'var(--text-primary-light)' }}>$350 Value</p>
                </div>
              </div>
              <div className="flex items-center p-4 rounded-2xl" style={{ backgroundColor: 'var(--bg-tertiary-light)' }}>
                <div className="w-10 h-10 rounded-lg mr-4 flex items-center justify-center" style={{ backgroundColor: 'var(--accent-pink-light)' }}>
                  <span className="text-white font-bold text-sm">LOR</span>
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold" style={{ color: 'var(--text-primary-light)' }}>Mickey Mouse</h4>
                  <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>Legendary • Lorcana</p>
                </div>
                <div className="text-right">
                  <p className="font-semibold" style={{ color: 'var(--text-primary-light)' }}>$45 Value</p>
                </div>
              </div>
            </div>
          </div>

          {/* Collection Goals */}
          <div className="card">
            <h3 className="text-xl font-semibold mb-6" style={{ color: 'var(--text-primary-light)' }}>Collection Goals</h3>
            <div className="space-y-4">
              <div>
                <div className="flex justify-between mb-2">
                  <span className="text-sm font-medium" style={{ color: 'var(--text-primary-light)' }}>Complete Modern Masters Set</span>
                  <span className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>75/100</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div className="h-2 rounded-full" style={{ backgroundColor: 'var(--accent-purple-light)', width: '75%' }}></div>
                </div>
                <p className="text-xs mt-1" style={{ color: 'var(--text-secondary-light)' }}>75% complete</p>
              </div>
              <div>
                <div className="flex justify-between mb-2">
                  <span className="text-sm font-medium" style={{ color: 'var(--text-primary-light)' }}>Build 5 Competitive Decks</span>
                  <span className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>3/5</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div className="h-2 rounded-full" style={{ backgroundColor: 'var(--accent-purple-light)', width: '60%' }}></div>
                </div>
                <p className="text-xs mt-1" style={{ color: 'var(--text-secondary-light)' }}>60% complete</p>
              </div>
              <div>
                <div className="flex justify-between mb-2">
                  <span className="text-sm font-medium" style={{ color: 'var(--text-primary-light)' }}>Reach $5000 Collection Value</span>
                  <span className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>2847.5/5000</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div className="h-2 rounded-full" style={{ backgroundColor: 'var(--accent-purple-light)', width: '57%' }}></div>
                </div>
                <p className="text-xs mt-1" style={{ color: 'var(--text-secondary-light)' }}>57% complete</p>
              </div>
            </div>
          </div>

          {/* Recent Decks */}
          <div className="card">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold" style={{ color: 'var(--text-primary-light)' }}>Recent Decks</h3>
              <button className="text-sm gradient-text-blue hover:underline">View All</button>
            </div>
            <div className="space-y-4">
              <div className="flex items-center p-4 rounded-2xl" style={{ backgroundColor: 'var(--bg-tertiary-light)' }}>
                <div className="w-10 h-10 rounded-lg mr-4 flex items-center justify-center" style={{ backgroundColor: 'var(--accent-purple-light)' }}>
                  <span className="text-white font-bold text-sm">MTG</span>
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold" style={{ color: 'var(--text-primary-light)' }}>Blue Control</h4>
                  <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>60 cards</p>
                </div>
              </div>
              <div className="flex items-center p-4 rounded-2xl" style={{ backgroundColor: 'var(--bg-tertiary-light)' }}>
                <div className="w-10 h-10 rounded-lg mr-4 flex items-center justify-center" style={{ backgroundColor: 'var(--accent-blue-light)' }}>
                  <span className="text-white font-bold text-sm">PKM</span>
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold" style={{ color: 'var(--text-primary-light)' }}>Fire Red</h4>
                  <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>60 cards</p>
                </div>
              </div>
            </div>
          </div>

          {/* Community */}
          <div className="card">
            <h3 className="text-xl font-semibold mb-6" style={{ color: 'var(--text-primary-light)' }}>Community</h3>
            <div className="space-y-4">
              <div className="flex items-center p-4 rounded-2xl" style={{ backgroundColor: 'var(--bg-tertiary-light)' }}>
                <div className="w-10 h-10 rounded-full mr-4 flex items-center justify-center bg-green-500">
                  <svg className="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <div className="flex-1">
                  <h4 className="font-semibold" style={{ color: 'var(--text-primary-light)' }}>New follower</h4>
                  <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>@cardcollector joined</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}