import { useState, useEffect } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { 
  Wallet as WalletIcon, 
  DollarSign, 
  TrendingUp, 
  ShoppingCart,
  Package,
  Calendar,
  Clock
} from 'lucide-react';

const Wallet = () => {
  const { user } = useAuth();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate loading
    setTimeout(() => setLoading(false), 1000);
  }, []);

  // Sample earnings data
  const earningsData = [
    {
      id: 1,
      name: 'Green Mart Apartment',
      amount: 99.00,
      fee: 10.00,
      date: '2024-01-15',
      status: 'completed'
    },
    {
      id: 2,
      name: 'Ocean View Villa',
      amount: 299.00,
      fee: 25.00,
      date: '2024-01-14',
      status: 'completed'
    },
    {
      id: 3,
      name: 'Mountain Cabin Resort',
      amount: 199.00,
      fee: 15.00,
      date: '2024-01-13',
      status: 'pending'
    },
    {
      id: 4,
      name: 'City Center Loft',
      amount: 149.00,
      fee: 12.00,
      date: '2024-01-12',
      status: 'completed'
    },
    {
      id: 5,
      name: 'Beach House Paradise',
      amount: 399.00,
      fee: 35.00,
      date: '2024-01-11',
      status: 'completed'
    }
  ];

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-3"></div>
          <div className="text-muted-foreground">Loading wallet...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="mobile-safe-top p-4 lg:p-6 space-y-4 lg:space-y-8">
      {/* Page Header */}
      <div className="mobile-header">
        <h1 className="mobile-title">Wallet</h1>
        <p className="text-muted-foreground text-sm">Manage your earnings and transactions</p>
      </div>

      {/* Statistics Cards */}
      <div className="mobile-grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
        <div className="mobile-card relative overflow-hidden">
          <div className="absolute top-0 right-0 w-12 h-12 lg:w-16 lg:h-16 opacity-10">
            <WalletIcon className="w-full h-full text-primary" />
          </div>
          <div className="text-xs lg:text-sm text-muted-foreground mb-1">Withdrawable Balance</div>
          <h3 className="text-lg lg:text-2xl font-bold">$5,899 <span className="text-xs lg:text-sm text-muted-foreground font-normal">(USD)</span></h3>
        </div>
        
        <div className="mobile-card relative overflow-hidden">
          <div className="absolute top-0 right-0 w-12 h-12 lg:w-16 lg:h-16 opacity-10">
            <TrendingUp className="w-full h-full text-primary" />
          </div>
          <div className="text-xs lg:text-sm text-muted-foreground mb-1">Total Earning</div>
          <h3 className="text-lg lg:text-2xl font-bold">$8,899 <span className="text-xs lg:text-sm text-muted-foreground font-normal">(USD)</span></h3>
        </div>
        
        <div className="mobile-card relative overflow-hidden">
          <div className="absolute top-0 right-0 w-12 h-12 lg:w-16 lg:h-16 opacity-10">
            <Clock className="w-full h-full text-primary" />
          </div>
          <div className="text-xs lg:text-sm text-muted-foreground mb-1">Pending Orders</div>
          <h3 className="text-lg lg:text-2xl font-bold">$1,299 <span className="text-xs lg:text-sm text-muted-foreground font-normal">(USD)</span></h3>
        </div>
        
        <div className="mobile-card relative overflow-hidden">
          <div className="absolute top-0 right-0 w-12 h-12 lg:w-16 lg:h-16 opacity-10">
            <Package className="w-full h-full text-primary" />
          </div>
          <div className="text-xs lg:text-sm text-muted-foreground mb-1">Total Orders</div>
          <h3 className="text-lg lg:text-2xl font-bold">659</h3>
        </div>
      </div>

      {/* Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
        {/* Earnings Table */}
        <div className="mobile-card overflow-hidden">
          <div className="p-4 border-b border-border">
            <h3 className="text-lg font-semibold">Listings Earning</h3>
          </div>
          <div className="max-h-96 overflow-y-auto">
            <div className="space-y-0">
              {earningsData.map((item) => (
                <div key={item.id} className="p-4 border-b border-border last:border-b-0 hover:bg-muted/50 transition-colors">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 lg:w-10 lg:h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                        <ShoppingCart className="w-4 h-4 lg:w-5 lg:h-5 text-primary" />
                      </div>
                      <div className="min-w-0 flex-1">
                        <h5 className="font-medium text-foreground text-sm lg:text-base truncate">{item.name}</h5>
                        <div className="flex flex-col lg:flex-row lg:items-center gap-1 lg:gap-3 text-xs lg:text-sm mt-1">
                          <span className="text-green-600 font-medium">${item.amount.toFixed(2)}</span>
                          <span className="text-primary">Fee: ${item.fee.toFixed(2)}</span>
                          <span className="text-muted-foreground">{item.date}</span>
                        </div>
                      </div>
                    </div>
                    <div className="mobile-badge">
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                        item.status === 'completed' 
                          ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' 
                          : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
                      }`}>
                        {item.status === 'completed' ? 'Completed' : 'Pending'}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Withdrawal History */}
        <div className="mobile-card overflow-hidden">
          <div className="p-4 border-b border-border">
            <h3 className="text-lg font-semibold">Recent Withdrawals</h3>
          </div>
          <div className="max-h-96 overflow-y-auto">
            <div className="space-y-0">
              <div className="p-4 border-b border-border hover:bg-muted/50 transition-colors">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 lg:w-10 lg:h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center flex-shrink-0">
                      <DollarSign className="w-4 h-4 lg:w-5 lg:h-5 text-green-600 dark:text-green-400" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <h5 className="font-medium text-foreground text-sm lg:text-base">Bank Transfer</h5>
                      <div className="flex flex-col lg:flex-row lg:items-center gap-1 lg:gap-3 text-xs lg:text-sm mt-1">
                        <span className="text-green-600 font-medium">$500.00</span>
                        <span className="text-muted-foreground">2024-01-10</span>
                      </div>
                    </div>
                  </div>
                  <div className="mobile-badge">
                    <span className="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                      Completed
                    </span>
                  </div>
                </div>
              </div>
              
              <div className="p-4 border-b border-border hover:bg-muted/50 transition-colors">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 lg:w-10 lg:h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center flex-shrink-0">
                      <DollarSign className="w-4 h-4 lg:w-5 lg:h-5 text-yellow-600 dark:text-yellow-400" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <h5 className="font-medium text-foreground text-sm lg:text-base">PayPal Transfer</h5>
                      <div className="flex flex-col lg:flex-row lg:items-center gap-1 lg:gap-3 text-xs lg:text-sm mt-1">
                        <span className="text-yellow-600 font-medium">$300.00</span>
                        <span className="text-muted-foreground">2024-01-08</span>
                      </div>
                    </div>
                  </div>
                  <div className="mobile-badge">
                    <span className="px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
                      Processing
                    </span>
                  </div>
                </div>
              </div>
              
              <div className="p-4 hover:bg-muted/50 transition-colors">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 lg:w-10 lg:h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center flex-shrink-0">
                      <DollarSign className="w-4 h-4 lg:w-5 lg:h-5 text-blue-600 dark:text-blue-400" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <h5 className="font-medium text-foreground text-sm lg:text-base">Card Transfer</h5>
                      <div className="flex flex-col lg:flex-row lg:items-center gap-1 lg:gap-3 text-xs lg:text-sm mt-1">
                        <span className="text-blue-600 font-medium">$750.00</span>
                        <span className="text-muted-foreground">2024-01-05</span>
                      </div>
                    </div>
                  </div>
                  <div className="mobile-badge">
                    <span className="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                      Completed
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="mobile-card">
        <h3 className="text-lg font-semibold mb-4 text-center">Wallet Actions</h3>
        <div className="mobile-grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
          <button className="mobile-btn bg-primary text-primary-foreground hover:bg-primary/90">
            <DollarSign className="w-4 h-4 lg:w-5 lg:h-5" />
            <span className="text-sm lg:text-base">Add Funds</span>
          </button>
          <button className="mobile-btn bg-green-600 text-white hover:bg-green-700">
            <TrendingUp className="w-4 h-4 lg:w-5 lg:h-5" />
            <span className="text-sm lg:text-base">Withdraw</span>
          </button>
          <button className="mobile-btn bg-blue-600 text-white hover:bg-blue-700">
            <Clock className="w-4 h-4 lg:w-5 lg:h-5" />
            <span className="text-sm lg:text-base">History</span>
          </button>
          <button className="mobile-btn border border-border text-foreground hover:bg-muted">
            <WalletIcon className="w-4 h-4 lg:w-5 lg:h-5" />
            <span className="text-sm lg:text-base">Settings</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Wallet;