import { prisma } from "@/lib/prisma";
import Navigation from "@/components/Navigation";
import Link from "next/link";
import { redirect } from "next/navigation";
import { getSession } from "@/lib/auth-simple";
import { hasRole } from "@/lib/permissions";

export const dynamic = "force-dynamic";

export default async function MatchesListPage() {
  // Check if user is logged in
  const session = await getSession();
  if (!session) {
    redirect("/auth/login");
  }

  // Get user role
  const userId = session.user?.id || session.user?.userId;
  const user = await prisma.user.findUnique({
    where: { id: userId },
  });

  // Fetch all matches with player data
  const matches = await prisma.match.findMany({
    orderBy: { createdAt: "desc" },
    take: 50,
    include: {
      player1P1: true,
      player1P2: true,
      player2P1: true,
      player2P2: true,
      event: true,
    },
  });

  return (
    <div className="min-h-screen bg-gray-50">
      <Navigation />
      
      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          {/* Page Header */}
          <div className="bg-white shadow rounded-lg p-6 mb-6">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-2xl font-bold text-gray-900">All Matches</h1>
                <p className="text-gray-500 mt-1">
                  View recent matches played.
                </p>
              </div>
            </div>
          </div>

          {/* Matches List */}
          <div className="bg-white shadow rounded-lg overflow-hidden">
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Match ID
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Team 1
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Team 2
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Score
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Date
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {matches.map((match) => (
                    <tr key={match.id} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        #{match.id}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {match.player1P1?.name} & {match.player1P2?.name}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {match.player2P1?.name} & {match.player2P2?.name}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <span className="font-medium">{match.team1Score}</span>
                        <span className="text-gray-400 mx-1">-</span>
                        <span className="font-medium">{match.team2Score}</span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {match.playedAt
                          ? new Date(match.playedAt).toLocaleDateString()
                          : "-"}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm">
                        <Link
                          href={`/matches/${match.id}`}
                          className="text-green-600 hover:text-green-900"
                        >
                          View
                        </Link>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            
            {matches.length === 0 && (
              <div className="text-center py-12">
                <p className="text-gray-500">No matches found.</p>
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}