import { data, redirect } from "react-router";
import type { LoaderFunctionArgs } from "react-router";
import { getAuth } from "@clerk/react-router/server";
import { useEffect, useState } from "react";
import {
  findLeagueById,
  findCurrentSeason,
  findTeamsBySeasonId,
  isCommissioner,
  findDraftSlotsBySeasonId,
  getDraftPicks,
  getSeasonTimers,
  findSeasonWithSportsSeasons,
  getTeamQueue,
  getTeamForPick,
} from "~/models";
import { DraftGrid } from "~/components/draft/DraftGrid";
import { PlayerList } from "~/components/draft/PlayerList";
import { DraftQueue } from "~/components/draft/DraftQueue";
import { CommissionerControls } from "~/components/draft/CommissionerControls";
import { useDraftSocket } from "~/hooks/useDraftSocket";

export async function loader(args: LoaderFunctionArgs) {
  const { userId } = await getAuth(args);
  if (!userId) {
    throw redirect("/");
  }

  const { leagueId } = args.params;
  if (!leagueId) {
    throw new Response("League ID is required", { status: 400 });
  }

  // Get league and season
  const league = await findLeagueById(leagueId);
  if (!league) {
    throw new Response("League not found", { status: 404 });
  }

  const season = await findCurrentSeason(leagueId);
  if (!season) {
    throw new Response("No active season found", { status: 404 });
  }

  // Get season with sports and participants
  const seasonWithSports = await findSeasonWithSportsSeasons(season.id);
  const participants = seasonWithSports?.seasonSports?.flatMap(
    (ss: any) => {
      const sportName = ss.sportsSeason?.sport?.name || "Unknown";
      return (ss.sportsSeason?.participants || []).map((p: any) => ({
        ...p,
        sport: sportName,
      }));
    }
  ) || [];

  // Get teams and draft order
  const teams = await findTeamsBySeasonId(season.id);
  const draftSlots = await findDraftSlotsBySeasonId(season.id);
  
  // Sort teams by draft order
  const teamsWithOrder = teams.map((team) => {
    const slot = draftSlots.find((s: { teamId: string }) => s.teamId === team.id);
    return {
      ...team,
      draftOrder: slot?.draftOrder || 0,
    };
  }).sort((a, b) => a.draftOrder - b.draftOrder);

  // Check user permissions
  const isUserCommissioner = await isCommissioner(leagueId, userId);
  const userTeam = teams.find((team) => team.ownerId === userId);

  // Get draft data
  const draftPicks = await getDraftPicks(season.id);
  let timers = await getSeasonTimers(season.id);
  
  // If no timers exist, create default timers for display
  if (timers.length === 0) {
    timers = teams.map((team) => ({
      id: team.id,
      seasonId: season.id,
      teamId: team.id,
      timeRemaining: season.draftInitialTime,
      createdAt: new Date(),
      updatedAt: new Date(),
    }));
  }
  
  // Get user's queue if they have a team
  const queueItems = userTeam ? await getTeamQueue(userTeam.id) : [];

  // Calculate current pick info
  const totalPicks = season.draftRounds * teams.length;
  const currentPickNumber = season.currentPickNumber || 1;
  const isDraftComplete = currentPickNumber > totalPicks;

  return data({
    league,
    season,
    teams: teamsWithOrder,
    draftSlots,
    isCommissioner: isUserCommissioner,
    userTeam,
    draftPicks,
    participants,
    queueItems,
    timers,
    currentPickNumber,
    totalPicks,
    isDraftComplete,
    userId,
  });
}

