import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import {
  Trophy,
  Brain,
  Star,
  Award,
  Medal,
  Clock,
  ArrowLeft,
  Settings,
  BarChart3,
  Users,
  Sparkles,
} from "lucide-react";
import { auth } from "@/server/auth";
import Avatar from "@/components/avatar";
import { formatDate } from "@/lib/utils";

export default async function ProfilePage() {
  const session = await auth();

  // Mock user data - in a real app this would come from a database
  const user = {
    ...session?.user,
    level: 24,
    xp: 7840,
    xpToNextLevel: 10000,
    gamesPlayed: 187,
    gamesWon: 112,
    winRate: 59.9,
    badges: [
      { name: "Quiz Champion", icon: Trophy, color: "text-yellow-400" },
      { name: "Knowledge Seeker", icon: Brain, color: "text-blue-400" },
      { name: "Fast Thinker", icon: Clock, color: "text-green-400" },
      { name: "Team Player", icon: Users, color: "text-purple-400" },
    ],
    recentGames: [
      {
        id: 1,
        topic: "Science",
        position: "1st",
        score: 950,
        date: "2 hours ago",
      },
      {
        id: 2,
        topic: "Movies",
        position: "3rd",
        score: 720,
        date: "Yesterday",
      },
      {
        id: 3,
        topic: "History",
        position: "1st",
        score: 880,
        date: "3 days ago",
      },
    ],
  };

  // Calculate XP progress percentage
  const xpProgress = (user.xp / user.xpToNextLevel) * 100;

  return (
    <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-8">
      <div className="grid gap-6 md:grid-cols-3">
        {/* Profile Card */}
        <div className="w-full md:col-span-1">
          <div className="container-bg sticky top-4 flex w-full flex-col items-center p-6">
            <div className="relative">
              <div className="h-32 w-32 rounded-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 p-1">
                <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-full bg-indigo-900">
                  <Avatar
                    src={user.image!}
                    fb={user.name!}
                    className="size-full"
                  />
                </div>
              </div>
              <div className="absolute -right-1 -bottom-1 flex h-10 w-10 items-center justify-center rounded-full border-2 border-indigo-900 bg-yellow-400 font-bold text-indigo-900">
                {user.level}
              </div>
            </div>

            <h1 className="mt-4 w-full truncate overflow-hidden text-center text-2xl font-bold text-white">
              {user.name}
            </h1>

            <p className="text-sm text-indigo-200">
              Member since{" "}
              {new Date(user?.joinedAt!)?.toLocaleDateString("en-EN", {
                year: "numeric",
                month: "short",
              })}
            </p>

            {/* XP Progress */}
            <div className="mt-6 w-full">
              {/* <div className="mb-1 flex justify-between text-xs text-indigo-200">
                <span>XP: {user.xp.toLocaleString()}</span>
                <span>{user.xpToNextLevel.toLocaleString()}</span>
              </div> */}
              <div className="h-3 w-full overflow-hidden rounded-full bg-indigo-900/50">
                <div
                  className="h-full rounded-full bg-gradient-to-r from-pink-500 to-yellow-400"
                  style={{ width: `${xpProgress}%` }}
                ></div>
              </div>
              <div className="mt-1 text-center text-xs text-indigo-200">
                {Math.floor(user.xpToNextLevel - user.xp).toLocaleString()} XP
                to level {user.level + 1}
              </div>
            </div>

            {/* Stats */}
            <div className="mt-6 grid w-full grid-cols-2 gap-2">
              <div className="rounded-lg bg-white/5 p-2 text-center">
                <p className="text-2xl font-bold text-white">
                  {user.gamesPlayed}
                </p>
                <p className="text-xs text-indigo-200">Games</p>
              </div>
              <div className="rounded-lg bg-white/5 p-2 text-center">
                <p className="text-2xl font-bold text-white">{user.gamesWon}</p>
                <p className="text-xs text-indigo-200">Wins</p>
              </div>
              <div className="col-span-2 rounded-lg bg-white/5 p-2 text-center">
                <p className="text-2xl font-bold text-white">{user.winRate}%</p>
                <p className="text-xs text-indigo-200">Win Rate</p>
              </div>
            </div>
            {session ? (
              <Button
                asChild
                variant={"party"}
                className="mt-6 w-full border-purple-700 bg-gradient-to-r from-pink-500 to-purple-600 text-white shadow-lg shadow-purple-600/30 hover:border-b-2 hover:from-pink-600 hover:to-purple-700"
              >
                <Link href={`/profile/${session.user.id}/edit`}>
                  Edit Profile
                </Link>
              </Button>
            ) : null}
          </div>
        </div>

        {/* Achievements and Recent Games */}
        <div className="space-y-6 md:col-span-2">
          {/* Achievements */}
          <div className="container-bg p-6">
            <div className="mb-4 flex items-center">
              <Award className="mr-2 h-6 w-6 text-yellow-400" />
              <h2 className="text-xl font-bold text-white">Achievements</h2>
            </div>

            <div className="grid grid-cols-2 gap-4">
              {user.badges.map((badge, index) => (
                <div key={index} className="container-bg flex items-center p-3">
                  <div className={`${badge.color} mr-3`}>
                    <badge.icon size={24} />
                  </div>
                  <div>
                    <p className="font-medium text-white">{badge.name}</p>
                  </div>
                </div>
              ))}

              <div className="flex items-center rounded-xl border border-dashed border-white/10 bg-white/5 p-3">
                <div className="mr-3 text-indigo-300/50">
                  <Medal size={24} />
                </div>
                <div>
                  <p className="font-medium text-indigo-300/50">
                    Locked Achievement
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Stats Overview */}
          <div className="container-bg p-6">
            <div className="mb-4 flex items-center">
              <BarChart3 className="mr-2 h-6 w-6 text-blue-400" />
              <h2 className="text-xl font-bold text-white">Stats Overview</h2>
            </div>

            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div className="rounded-xl border border-white/10 bg-white/5 p-4">
                <h3 className="mb-2 text-sm text-indigo-200">Top Categories</h3>
                <div className="space-y-2">
                  <div>
                    <div className="mb-1 flex justify-between text-xs">
                      <span className="text-white">Science</span>
                      <span className="text-indigo-200">92%</span>
                    </div>
                    <div className="h-2 w-full overflow-hidden rounded-full bg-indigo-900/50">
                      <div
                        className="h-full rounded-full bg-green-500"
                        style={{ width: "92%" }}
                      ></div>
                    </div>
                  </div>
                  <div>
                    <div className="mb-1 flex justify-between text-xs">
                      <span className="text-white">History</span>
                      <span className="text-indigo-200">78%</span>
                    </div>
                    <div className="h-2 w-full overflow-hidden rounded-full bg-indigo-900/50">
                      <div
                        className="h-full rounded-full bg-blue-500"
                        style={{ width: "78%" }}
                      ></div>
                    </div>
                  </div>
                  <div>
                    <div className="mb-1 flex justify-between text-xs">
                      <span className="text-white">Movies</span>
                      <span className="text-indigo-200">65%</span>
                    </div>
                    <div className="h-2 w-full overflow-hidden rounded-full bg-indigo-900/50">
                      <div
                        className="h-full rounded-full bg-purple-500"
                        style={{ width: "65%" }}
                      ></div>
                    </div>
                  </div>
                </div>
              </div>

              <div className="rounded-xl border border-white/10 bg-white/5 p-4">
                <h3 className="mb-2 text-sm text-indigo-200">Response Time</h3>
                <div className="flex h-24 items-center justify-center">
                  <div className="text-center">
                    <p className="text-3xl font-bold text-white">3.2s</p>
                    <p className="text-xs text-indigo-200">
                      Average response time
                    </p>
                    <p className="mt-1 text-xs text-green-400">
                      Faster than 75% of players
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Recent Games */}
          <div className="container-bg p-6">
            <div className="mb-4 flex items-center">
              <Clock className="mr-2 h-6 w-6 text-green-400" />
              <h2 className="text-xl font-bold text-white">Recent Games</h2>
            </div>

            <div className="space-y-3">
              {user.recentGames.map((game) => (
                <div
                  key={game.id}
                  className="flex items-center rounded-xl border border-white/10 bg-white/5 p-4"
                >
                  <div className="mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-800/50">
                    {game.position === "1st" ? (
                      <Trophy className="h-6 w-6 text-yellow-400" />
                    ) : game.position === "2nd" ? (
                      <Medal className="h-6 w-6 text-gray-300" />
                    ) : (
                      <Medal className="h-6 w-6 text-amber-700" />
                    )}
                  </div>
                  <div className="flex-1">
                    <div className="flex justify-between">
                      <h3 className="font-medium text-white">{game.topic}</h3>
                      <span className="text-sm text-indigo-200">
                        {game.date}
                      </span>
                    </div>
                    <div className="mt-1 flex justify-between">
                      <span className="text-sm text-indigo-300">
                        Position:{" "}
                        <span className="text-white">{game.position}</span>
                      </span>
                      <span className="text-sm text-indigo-300">
                        Score: <span className="text-white">{game.score}</span>
                      </span>
                    </div>
                  </div>
                </div>
              ))}

              <Button
                variant="ghost"
                className="mt-2 w-full text-indigo-200 hover:bg-white/10 hover:text-white"
              >
                View All Games
              </Button>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}
