import { useLoaderData, Link } from "react-router";
import { eq, and, asc, notInArray } from "drizzle-orm";
import { database } from "~/database/context";
import * as schema from "~/database/schema";
import { useDraftSocket } from "~/hooks/useDraftSocket";
import { useEffect, useState } from "react";
import { Card } from "~/components/ui/card";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { getAuth } from "@clerk/react-router/server";
import { getTeamQueue } from "~/models/draft-queue";

export async function loader(args: any) {
  const { params } = args;
  const { seasonId, leagueId } = params;
  const auth = await getAuth(args);
  const userId = (auth as any).userId as string | null;
  
  if (!seasonId) {
    throw new Response("Season ID is required", { status: 400 });
  }

  if (!userId) {
    throw new Response("You must be logged in to view the draft room", { status: 401 });
  }

  const db = database();

  // Get season details
  const season = await db.query.seasons.findFirst({
    where: eq(schema.seasons.id, seasonId),
    with: {
      league: true,
      teams: true,
    },
  });

  if (!season) {
    throw new Response("Season not found", { status: 404 });
  }

  // Verify user access: must be team owner or commissioner
  const userTeam = season.teams.find((team: any) => team.ownerId === userId);
  const isCommissioner = await db.query.commissioners.findFirst({
    where: and(
      eq(schema.commissioners.leagueId, leagueId),
      eq(schema.commissioners.userId, userId)
    ),
  });

  if (!userTeam && !isCommissioner) {
    throw new Response("You do not have access to this draft room", { status: 403 });
  }

  // Get draft slots (draft order) - using select instead of query builder
  const draftSlots = await db
    .select({
      id: schema.draftSlots.id,
      draftOrder: schema.draftSlots.draftOrder,
      team: schema.teams,
    })
    .from(schema.draftSlots)
    .innerJoin(schema.teams, eq(schema.draftSlots.teamId, schema.teams.id))
    .where(eq(schema.draftSlots.seasonId, seasonId))
    .orderBy(asc(schema.draftSlots.draftOrder));

  // Get all draft picks - using select instead of query builder
  const draftPicks = await db
    .select({
      id: schema.draftPicks.id,
      pickNumber: schema.draftPicks.pickNumber,
      round: schema.draftPicks.round,
      pickInRound: schema.draftPicks.pickInRound,
      timeUsed: schema.draftPicks.timeUsed,
      team: schema.teams,
      participant: schema.participants,
      sport: schema.sports,
    })
    .from(schema.draftPicks)
    .innerJoin(schema.teams, eq(schema.draftPicks.teamId, schema.teams.id))
    .innerJoin(schema.participants, eq(schema.draftPicks.participantId, schema.participants.id))
    .innerJoin(schema.sportsSeasons, eq(schema.participants.sportsSeasonId, schema.sportsSeasons.id))
    .innerJoin(schema.sports, eq(schema.sportsSeasons.sportId, schema.sports.id))
    .where(eq(schema.draftPicks.seasonId, seasonId))
    .orderBy(asc(schema.draftPicks.pickNumber));

  // Get available participants (not yet picked)
  const pickedParticipantIds = draftPicks.map((p) => p.participant.id);
  const availableParticipants = await db
    .select({
      id: schema.participants.id,
      name: schema.participants.name,
      sport: schema.sports,
    })
    .from(schema.participants)
    .innerJoin(schema.sportsSeasons, eq(schema.participants.sportsSeasonId, schema.sportsSeasons.id))
    .innerJoin(schema.sports, eq(schema.sportsSeasons.sportId, schema.sports.id))
    .where(
      and(
        eq(schema.participants.sportsSeasonId, season.templateId!),
        pickedParticipantIds.length > 0
          ? notInArray(schema.participants.id, pickedParticipantIds)
          : undefined
      )
    )
    .orderBy(asc(schema.participants.name));

  // Load user's team queue if they have a team
  const userQueue = userTeam ? await getTeamQueue(userTeam.id) : [];

  return {
    season,
    draftSlots,
    draftPicks,
    availableParticipants,
    userTeam,
    userQueue,
    isCommissioner: !!isCommissioner,
    currentUserId: userId,
  };
}