export default function DraftRoom({ loaderData }: { loaderData: Awaited<ReturnType<typeof loader>>["data"] }) {
  const {
    league,
    season,
    teams,
    draftPicks: initialDraftPicks,
    participants,
    queueItems: initialQueueItems,
    timers: initialTimers,
    isCommissioner,
    userTeam,
    currentPickNumber: initialPickNumber,
    totalPicks,
    isDraftComplete: initialIsDraftComplete,
    draftSlots,
  } = loaderData;

  // Local state for real-time updates
  const [draftPicks, setDraftPicks] = useState(initialDraftPicks);
  const [queueItems, setQueueItems] = useState(initialQueueItems);
  const [timers, setTimers] = useState(initialTimers);
  const [currentPickNumber, setCurrentPickNumber] = useState(initialPickNumber);
  const [isDraftComplete, setIsDraftComplete] = useState(initialIsDraftComplete);
  const [isDraftStarted, setIsDraftStarted] = useState(!!season.draftStartedAt);
  const [isDraftPaused, setIsDraftPaused] = useState(season.draftPaused || false);

  // Socket connection
  const { on, off } = useDraftSocket(season.id);

  // Calculate current team
  const draftOrder = draftSlots.map((slot: any) => ({
    teamId: slot.teamId,
    draftOrder: slot.draftOrder,
  }));
  const currentTeamId = getTeamForPick(currentPickNumber, draftOrder);
  const currentTeam = teams.find((t: any) => t.id === currentTeamId);
  const currentTeamName = currentTeam?.name || "Unknown";

  // Socket event handlers
  useEffect(() => {
    // Listen for pick made
    const handlePickMade = (data: any) => {
      setDraftPicks((prev: any) => [...prev, data.pick]);
      setCurrentPickNumber(data.nextPickNumber);
      setIsDraftComplete(data.isDraftComplete);
    };

    // Listen for draft started
    const handleDraftStarted = (data: any) => {
      setIsDraftStarted(true);
      setIsDraftPaused(false);
      setTimers(data.timers);
    };

    // Listen for draft paused
    const handleDraftPaused = (data: any) => {
      setIsDraftPaused(data.isPaused);
    };

    // Listen for draft completed
    const handleDraftCompleted = () => {
      setIsDraftComplete(true);
    };

    // Listen for queue updates
    const handleQueueUpdated = (data: any) => {
      if (userTeam && data.teamId === userTeam.id) {
        setQueueItems(data.queue);
      }
    };

    on("pick-made", handlePickMade);
    on("draft-started", handleDraftStarted);
    on("draft-paused", handleDraftPaused);
    on("draft-completed", handleDraftCompleted);
    on("queue-updated", handleQueueUpdated);

    return () => {
      off("pick-made", handlePickMade);
      off("draft-started", handleDraftStarted);
      off("draft-paused", handleDraftPaused);
      off("draft-completed", handleDraftCompleted);
      off("queue-updated", handleQueueUpdated);
    };
  }, [on, off, userTeam]);

  // Commissioner action handlers
  const handleStartDraft = async () => {
    try {
      const formData = new FormData();
      formData.append("action", "start-draft");
      formData.append("seasonId", season.id);

      const response = await fetch("/api/draft-commissioner", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) {
        const error = await response.json();
        console.error("Failed to start draft:", error);
      }
    } catch (error) {
      console.error("Error starting draft:", error);
    }
  };

  const handlePauseDraft = async () => {
    try {
      const formData = new FormData();
      formData.append("action", "pause-draft");
      formData.append("seasonId", season.id);
      formData.append("pause", "true");

      const response = await fetch("/api/draft-commissioner", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) {
        const error = await response.json();
        console.error("Failed to pause draft:", error);
      }
    } catch (error) {
      console.error("Error pausing draft:", error);
    }
  };

  const handleResumeDraft = async () => {
    try {
      const formData = new FormData();
      formData.append("action", "pause-draft");
      formData.append("seasonId", season.id);
      formData.append("pause", "false");

      const response = await fetch("/api/draft-commissioner", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) {
        const error = await response.json();
        console.error("Failed to resume draft:", error);
      }
    } catch (error) {
      console.error("Error resuming draft:", error);
    }
  };

  const handleForcePick = async () => {
    if (!currentTeamId) return;

    try {
      const formData = new FormData();
      formData.append("action", "force-pick");
      formData.append("seasonId", season.id);
      formData.append("teamId", currentTeamId);

      const response = await fetch("/api/draft-commissioner", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) {
        const error = await response.json();
        console.error("Failed to force pick:", error);
      }
    } catch (error) {
      console.error("Error forcing pick:", error);
    }
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="px-6 py-4">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold">{league.name} Draft</h1>
              <p className="text-sm text-muted-foreground">
                {season.year} Season • Pick {currentPickNumber} of {totalPicks}
              </p>
            </div>
            <div className="flex items-center gap-4">
              {isCommissioner && (
                <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
                  Commissioner
                </span>
              )}
              {userTeam && (
                <span className="rounded-full bg-secondary px-3 py-1 text-xs font-medium">
                  {userTeam.name}
                </span>
              )}
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="px-6 py-6">
        {isDraftComplete ? (
          <div className="rounded-lg border bg-card p-8 text-center">
            <h2 className="text-2xl font-bold">Draft Complete!</h2>
            <p className="mt-2 text-muted-foreground">
              All picks have been made. The season is ready to begin.
            </p>
          </div>
        ) : (
          <div className="space-y-6">
            {/* Draft Board - Full Width */}
            <div className="rounded-lg border bg-card p-6">
              <h2 className="mb-4 text-xl font-bold">Draft Board</h2>
              <DraftGrid
                teams={teams}
                draftPicks={draftPicks}
                participants={participants}
                draftRounds={season.draftRounds}
                currentPickNumber={currentPickNumber}
                userTeamId={userTeam?.id}
                timers={timers}
              />
            </div>

            {/* 2x2 Grid Below */}
            <div className="grid gap-6 md:grid-cols-2">
              {/* Available Players */}
              <div className="rounded-lg border bg-card p-6 flex flex-col" style={{ height: "600px" }}>
                <h2 className="mb-4 text-xl font-bold">Available Players</h2>
                <PlayerList
                  participants={participants}
                  draftPicks={draftPicks}
                  canDraft={false}
                />
              </div>

              {/* Your Queue */}
              <div className="rounded-lg border bg-card p-6 flex flex-col" style={{ height: "600px" }}>
                <h2 className="mb-4 text-xl font-bold">Your Queue</h2>
                <div className="flex-1 overflow-y-auto">
                  <DraftQueue
                    queueItems={queueItems}
                    participants={participants}
                  />
                </div>
              </div>

              {/* Draft Timer */}
              <div className="rounded-lg border bg-card p-6">
                <h2 className="mb-4 text-xl font-bold">Draft Timer</h2>
                <div className="flex items-center justify-center py-12 text-muted-foreground">
                  Timer will be implemented in Phase 8
                </div>
              </div>

              {/* Commissioner Controls */}
              {isCommissioner ? (
                <div className="rounded-lg border bg-card p-6">
                  <h2 className="mb-4 text-xl font-bold">Commissioner Controls</h2>
                  <CommissionerControls
                    isDraftStarted={isDraftStarted}
                    isDraftPaused={isDraftPaused}
                    isDraftComplete={isDraftComplete}
                    currentTeamName={currentTeamName}
                    onStartDraft={handleStartDraft}
                    onPauseDraft={handlePauseDraft}
                    onResumeDraft={handleResumeDraft}
                    onForcePick={handleForcePick}
                  />
                </div>
              ) : (
                <div className="rounded-lg border bg-card p-6">
                  <h2 className="mb-4 text-xl font-bold">Draft Info</h2>
                  <div className="space-y-2 text-sm">
                    <div>
                      <span className="text-muted-foreground">Current Pick:</span>
                      <span className="ml-2 font-medium">{currentPickNumber} of {totalPicks}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">Draft Rounds:</span>
                      <span className="ml-2 font-medium">{season.draftRounds}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">Current Team:</span>
                      <span className="ml-2 font-medium">{currentTeamName}</span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}
      </main>
    </div>
  );
}