import { useQuery } from '@tanstack/react-query'
import { Link } from 'react-router-dom'
import { Layout } from '@/components/layout/Layout'
import { Card } from '@/components/common/Card'
import { Loading } from '@/components/common/Loading'
import { walletApi } from '@/api/wallet'
import { spreadBetsApi } from '@/api/spread-bets'
import { useAuthStore } from '@/store'
import { formatCurrency } from '@/utils/formatters'
import {
  TrendingUp,
  Activity,
  Award,
  Wallet,
  User,
  Mail,
  Calendar,
  ArrowRight
} from 'lucide-react'

export const Profile = () => {
  const { user } = useAuthStore()

  const { data: wallet, isLoading: walletLoading } = useQuery({
    queryKey: ['wallet'],
    queryFn: walletApi.getWallet,
  })

  const { data: activeBets, isLoading: betsLoading } = useQuery({
    queryKey: ['myActiveSpreadBets'],
    queryFn: spreadBetsApi.getMyActiveBets,
  })

  if (walletLoading || betsLoading) {
    return <Layout><Loading /></Layout>
  }

  return (
    <Layout>
      <div className="space-y-8">
        {/* Profile Header */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center gap-6">
            <div className="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center">
              <User className="text-primary" size={40} />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-gray-900">
                {user?.display_name || user?.username}
              </h1>
              <p className="text-gray-600 flex items-center gap-2 mt-1">
                <Mail size={16} />
                {user?.email}
              </p>
              {user?.created_at && (
                <p className="text-sm text-gray-500 flex items-center gap-2 mt-1">
                  <Calendar size={14} />
                  Member since {new Date(user.created_at).toLocaleDateString()}
                </p>
              )}
            </div>
          </div>
        </div>

        {/* Stats Grid */}
        <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">Available 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-yellow-100 p-3 rounded-lg">
                <Activity className="text-yellow-600" size={24} />
              </div>
              <div>
                <p className="text-sm text-gray-600">In Escrow</p>
                <p className="text-2xl font-bold text-gray-900">
                  {wallet ? formatCurrency(wallet.escrow) : '$0.00'}
                </p>
              </div>
            </div>
          </Card>

          <Card>
            <div className="flex items-center gap-4">
              <div className="bg-success/10 p-3 rounded-lg">
                <TrendingUp 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-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>

        {/* Quick Links */}
        <div className="grid md:grid-cols-2 gap-6">
          <Link to="/wallet" className="block">
            <Card className="hover:shadow-lg transition-shadow cursor-pointer">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className="bg-primary/10 p-3 rounded-lg">
                    <Wallet className="text-primary" size={24} />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">Wallet</h3>
                    <p className="text-sm text-gray-600">Manage deposits and withdrawals</p>
                  </div>
                </div>
                <ArrowRight className="text-gray-400" size={20} />
              </div>
            </Card>
          </Link>

          <Link to="/my-bets" className="block">
            <Card className="hover:shadow-lg transition-shadow cursor-pointer">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className="bg-green-100 p-3 rounded-lg">
                    <Activity className="text-green-600" size={24} />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">My Bets</h3>
                    <p className="text-sm text-gray-600">View all your active and past bets</p>
                  </div>
                </div>
                <ArrowRight className="text-gray-400" size={20} />
              </div>
            </Card>
          </Link>
        </div>

        {/* Active Bets Preview */}
        {activeBets && activeBets.length > 0 && (
          <Card>
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-xl font-bold">Active Bets</h2>
              <Link to="/my-bets" className="text-primary hover:underline text-sm">
                View all
              </Link>
            </div>
            <div className="space-y-3">
              {activeBets.slice(0, 3).map((bet) => (
                <div key={bet.id} className="flex justify-between items-center p-4 border rounded-lg">
                  <div>
                    <h3 className="font-semibold">
                      {bet.event?.home_team} vs {bet.event?.away_team}
                    </h3>
                    <p className="text-sm text-gray-600">
                      {bet.team === 'home' ? bet.event?.home_team : bet.event?.away_team}{' '}
                      {bet.spread > 0 ? '+' : ''}{bet.spread}
                    </p>
                  </div>
                  <div className="text-right">
                    <p className="font-semibold text-primary">{formatCurrency(bet.stake_amount)}</p>
                    <p className="text-sm text-gray-500 capitalize">{bet.status}</p>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        )}
      </div>
    </Layout>
  )
}
