import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { ImagePlus } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { BaseballCard } from "@/components/cards/baseball-card";
import { AppShell } from "@/components/layout/app-shell";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { RedirectToSignIn } from "@/lib/auth/gates";
import { useCurrentUserState } from "@/lib/auth/use-current-user";
import { compressImageFile } from "@/lib/image";
import { createCard } from "@/lib/server/api";
import type { CardItem, Rarity } from "@/lib/types";
import { POSITIONS, RARITIES, TEAMS } from "@/lib/types";

export const Route = createFileRoute("/create")({
  component: CreatePage,
});

function CreatePage() {
  const { user, isPending } = useCurrentUserState();
  const navigate = useNavigate();

  const [playerName, setPlayerName] = useState("");
  const [team, setTeam] = useState<string>(TEAMS[0]);
  const [position, setPosition] = useState<string>("CF");
  const [seasonYear, setSeasonYear] = useState(String(new Date().getFullYear()));
  const [rarity, setRarity] = useState<Rarity>("common");
  const [battingAvg, setBattingAvg] = useState("");
  const [homeRuns, setHomeRuns] = useState("");
  const [rbi, setRbi] = useState("");
  const [era, setEra] = useState("");
  const [wins, setWins] = useState("");
  const [strikeouts, setStrikeouts] = useState("");
  const [description, setDescription] = useState("");
  const [imageData, setImageData] = useState<string | null>(null);
  const [forTrade, setForTrade] = useState(true);
  const [announce, setAnnounce] = useState(true);
  const [busy, setBusy] = useState(false);

  if (isPending) {
    return (
      <AppShell>
        <div className="h-40 animate-pulse rounded-[var(--radius-xl)] bg-surface-2" />
      </AppShell>
    );
  }
  if (!user) return <RedirectToSignIn />;

  const preview: CardItem = {
    id: "preview",
    ownerId: user.id,
    playerName: playerName || "Player Name",
    team,
    position,
    seasonYear: Number(seasonYear) || new Date().getFullYear(),
    rarity,
    battingAvg: battingAvg || null,
    homeRuns: homeRuns ? Number(homeRuns) : null,
    rbi: rbi ? Number(rbi) : null,
    era: era || null,
    wins: wins ? Number(wins) : null,
    strikeouts: strikeouts ? Number(strikeouts) : null,
    imageData,
    description,
    forTrade,
    createdAt: new Date().toISOString(),
    ownerHandle: "you",
  };

  async function onImage(file: File | null) {
    if (!file) return;
    try {
      const data = await compressImageFile(file);
      setImageData(data);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Image failed");
    }
  }

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    try {
      const card = await createCard({
        data: {
          playerName,
          team,
          position,
          seasonYear: Number(seasonYear),
          rarity,
          battingAvg: battingAvg || undefined,
          homeRuns: homeRuns ? Number(homeRuns) : undefined,
          rbi: rbi ? Number(rbi) : undefined,
          era: era || undefined,
          wins: wins ? Number(wins) : undefined,
          strikeouts: strikeouts ? Number(strikeouts) : undefined,
          imageData,
          description,
          forTrade,
          announce,
        },
      });
      toast.success("Card minted");
      await navigate({ to: "/cards/$cardId", params: { cardId: card.id } });
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Could not create card");
    } finally {
      setBusy(false);
    }
  }

  const isPitcher = position === "P";

  return (
    <AppShell>
      <div className="grid gap-6 lg:grid-cols-[1fr_280px] lg:items-start">
        <div className="space-y-4">
          <div>
            <h1 className="font-display text-4xl tracking-wide">Mint a card</h1>
            <p className="text-sm text-muted">Upload a photo and fill in the player sheet.</p>
          </div>

          <form onSubmit={submit} className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Photo</CardTitle>
                <CardDescription>JPG or PNG. We compress it for the card face.</CardDescription>
              </CardHeader>
              <CardContent>
                <label className="flex min-h-[140px] cursor-pointer flex-col items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-dashed border-border-strong bg-surface-2/50 px-4 py-6 text-center hover:bg-surface-2 transition-colors">
                  {imageData ? (
                    <img
                      src={imageData}
                      alt="Upload preview"
                      className="max-h-40 rounded-[var(--radius-md)] object-cover"
                    />
                  ) : (
                    <>
                      <ImagePlus className="h-8 w-8 text-muted" />
                      <span className="text-sm text-muted">Tap to upload player photo</span>
                    </>
                  )}
                  <input
                    type="file"
                    accept="image/*"
                    className="sr-only"
                    onChange={(e) => void onImage(e.target.files?.[0] ?? null)}
                  />
                </label>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Player sheet</CardTitle>
              </CardHeader>
              <CardContent className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-1.5 sm:col-span-2">
                  <Label htmlFor="player">Player name</Label>
                  <Input
                    id="player"
                    required
                    value={playerName}
                    onChange={(e) => setPlayerName(e.target.value)}
                    placeholder="e.g. Jordan Hale"
                    maxLength={48}
                  />
                </div>
                <div className="space-y-1.5">
                  <Label>Team</Label>
                  <Select value={team} onValueChange={setTeam}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {TEAMS.map((t) => (
                        <SelectItem key={t} value={t}>
                          {t}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-1.5">
                  <Label>Position</Label>
                  <Select value={position} onValueChange={setPosition}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {POSITIONS.map((p) => (
                        <SelectItem key={p} value={p}>
                          {p}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-1.5">
                  <Label htmlFor="year">Season</Label>
                  <Input
                    id="year"
                    type="number"
                    min={1900}
                    max={2030}
                    required
                    value={seasonYear}
                    onChange={(e) => setSeasonYear(e.target.value)}
                  />
                </div>
                <div className="space-y-1.5">
                  <Label>Rarity</Label>
                  <Select value={rarity} onValueChange={(v) => setRarity(v as Rarity)}>
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      {RARITIES.map((r) => (
                        <SelectItem key={r} value={r} className="capitalize">
                          {r}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                {isPitcher ? (
                  <>
                    <div className="space-y-1.5">
                      <Label htmlFor="era">ERA</Label>
                      <Input id="era" value={era} onChange={(e) => setEra(e.target.value)} placeholder="2.85" />
                    </div>
                    <div className="space-y-1.5">
                      <Label htmlFor="wins">Wins</Label>
                      <Input
                        id="wins"
                        type="number"
                        value={wins}
                        onChange={(e) => setWins(e.target.value)}
                      />
                    </div>
                    <div className="space-y-1.5">
                      <Label htmlFor="k">Strikeouts</Label>
                      <Input
                        id="k"
                        type="number"
                        value={strikeouts}
                        onChange={(e) => setStrikeouts(e.target.value)}
                      />
                    </div>
                  </>
                ) : (
                  <>
                    <div className="space-y-1.5">
                      <Label htmlFor="avg">Batting avg</Label>
                      <Input
                        id="avg"
                        value={battingAvg}
                        onChange={(e) => setBattingAvg(e.target.value)}
                        placeholder=".301"
                      />
                    </div>
                    <div className="space-y-1.5">
                      <Label htmlFor="hr">Home runs</Label>
                      <Input
                        id="hr"
                        type="number"
                        value={homeRuns}
                        onChange={(e) => setHomeRuns(e.target.value)}
                      />
                    </div>
                    <div className="space-y-1.5">
                      <Label htmlFor="rbi">RBI</Label>
                      <Input
                        id="rbi"
                        type="number"
                        value={rbi}
                        onChange={(e) => setRbi(e.target.value)}
                      />
                    </div>
                  </>
                )}

                <div className="space-y-1.5 sm:col-span-2">
                  <Label htmlFor="desc">Description</Label>
                  <Textarea
                    id="desc"
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    placeholder="Optional flavor text for the reverse of the card…"
                    maxLength={500}
                  />
                </div>

                <label className="flex items-center gap-2 text-sm sm:col-span-2">
                  <input
                    type="checkbox"
                    checked={forTrade}
                    onChange={(e) => setForTrade(e.target.checked)}
                    className="h-4 w-4 rounded border-border"
                  />
                  List on marketplace (open for trade)
                </label>
                <label className="flex items-center gap-2 text-sm sm:col-span-2">
                  <input
                    type="checkbox"
                    checked={announce}
                    onChange={(e) => setAnnounce(e.target.checked)}
                    className="h-4 w-4 rounded border-border"
                  />
                  Announce on social feed
                </label>
              </CardContent>
            </Card>

            <Button type="submit" size="lg" className="w-full sm:w-auto" disabled={busy}>
              {busy ? "Minting…" : "Mint card"}
            </Button>
          </form>
        </div>

        <aside className="lg:sticky lg:top-20">
          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-subtle">Live preview</p>
          <BaseballCard card={preview} interactive={false} size="md" className="mx-auto" />
        </aside>
      </div>
    </AppShell>
  );
}