import { Form, Link, redirect } from "react-router";
import type { Route } from "./+types/admin.sports-seasons.new";

import { logger } from "~/lib/logger";
import { createSportsSeason, type NewSportsSeason } from "~/models/sports-season";
import { findAllSports } from "~/models/sport";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { useState } from "react";

const SELECT_CLASS = "h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm";

export function meta(): Route.MetaDescriptors {
  return [{ title: "New Sports Season - Brackt Admin" }];
}

export async function loader() {
  const sports = await findAllSports();
  return { sports };
}

export async function action({ request }: Route.ActionArgs) {
  const formData = await request.formData();
  const sportId = formData.get("sportId");
  const name = formData.get("name");
  const year = formData.get("year");
  const startDate = formData.get("startDate");
  const endDate = formData.get("endDate");
  const status = formData.get("status");
  const scoringType = formData.get("scoringType");
  const scoringPattern = formData.get("scoringPattern");
  const totalMajors = formData.get("totalMajors");
  const draftOn = formData.get("draftOn");
  const draftOff = formData.get("draftOff");
  const externalSeasonId = formData.get("externalSeasonId");

  // Validation
  if (typeof sportId !== "string" || !sportId) {
    return { error: "Sport is required" };
  }

  if (typeof name !== "string" || !name.trim()) {
    return { error: "Season name is required" };
  }

  if (typeof year !== "string") {
    return { error: "Year is required" };
  }

  const yearNum = parseInt(year, 10);
  if (isNaN(yearNum) || yearNum < 2000 || yearNum > 2100) {
    return { error: "Year must be between 2000 and 2100" };
  }

  if (status !== "upcoming" && status !== "active" && status !== "completed") {
    return { error: "Invalid status" };
  }

  if (scoringType !== "playoffs" && scoringType !== "regular_season" && scoringType !== "majors") {
    return { error: "Invalid scoring type" };
  }

  const validScoringPatterns = ["playoff_bracket", "season_standings", "qualifying_points"];
  if (scoringPattern && typeof scoringPattern === "string" && !validScoringPatterns.includes(scoringPattern)) {
    return { error: "Invalid scoring pattern" };
  }

  if (typeof draftOn !== "string" || !draftOn) {
    return { error: "Draft open date is required" };
  }

  if (typeof draftOff !== "string" || !draftOff) {
    return { error: "Draft close date is required" };
  }

  if (draftOff < draftOn) {
    return { error: "Draft close date must be on or after draft open date" };
  }

  try {
    const seasonData: Partial<NewSportsSeason> = {
      sportId,
      name: name.trim(),
      year: yearNum,
      startDate: typeof startDate === "string" && startDate ? startDate : null,
      endDate: typeof endDate === "string" && endDate ? endDate : null,
      status,
      scoringType,
      draftOn,
      draftOff,
    };

    if (scoringPattern && typeof scoringPattern === "string") {
      seasonData.scoringPattern = scoringPattern as "playoff_bracket" | "season_standings" | "qualifying_points";
    }

    if (totalMajors && typeof totalMajors === "string") {
      const totalMajorsNum = parseInt(totalMajors, 10);
      if (!isNaN(totalMajorsNum) && totalMajorsNum > 0) {
        seasonData.totalMajors = totalMajorsNum;
      }
    }

    if (typeof externalSeasonId === "string" && externalSeasonId.trim()) {
      seasonData.externalSeasonId = externalSeasonId.trim();
    }

    await createSportsSeason(seasonData as NewSportsSeason);

    return redirect("/admin/sports-seasons");
  } catch (error) {
    logger.error("Error creating sports season:", error);
    return { error: "Failed to create sports season. Please try again." };
  }
}

