import { useQuery } from '@tanstack/react-query'
import { Layout } from '@/components/layout/Layout'
import { Card } from '@/components/common/Card'
import { Loading } from '@/components/common/Loading'
import { betsApi } from '@/api/bets'
import { walletApi } from '@/api/wallet'
import { useAuthStore } from '@/store'
import { formatCurrency } from '@/utils/formatters'
import { TrendingUp, Activity, Award, Wallet } from 'lucide-react'

export const Dashboard = () => {
  const { user } = useAuthStore()
  const { data: wallet } = useQuery({
    queryKey: ['wallet'],
    queryFn: walletApi.getWallet,
  })
  const { data: activeBets, isLoading } = useQuery({
    queryKey: ['myActiveBets'],
    queryFn: betsApi.getMyActiveBets,
  })

  if (isLoading) return <Layout><Loading /></Layout>

  return (
    <Layout>
      <div className="space-y-8">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">
            Welcome back, {user?.display_name || user?.username}!
          </h1>
          <p className="text-gray-600 mt-2">Here's an overview of your betting activity</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Card>
            <div className="flex items-center gap-4">
              <div className="bg-primary/10 p-3 rounded-lg">
                <Wallet className="text-primary" size={24} />
              </div>
              <div>
                <p className="text-sm text-gray-600">Balance</p>
                <p className="text-2xl font-bold text-gray-900">
                  {wallet ? formatCurrency(wallet.balance) : '$0.00'}
                </p>
              </div>
            </div>
          </Card>

          <Card>
            <div className="flex items-center gap-4">
              <div className="bg-success/10 p-3 rounded-lg">
                <Activity className="text-success" size={24} />
              </div>
              <div>
                <p className="text-sm text-gray-600">Active Bets</p>
                <p className="text-2xl font-bold text-gray-900">{activeBets?.length || 0}</p>
              </div>
            </div>
          </Card>

          <Card>
            <div className="flex items-center gap-4">
              <div className="bg-warning/10 p-3 rounded-lg">
                <TrendingUp className="text-warning" size={24} />
              </div>
              <div>
                <p className="text-sm text-gray-600">Total Bets</p>
                <p className="text-2xl font-bold text-gray-900">{user?.total_bets || 0}</p>
              </div>
            </div>
          </Card>

          <Card>
            <div className="flex items-center gap-4">
              <div className="bg-purple-100 p-3 rounded-lg">
                <Award className="text-purple-600" size={24} />
              </div>
              <div>
                <p className="text-sm text-gray-600">Win Rate</p>
                <p className="text-2xl font-bold text-gray-900">
                  {user ? `${(user.win_rate * 100).toFixed(0)}%` : '0%'}
                </p>
              </div>
            </div>
          </Card>
        </div>

        <Card>
          <h2 className="text-xl font-bold mb-4">Active Bets</h2>
          {activeBets && activeBets.length > 0 ? (
            <div className="space-y-3">
              {activeBets.map((bet) => (
                <div key={bet.id} className="flex justify-between items-center p-4 border rounded-lg">
                  <div>
                    <h3 className="font-semibold">{bet.title}</h3>
                    <p className="text-sm text-gray-600">{bet.event_name}</p>
                  </div>
                  <div className="text-right">
                    <p className="font-semibold text-primary">{formatCurrency(bet.stake_amount)}</p>
                    <p className="text-sm text-gray-500">{bet.status}</p>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <p className="text-center text-gray-500 py-8">No active bets. Check out the marketplace!</p>
          )}
        </Card>
      </div>
    </Layout>
  )
}
