"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { api } from "@/lib/api/client";
import { GlassCard } from "@/components/ui/glass-card";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";

export function TransfersPanel({
  competitionId,
  teams,
  players,
}: {
  competitionId: string;
  teams: { id: string; name: string }[];
  players: { id: string; display_name: string }[];
}) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  return (
    <div className="grid gap-4 lg:grid-cols-2">
      <GlassCard title="Add to roster">
        <form
          className="space-y-3"
          onSubmit={async (e) => {
            e.preventDefault();
            const fd = new FormData(e.currentTarget);
            setLoading(true);
            await api.competitions.addRoster(competitionId, {
              teamId: fd.get("team_id") as string,
              playerId: fd.get("player_id") as string,
            });
            setLoading(false);
            router.refresh();
          }}
        >
          <div>
            <Label>Team</Label>
            <select
              name="team_id"
              required
              className="mt-1 flex h-10 w-full rounded-lg border border-white/15 bg-white/5 px-3 text-sm"
            >
              {teams.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.name}
                </option>
              ))}
            </select>
          </div>
          <div>
            <Label>Player (registry)</Label>
            <select
              name="player_id"
              required
              className="mt-1 flex h-10 w-full rounded-lg border border-white/15 bg-white/5 px-3 text-sm"
            >
              {players.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.display_name}
                </option>
              ))}
            </select>
          </div>
          <Button type="submit" disabled={loading}>
            Add to roster
          </Button>
        </form>
      </GlassCard>

      <GlassCard title="Inter-team transfer">
        <form
          className="space-y-3"
          onSubmit={async (e) => {
            e.preventDefault();
            const fd = new FormData(e.currentTarget);
            setLoading(true);
            await api.competitions.transfer(competitionId, {
              playerId: fd.get("player_id") as string,
              fromTeamId: fd.get("from_team_id") as string,
              toTeamId: fd.get("to_team_id") as string,
            });
            setLoading(false);
            router.refresh();
          }}
        >
          <div>
            <Label>Player</Label>
            <select
              name="player_id"
              required
              className="mt-1 flex h-10 w-full rounded-lg border border-white/15 bg-white/5 px-3 text-sm"
            >
              {players.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.display_name}
                </option>
              ))}
            </select>
          </div>
          <div>
            <Label>From</Label>
            <select
              name="from_team_id"
              required
              className="mt-1 flex h-10 w-full rounded-lg border border-white/15 bg-white/5 px-3 text-sm"
            >
              {teams.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.name}
                </option>
              ))}
            </select>
          </div>
          <div>
            <Label>To</Label>
            <select
              name="to_team_id"
              required
              className="mt-1 flex h-10 w-full rounded-lg border border-white/15 bg-white/5 px-3 text-sm"
            >
              {teams.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.name}
                </option>
              ))}
            </select>
          </div>
          <Button type="submit" disabled={loading}>
            Register transfer
          </Button>
        </form>
      </GlassCard>
    </div>
  );
}