export default function NewSportsSeason({ loaderData, actionData }: Route.ComponentProps) {
  const { sports } = loaderData;
  const currentYear = new Date().getFullYear();
  const [scoringPattern, setScoringPattern] = useState<string>("");

  return (
    <div className="p-8">
      <div className="max-w-2xl">
        <div className="mb-6">
          <h1 className="text-3xl font-bold">Create New Sports Season</h1>
          <p className="text-muted-foreground mt-1">
            Add a new season for a sport
          </p>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Sports Season Details</CardTitle>
            <CardDescription>
              Enter the information for the new sports season
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Form method="post" className="space-y-6">
              <div className="space-y-2">
                <Label htmlFor="sportId">Sport</Label>
                <select id="sportId" name="sportId" required defaultValue="" className={SELECT_CLASS}>
                  <option value="" disabled>Select a sport</option>
                  {sports.map((sport) => (
                    <option key={sport.id} value={sport.id}>
                      {sport.name}
                    </option>
                  ))}
                </select>
                {sports.length === 0 && (
                  <p className="text-sm text-muted-foreground">
                    No sports available. <Link to="/admin/sports/new" className="underline">Create a sport first</Link>.
                  </p>
                )}
              </div>

              <div className="space-y-2">
                <Label htmlFor="name">Season Name</Label>
                <Input
                  id="name"
                  name="name"
                  type="text"
                  placeholder="e.g., 2025 NFL Playoffs, 2025 PGA Tour"
                  required
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="year">Year</Label>
                <Input
                  id="year"
                  name="year"
                  type="number"
                  min="2000"
                  max="2100"
                  defaultValue={currentYear}
                  required
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="startDate">Start Date (Optional)</Label>
                  <Input
                    id="startDate"
                    name="startDate"
                    type="date"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="endDate">End Date (Optional)</Label>
                  <Input
                    id="endDate"
                    name="endDate"
                    type="date"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="status">Status</Label>
                <select id="status" name="status" defaultValue="upcoming" required className={SELECT_CLASS}>
                  <option value="upcoming">Upcoming</option>
                  <option value="active">Active</option>
                  <option value="completed">Completed</option>
                </select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="scoringType">Scoring Type</Label>
                <select id="scoringType" name="scoringType" required defaultValue="" className={SELECT_CLASS}>
                  <option value="" disabled>Select scoring type</option>
                  <option value="playoffs">Playoffs</option>
                  <option value="regular_season">Regular Season</option>
                  <option value="majors">Majors</option>
                </select>
                <p className="text-sm text-muted-foreground">
                  Playoffs: Team sports playoffs. Regular Season: Full season standings. Majors: Individual sport majors.
                </p>
              </div>

              <div className="space-y-2">
                <Label htmlFor="scoringPattern">Scoring Pattern (Optional)</Label>
                <select
                  id="scoringPattern"
                  name="scoringPattern"
                  value={scoringPattern}
                  onChange={(event) => setScoringPattern(event.target.value)}
                  className={SELECT_CLASS}
                >
                  <option value="">Select scoring pattern (optional)</option>
                  <option value="playoff_bracket">Playoff Bracket</option>
                  <option value="season_standings">Season Standings</option>
                  <option value="qualifying_points">Qualifying Points (Golf/Tennis)</option>
                </select>
                <p className="text-sm text-muted-foreground">
                  Qualifying Points: For sports like Golf/Tennis where participants earn points across majors, then top 8 get fantasy points.
                </p>
              </div>

              {scoringPattern === "qualifying_points" && (
                <div className="space-y-2">
                  <Label htmlFor="totalMajors">Total Majors</Label>
                  <Input
                    id="totalMajors"
                    name="totalMajors"
                    type="number"
                    min="1"
                    max="10"
                    defaultValue="4"
                    placeholder="e.g., 4 (for Golf)"
                  />
                  <p className="text-sm text-muted-foreground">
                    How many major tournaments will be tracked? (e.g., Golf has 4 majors, Tennis has 4 Grand Slams)
                  </p>
                </div>
              )}

              <div className="space-y-2">
                <Label htmlFor="externalSeasonId">External Season ID (Optional)</Label>
                <Input
                  id="externalSeasonId"
                  name="externalSeasonId"
                  type="text"
                  placeholder="e.g., PandaScore serie_id or ESPN season year"
                />
                <p className="text-sm text-muted-foreground">
                  Used by the match sync cron job. For CS2: PandaScore serie_id. For MLB/NBA: year (e.g., 2025).
                </p>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="draftOn">Draft Open Date</Label>
                  <Input
                    id="draftOn"
                    name="draftOn"
                    type="date"
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="draftOff">Draft Close Date</Label>
                  <Input
                    id="draftOff"
                    name="draftOff"
                    type="date"
                    required
                  />
                </div>
              </div>
              <p className="text-sm text-muted-foreground">
                This season appears in league creation and pre-draft settings only between these two dates (inclusive).
              </p>

              {actionData?.error && (
                <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md text-sm">
                  {actionData.error}
                </div>
              )}

              <div className="flex gap-4">
                <Button type="submit" className="flex-1">
                  Create Sports Season
                </Button>
                <Button type="button" variant="outline" asChild>
                  <Link to="/admin/sports-seasons">Cancel</Link>
                </Button>
              </div>
            </Form>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}