main

src/components/teams/team-detail-content.tsx

@@ -15,12 +15,14 @@ import {
 } from "@chakra-ui/react";
 import { useTranslations } from "next-intl";
 import { useParams, useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import { useColorModeValue } from "@/components/ui/color-mode";
 import { SlideUp, FadeIn } from "@/components/motion";
 import { useTeamById, useTeamMatches } from "@/lib/api/leagues/use-hooks";
 import { LuArrowLeft, LuCalendar, LuTrophy, LuChevronDown } from "react-icons/lu";
 import type { MatchResponseDto } from "@/lib/api/matches/types";
 import { useState, useMemo, useCallback } from "react";
+import { LoginModal } from "@/components/auth/login-modal";
 
 // ─────────────────────────────────────────────────
 // Utility Functions
@@ -32,7 +34,7 @@ function getMatchTimestamp(match: MatchResponseDto): number {
 }
 
 function getMatchStatus(match: MatchResponseDto): string {
-  return String(match.status || (match as Record<string, unknown>).state || "").toUpperCase();
+  return String(match.status || match.state || "").toUpperCase();
 }
 
 function isMatchFinished(match: MatchResponseDto): boolean {
@@ -50,7 +52,7 @@ function getTeamSideName(team: MatchResponseDto["homeTeam"] | MatchResponseDto["
 }
 
 function getTeamSideLogo(team: MatchResponseDto["homeTeam"] | MatchResponseDto["awayTeam"], fallback?: unknown): string {
-  return String(team?.logo || (team as Record<string, unknown> | undefined)?.logoUrl || fallback || "");
+  return String(team?.logo || fallback || "");
 }
 
 function getLeagueLabel(match: MatchResponseDto): string {
@@ -83,6 +85,8 @@ export default function TeamDetailContent() {
   const t = useTranslations();
   const params = useParams();
   const router = useRouter();
+  const { data: session } = useSession();
+  const [loginModalOpen, setLoginModalOpen] = useState(false);
 
   const teamId = params.id as string;
   const [currentPage, setCurrentPage] = useState(1);
@@ -245,7 +249,7 @@ export default function TeamDetailContent() {
                     cardBg={cardBg}
                     borderColor={borderColor}
                     statusBadge={getStatusBadge(match)}
-                    onClick={() => router.push(`/tr/matches/${match.id}`)}
+                    onClick={() => session ? router.push(`/matches/${match.id}`) : setLoginModalOpen(true)}
                   />
                 ))}
               </VStack>
@@ -316,7 +320,7 @@ export default function TeamDetailContent() {
                     cardBg={cardBg}
                     borderColor={borderColor}
                     statusBadge={getStatusBadge(match)}
-                    onClick={() => router.push(`/tr/matches/${match.id}`)}
+                    onClick={() => session ? router.push(`/matches/${match.id}`) : setLoginModalOpen(true)}
                   />
                 ))}
               </VStack>
@@ -379,6 +383,13 @@ export default function TeamDetailContent() {
             )}
           </Box>
         </FadeIn>
+
+        {/* Login Modal — shown when unauthenticated user clicks a match */}
+        <LoginModal
+          open={loginModalOpen}
+          onOpenChange={setLoginModalOpen}
+          initialMode="login"
+        />
       </Box>
     </SlideUp>
   );