import { useState } from "react";
import { Box, Card, Text, Select, Button, Group, Stack } from "@mantine/core";
import { awardManualBadge } from "@/features/badges/server";
import { useAllBadges } from "@/features/badges/queries";
import toast from "@/lib/sonner";
import { usePlayers } from "@/features/players/queries";

const AwardBadges = () => {
  const { data: players } = usePlayers();
  const { data: allBadges } = useAllBadges();

  const [selectedPlayerId, setSelectedPlayerId] = useState<string | null>(null);
  const [selectedBadgeId, setSelectedBadgeId] = useState<string | null>(null);
  const [isAwarding, setIsAwarding] = useState(false);

  const manualBadges = allBadges.filter((badge) => badge.type === "manual");

  const handleAwardBadge = async () => {
    if (!selectedPlayerId || !selectedBadgeId) return;

    setIsAwarding(true);
    try {
      await awardManualBadge({
        data: {
          playerId: selectedPlayerId,
          badgeId: selectedBadgeId,
        },
      });

      toast.success("Badge awarded successfully");

      setSelectedPlayerId(null);
      setSelectedBadgeId(null);
    } catch (error) {
      toast.error("Failed to award badge");
    } finally {
      setIsAwarding(false);
    }
  };

  const playerOptions = players.map((player) => ({
    value: player.id,
    label: `${player.first_name} ${player.last_name}`,
  }));

  const badgeOptions = manualBadges.map((badge) => ({
    value: badge.id,
    label: badge.name,
  }));

  return (
    <Box p="md">
      <Card withBorder radius="md" p="md">
        <Stack gap="md">
          <Box>
            <Text size="lg" fw={600} mb="xs">
              Award Manual Badge
            </Text>
            <Text size="sm" c="dimmed">
              Select a player and a manual badge to award
            </Text>
          </Box>

          <Select
            label="Player"
            placeholder="Select a player"
            data={playerOptions}
            value={selectedPlayerId}
            onChange={setSelectedPlayerId}
            searchable
            clearable
          />

          <Select
            label="Badge"
            placeholder="Select a badge"
            data={badgeOptions}
            value={selectedBadgeId}
            onChange={setSelectedBadgeId}
            searchable
            clearable
          />

          <Group justify="flex-end">
            <Button
              onClick={handleAwardBadge}
              disabled={!selectedPlayerId || !selectedBadgeId}
              loading={isAwarding}
            >
              Award Badge
            </Button>
          </Group>
        </Stack>
      </Card>
    </Box>
  );
};

export default AwardBadges;