export default function DraftRoom() {
  const { season, draftSlots, draftPicks, availableParticipants, userTeam: _userTeam, isCommissioner: _isCommissioner } =
    useLoaderData<typeof loader>();
  const { isConnected, on, off } = useDraftSocket(season.id);
  const [picks, setPicks] = useState(draftPicks);
  const [currentPick, setCurrentPick] = useState(season.currentPickNumber || 1);

  // Listen for new picks from other users
  useEffect(() => {
    const handlePickMade = (data: any) => {
      console.log("Pick made:", data);
      setPicks((prev: any) => [...prev, data.pick]);
      setCurrentPick(data.nextPickNumber);
    };

    on("pick-made", handlePickMade);

    return () => {
      off("pick-made", handlePickMade);
    };
  }, [on, off]);

  // Calculate current round
  const currentRound = Math.ceil(currentPick / draftSlots.length);

  // Generate snake draft grid structure
  const generateDraftGrid = () => {
    const teamCount = draftSlots.length;
    const rounds = season.draftRounds;
    const grid: Array<Array<{ pickNumber: number; round: number; pickInRound: number; teamId: string; pick?: any }>> = [];

    for (let round = 1; round <= rounds; round++) {
      const roundPicks = [];
      const isOddRound = round % 2 === 1;
      
      for (let i = 0; i < teamCount; i++) {
        const pickInRound = i + 1;
        const teamIndex = isOddRound ? i : teamCount - 1 - i;
        const pickNumber = (round - 1) * teamCount + pickInRound;
        const teamId = draftSlots[teamIndex]?.team.id;
        
        // Find if this pick has been made
        const pick = picks.find((p: any) => p.pickNumber === pickNumber);
        
        roundPicks.push({
          pickNumber,
          round,
          pickInRound,
          teamId,
          pick,
        });
      }
      grid.push(roundPicks);
    }
    
    return grid;
  };

  const draftGrid = generateDraftGrid();

  return (
    <div className="min-h-screen bg-background">
      {/* Standalone Header - No Main Nav */}
      <div className="border-b bg-card">
        <div className="w-full px-4 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold">
                {season.league.name} - {season.year} Draft
              </h1>
              <div className="flex gap-4 text-sm text-muted-foreground mt-1">
                <span>Round: {currentRound}</span>
                <span>Pick: {currentPick}</span>
                <span className="capitalize">{season.status.replace("_", " ")}</span>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <div className="flex items-center gap-2">
                <div
                  className={`w-3 h-3 rounded-full ${
                    isConnected ? "bg-green-500" : "bg-red-500"
                  }`}
                />
                <span className="text-sm font-medium">
                  {isConnected ? "Live" : "Disconnected"}
                </span>
              </div>
              <Button variant="outline" asChild>
                <Link to={`/leagues/${season.leagueId}`}>
                  Exit Draft Room
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="w-full px-4 py-4">
        {/* Draft Grid - Horizontally Scrollable */}
        <div className="mb-6">
          <Card className="p-4">
            <h2 className="text-xl font-semibold mb-4">Draft Grid</h2>
            <div className="overflow-x-auto">
              <div className="w-full">
                {/* Team Headers */}
                <div className="flex gap-2 mb-2">
                  {draftSlots.map((slot) => (
                    <div
                      key={slot.id}
                      className="flex-1 min-w-32 text-center"
                    >
                      <div className="font-semibold text-sm truncate px-2">
                        {slot.team.name}
                      </div>
                      <div className="text-xs text-muted-foreground">
                        Pick {slot.draftOrder}
                      </div>
                    </div>
                  ))}
                </div>

                {/* Draft Grid Rows */}
                <div className="space-y-2">
                  {draftGrid.map((roundPicks, roundIndex) => {
                    const round = roundIndex + 1;
                    const isEvenRound = round % 2 === 0;
                    const displayPicks = isEvenRound ? [...roundPicks].reverse() : roundPicks;
                    
                    return (
                    <div key={roundIndex} className="flex gap-2">
                      {displayPicks.map((cell) => {
                        const isCurrent = cell.pickNumber === currentPick;
                        const isPicked = !!cell.pick;
                        
                        return (
                          <div
                            key={cell.pickNumber}
                            className={`flex-1 min-w-32 h-20 border-2 rounded-lg p-2 transition-all ${
                              isCurrent
                                ? "border-blue-500 bg-blue-50 dark:bg-blue-950 shadow-lg"
                                : isPicked
                                ? "border-green-500 bg-green-50 dark:bg-green-950"
                                : "border-gray-300 bg-white dark:bg-gray-900"
                            }`}
                            title={`Overall Pick #${cell.pickNumber}`}
                          >
                            <div className="text-xs font-mono text-muted-foreground mb-1">
                              {cell.round}.{String(cell.pickInRound).padStart(2, "0")}
                            </div>
                            {isPicked ? (
                              <div className="text-xs">
                                <div className="font-semibold truncate">
                                  {cell.pick.participant.name}
                                </div>
                                <div className="text-muted-foreground truncate">
                                  {cell.pick.sport.name}
                                </div>
                              </div>
                            ) : isCurrent ? (
                              <div className="text-xs font-semibold text-blue-600 dark:text-blue-400">
                                On Clock
                              </div>
                            ) : null}
                          </div>
                        );
                      })}
                    </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </Card>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Recent Picks */}
        <div>
          <Card className="p-4">
            <h2 className="text-xl font-semibold mb-4">Recent Picks</h2>
            {picks.length === 0 ? (
              <p className="text-muted-foreground text-sm">No picks yet...</p>
            ) : (
              <div className="space-y-2 max-h-96 overflow-y-auto">
                {picks
                  .slice()
                  .reverse()
                  .slice(0, 10)
                  .map((pick: any) => (
                    <div
                      key={pick.id}
                      className="flex items-center justify-between p-3 bg-muted rounded-lg"
                    >
                      <div className="flex items-center gap-3">
                        <Badge variant="outline">#{pick.pickNumber}</Badge>
                        <div>
                          <p className="font-semibold">
                            {pick.participant.name}
                          </p>
                          <p className="text-sm text-muted-foreground">
                            {pick.sport.name}
                          </p>
                        </div>
                      </div>
                      <div className="text-right">
                        <p className="font-medium">{pick.team.name}</p>
                        <p className="text-xs text-muted-foreground">
                          Round {pick.round}
                        </p>
                      </div>
                    </div>
                  ))}
              </div>
            )}
          </Card>
        </div>

        {/* Right Column: Available Participants */}
        <div>
          <Card className="p-4">
            <h2 className="text-xl font-semibold mb-4">
              Available Participants ({availableParticipants.length})
            </h2>
            <div className="space-y-2 max-h-[600px] overflow-y-auto">
              {availableParticipants.map((participant: any) => (
                <div
                  key={participant.id}
                  className="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer transition-colors"
                >
                  <p className="font-semibold">{participant.name}</p>
                  <p className="text-sm text-gray-600">
                    {participant.sport.name}
                  </p>
                </div>
              ))}
            </div>
          </Card>
        </div>
      </div>
      </div>
    </div>
  );
}