import { useLoaderData } 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";

export async function loader({ params }: { params: { seasonId: string } }) {
  const { seasonId } = params;
  
  if (!seasonId) {
    throw new Response("Season ID is required", { status: 400 });
  }

  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 });
  }

  // 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));

  return {
    season,
    draftSlots,
    draftPicks,
    availableParticipants,
  };
}

export default function DraftRoom() {
  const { season, draftSlots, draftPicks, availableParticipants } =
    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 team on the clock
  const currentDraftSlot = draftSlots[(currentPick - 1) % draftSlots.length];
  const currentRound = Math.ceil(currentPick / draftSlots.length);

  return (
    <div className="container mx-auto p-4">
      {/* Header */}
      <div className="mb-6">
        <div className="flex items-center justify-between mb-2">
          <h1 className="text-3xl font-bold">
            {season.league.name} - {season.year} Draft
          </h1>
          <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>
        </div>
        <div className="flex gap-4 text-sm text-gray-600">
          <span>Round: {currentRound}</span>
          <span>Pick: {currentPick}</span>
          <span>Status: {season.status}</span>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Column: Draft Board */}
        <div className="lg:col-span-2">
          <Card className="p-4">
            <h2 className="text-xl font-semibold mb-4">Draft Board</h2>
            
            {/* Current Pick */}
            {currentDraftSlot && (
              <div className="mb-6 p-4 bg-blue-50 border-2 border-blue-500 rounded-lg">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-gray-600">Now Picking:</p>
                    <p className="text-2xl font-bold">{currentDraftSlot.team.name}</p>
                  </div>
                  <Badge variant="default" className="text-lg px-4 py-2">
                    Pick #{currentPick}
                  </Badge>
                </div>
              </div>
            )}

            {/* Recent Picks */}
            <div className="space-y-2">
              <h3 className="font-semibold mb-2">Recent Picks</h3>
              {picks.length === 0 ? (
                <p className="text-gray-500 text-sm">No picks yet...</p>
              ) : (
                <div className="space-y-2">
                  {picks
                    .slice()
                    .reverse()
                    .slice(0, 10)
                    .map((pick: any) => (
                      <div
                        key={pick.id}
                        className="flex items-center justify-between p-3 bg-gray-50 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-gray-600">
                              {pick.sport.name}
                            </p>
                          </div>
                        </div>
                        <div className="text-right">
                          <p className="font-medium">{pick.team.name}</p>
                          <p className="text-xs text-gray-500">
                            Round {pick.round}
                          </p>
                        </div>
                      </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>
  );
}