i think working bracket runner

src/features/bracket/components/match-card.tsx

@@ -1,26 +1,36 @@
-import { ActionIcon, Card, Flex, Text, Stack } from "@mantine/core";
+import { ActionIcon, Card, Flex, Text, Stack, Indicator } from "@mantine/core";
 import { PlayIcon, PencilIcon } from "@phosphor-icons/react";
 import React, { useCallback, useMemo } from "react";
 import { MatchSlot } from "./match-slot";
 import { Match } from "@/features/matches/types";
+import { useSheet } from "@/hooks/use-sheet";
+import { MatchForm } from "./match-form";
+import Sheet from "@/components/sheet/sheet";
+import { useServerMutation } from "@/lib/tanstack-query/hooks";
+import { endMatch, startMatch } from "@/features/matches/server";
+import { tournamentKeys } from "@/features/tournaments/queries";
+import { useQueryClient } from "@tanstack/react-query";
 
 interface MatchCardProps {
   match: Match;
   orders: Record<number, number>;
-  onStartMatch?: (match: Match) => void;
+  showControls?: boolean;
 }
 
 export const MatchCard: React.FC<MatchCardProps> = ({
   match,
   orders,
-  onStartMatch,
+  showControls,
 }) => {
+  const queryClient = useQueryClient();
+  const editSheet = useSheet();
   const homeSlot = useMemo(
     () => ({
       from: orders[match.home_from_lid],
       from_loser: match.home_from_loser,
       team: match.home,
       seed: match.home_seed,
+      cups: match.status === "ended" ? match.home_cups : undefined
     }),
     [match]
   );
@@ -30,72 +40,110 @@ export const MatchCard: React.FC<MatchCardProps> = ({
       from_loser: match.away_from_loser,
       team: match.away,
       seed: match.away_seed,
+      cups: match.status === "ended" ? match.away_cups : undefined
     }),
     [match]
   );
 
   const showToolbar = useMemo(
-    () => match.status === "ready" && onStartMatch,
-    [match.status, onStartMatch]
+    () => match.status === "ready" && showControls,
+    [match.status, showControls]
   );
 
-  const handleAnnounce = useCallback(
-    () => onStartMatch?.(match),
-    [onStartMatch, match]
+  const showEditButton = useMemo(
+    () => showControls && match.status === "started",
+    [showControls, match.status]
   );
 
-  const handleEdit = useCallback(() => {
-    // TODO: implement edit functionality
-    console.log('Edit match:', match);
+  const start = useServerMutation({
+    mutationFn: startMatch,
+    successMessage: "Match started!",
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: tournamentKeys.details(match.tournament.id),
+      });
+    },
+  });
+
+  const end = useServerMutation({
+    mutationFn: endMatch,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: tournamentKeys.details(match.tournament.id),
+      });
+    },
+  });
+
+  const handleStart = useCallback(async () => {
+    await start.mutate({
+      data: match.id,
+    });
   }, [match]);
 
+  const handleFormSubmit = useCallback(
+    async (data: { home_cups: number; away_cups: number; ot_count: number }) => {
+      await end.mutate({ data: {
+        ...data,
+        matchId: match.id
+      }});
+      editSheet.close();
+    },
+    [match.id, editSheet]
+  );
+
+  console.log(homeSlot, awaySlot)
+
   return (
     <Flex direction="row" align="center" justify="end" gap={8}>
       <Text c="dimmed" fw="bolder">
         {match.order}
       </Text>
       <Flex align="stretch">
-        <Card
-          withBorder
-          pos="relative"
-          w={200}
-          style={{ overflow: "visible" }}
-          data-match-lid={match.lid}
+        <Indicator
+          inline
+          processing={match.status === "started"}
+          color="red"
+          size={12}
+          disabled={match.status !== "started" || showEditButton}
         >
-          <Card.Section withBorder p={0}>
-            <MatchSlot {...homeSlot} />
-          </Card.Section>
+          <Card
+            w={showToolbar || showEditButton ? 200 : 220}
+            withBorder
+            pos="relative"
+            style={{ overflow: "visible" }}
+            data-match-lid={match.lid}
+          >
+            <Card.Section withBorder p={0}>
+              <MatchSlot {...homeSlot} />
+            </Card.Section>
 
-          <Card.Section p={0} mb={-16}>
-            <MatchSlot {...awaySlot} />
-          </Card.Section>
+            <Card.Section p={0} mb={-16}>
+              <MatchSlot {...awaySlot} />
+            </Card.Section>
 
-          {match.reset && (
-            <Text
-              pos="absolute"
-              top={-20}
-              left={8}
-              size="xs"
-              c="dimmed"
-              fw="bold"
-            >
-              * If necessary
-            </Text>
-          )}
-        </Card>
+            {match.reset && (
+              <Text
+                pos="absolute"
+                top={-20}
+                left={8}
+                size="xs"
+                c="dimmed"
+                fw="bold"
+              >
+                * If necessary
+              </Text>
+            )}
+          </Card>
+        </Indicator>
 
         {showToolbar && (
-          <Flex
-            direction="column"
-            justify="center"
-            align="center"
-          >
+          <Flex direction="column" justify="center" align="center">
             <ActionIcon
               color="green"
-              onClick={handleAnnounce}
+              onClick={handleStart}
               size="sm"
-              h='100%'
-              radius='sm'
+              h="100%"
+              radius="sm"
               ml={-4}
               style={{
                 borderTopLeftRadius: 0,
@@ -106,7 +154,34 @@ export const MatchCard: React.FC<MatchCardProps> = ({
             </ActionIcon>
           </Flex>
         )}
+
+        {showEditButton && (
+          <Flex direction="column" justify="center" align="center">
+            <ActionIcon
+              color="blue"
+              onClick={editSheet.open}
+              size="sm"
+              h="100%"
+              radius="sm"
+              ml={-4}
+              style={{
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+              }}
+            >
+              <PencilIcon size={14} />
+            </ActionIcon>
+          </Flex>
+        )}
       </Flex>
+
+      <Sheet title="Edit Match" {...editSheet.props}>
+        <MatchForm
+          match={match}
+          onSubmit={handleFormSubmit}
+          onCancel={editSheet.close}
+        />
+      </Sheet>
     </Flex>
   );
 };