refactor video results playback and management form UX

src/app/(modules)/results/[videoId]/page.tsx

@@ -3,8 +3,8 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { Button } from '@/components/ui/button';
-import { Loader2, TrendingUp, ArrowUp, ArrowDown } from 'lucide-react';
-import VideoPlayerSection from '@/components/video-player-section';
+import { Loader2, TrendingUp } from 'lucide-react';
+import VideoPlayerSection from '@/components/videoPlayerSection';
 import { PageHeader } from '@/components/page-header';
 import { sessionService } from '@/services/api';
 import { SessionContext, CompletedVideoResult, DetectionType } from '@/types';
@@ -113,59 +113,6 @@ export default function VideoResultsPage() {
             />
           </div>
 
-          {session && (
-            <div className="mb-6">
-              <Card className="p-0 border shadow-sm overflow-hidden">
-                <div className="flex flex-col md:flex-row md:items-center justify-between py-4 px-6 gap-6 bg-card">
-                  <div className="flex flex-wrap items-center gap-x-12 gap-y-4">
-                    <div className="flex flex-col">
-                      <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
-                        Project
-                      </span>
-                      <span className="text-base font-bold leading-tight">
-                        {session.projectName}
-                      </span>
-                    </div>
-                    <div className="flex flex-col border-l pl-12 border-border/60">
-                      <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
-                        Package
-                      </span>
-                      <span className="text-sm font-semibold text-muted-foreground leading-tight">
-                        {session.packageName}
-                      </span>
-                    </div>
-                    <div className="flex flex-col border-l pl-12 border-border/60">
-                      <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1.5">
-                        Segment
-                      </span>
-                      <span className="text-sm font-semibold text-muted-foreground leading-tight flex items-center gap-1.5">
-                        {session.chainageName}
-                        {session.chainageDirection && (
-                          <span className="inline-flex items-center gap-1 px-1 py-0.5 rounded bg-muted text-[10px] font-bold uppercase border">
-                            {session.chainageDirection === 'UP' ? (
-                              <ArrowUp className="h-2.5 w-2.5" />
-                            ) : (
-                              <ArrowDown className="h-2.5 w-2.5" />
-                            )}
-                            {session.chainageDirection}
-                          </span>
-                        )}
-                      </span>
-                    </div>
-                  </div>
-                  <Button
-                    onClick={handleNewAnalysis}
-                    variant="outline"
-                    size="sm"
-                    className="font-semibold px-6 shrink-0 h-9"
-                  >
-                    Start New Analysis
-                  </Button>
-                </div>
-              </Card>
-            </div>
-          )}
-
           {detectionData && (
             <VideoPlayerSection
               data={detectionData}

src/components/ui/scroll-area.tsx

@@ -1,9 +1,9 @@
-'use client';
+"use client"
 
-import * as React from 'react';
-import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
 
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils"
 
 function ScrollArea({
   className,
@@ -13,24 +13,24 @@ function ScrollArea({
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn('relative', className)}
+      className={cn("relative", className)}
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:outline-none"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
       <ScrollBar />
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
-  );
+  )
 }
 
 function ScrollBar({
   className,
-  orientation = 'vertical',
+  orientation = "vertical",
   ...props
 }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
   return (
@@ -38,12 +38,12 @@ function ScrollBar({
       data-slot="scroll-area-scrollbar"
       orientation={orientation}
       className={cn(
-        'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' &&
-          'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' &&
-          'h-2.5 flex-col border-t border-t-transparent',
-        className,
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
       )}
       {...props}
     >
@@ -52,7 +52,7 @@ function ScrollBar({
         className="relative flex-1 rounded-full bg-border"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
+  )
 }
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar }

src/components/video-player-section.tsx

@@ -1,281 +0,0 @@
-'use client';
-
-import { useMemo, useRef, useState } from 'react';
-import {
-  Activity,
-  AlertTriangle,
-  Clock,
-  Film,
-  Gauge,
-  Loader2,
-  MapPin,
-  SignpostBig,
-} from 'lucide-react';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { CompletedVideoResult, DetectionResultLog } from '@/types';
-import { useAnnotatedVideoQuery } from '@/app/(modules)/results/hooks/useVideoResults';
-import DetectionLogs from './video/detection-logs';
-import DetailedSummarySection from './video/detailed-summary-section';
-
-type VideoPlayerSectionProps = {
-  data: CompletedVideoResult;
-  videoId: string;
-  detectionType: string;
-  projectId?: string;
-};
-
-const formatDuration = (seconds: number) => {
-  const safeSeconds = Number.isFinite(seconds) ? seconds : 0;
-  const minutes = Math.floor(safeSeconds / 60);
-  const secs = Math.floor(safeSeconds % 60);
-  return `${minutes}:${secs.toString().padStart(2, '0')}`;
-};
-
-export default function VideoPlayerSection({
-  data,
-  videoId,
-  detectionType,
-  projectId,
-}: VideoPlayerSectionProps) {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const sortedLogs = useMemo(
-    () =>
-      [...(data.logs || [])].sort(
-        (a, b) => a.timestamp_seconds - b.timestamp_seconds,
-      ),
-    [data.logs],
-  );
-  const [activeLog, setActiveLog] = useState<DetectionResultLog | undefined>(
-    sortedLogs[0],
-  );
-
-  const {
-    videoUrl,
-    isLoading: isVideoLoading,
-    isError: isVideoError,
-    refetch: refetchVideo,
-  } = useAnnotatedVideoQuery(data.annotated_video_url);
-
-  const handleSeek = (log: DetectionResultLog) => {
-    const video = videoRef.current;
-    if (!video) return;
-
-    video.currentTime = log.timestamp_seconds;
-    setActiveLog(log);
-    void video.play();
-  };
-
-  const handleTimeUpdate = () => {
-    const video = videoRef.current;
-    if (!video || sortedLogs.length === 0) return;
-
-    const currentLog = sortedLogs.findLast(
-      (log) => log.timestamp_seconds <= video.currentTime,
-    );
-
-    if (currentLog && currentLog.id !== activeLog?.id) {
-      setActiveLog(currentLog);
-    }
-  };
-
-  const currentCounts = activeLog?.cumulative_counts || data.summary;
-
-  const stats = [
-    {
-      label: 'Total Detections',
-      value: data.summary.total_detections || 0,
-      icon: Activity,
-      color: 'text-green-500',
-      bgColor: 'bg-green-500/10',
-    },
-    {
-      label: 'Potholes',
-      value: data.summary.unique_potholes || 0,
-      icon: AlertTriangle,
-      color: 'text-orange-500',
-      bgColor: 'bg-orange-500/10',
-    },
-    {
-      label: 'Signboards',
-      value: data.summary.unique_signboards || 0,
-      icon: SignpostBig,
-      color: 'text-blue-500',
-      bgColor: 'bg-blue-500/10',
-    },
-    {
-      label: 'FPS',
-      value: data.fps.toFixed(1),
-      icon: Gauge,
-      color: 'text-purple-500',
-      bgColor: 'bg-purple-500/10',
-    },
-    {
-      label: 'Duration',
-      value: formatDuration(data.duration_seconds),
-      icon: Clock,
-      color: 'text-cyan-500',
-      bgColor: 'bg-cyan-500/10',
-    },
-  ];
-
-  return (
-    <div className="space-y-6">
-      <Card className="overflow-hidden">
-        <CardHeader className="pb-4 border-b">
-          <div className="flex items-center gap-3">
-            <div className="p-2 rounded bg-secondary">
-              <Film className="h-5 w-5 text-primary" />
-            </div>
-            <div>
-              <CardTitle className="text-lg font-bold">
-                Detection Playback
-              </CardTitle>
-              <CardDescription className="text-xs">
-                Annotated video with backend detection logs
-              </CardDescription>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent className="pt-6">
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <div className="lg:col-span-2 space-y-6">
-              <div className="relative overflow-hidden rounded-lg border bg-black">
-                {videoUrl ? (
-                  <video
-                    ref={videoRef}
-                    src={videoUrl}
-                    controls
-                    preload="metadata"
-                    onTimeUpdate={handleTimeUpdate}
-                    className="block w-full aspect-video"
-                  />
-                ) : (
-                  <div className="flex aspect-video w-full flex-col items-center justify-center gap-3 text-center text-muted-foreground">
-                    {isVideoError ? (
-                      <>
-                        <AlertTriangle className="h-7 w-7 text-destructive" />
-                        <p className="text-sm font-medium text-destructive">
-                          Failed to load the annotated video.
-                        </p>
-                        <button
-                          type="button"
-                          onClick={() => void refetchVideo()}
-                          className="text-xs font-semibold uppercase tracking-wider text-primary hover:underline"
-                        >
-                          Retry
-                        </button>
-                      </>
-                    ) : (
-                      <>
-                        <Loader2 className="h-7 w-7 animate-spin text-primary" />
-                        <p className="text-xs font-medium uppercase tracking-widest">
-                          {isVideoLoading
-                            ? 'Loading annotated video...'
-                            : 'Preparing video...'}
-                        </p>
-                      </>
-                    )}
-                  </div>
-                )}
-              </div>
-
-              <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
-                {stats.map((stat) => {
-                  const Icon = stat.icon;
-
-                  return (
-                    <div
-                      key={stat.label}
-                      className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
-                    >
-                      <div className={`p-2 rounded-md mb-2 ${stat.bgColor}`}>
-                        <Icon className={`h-5 w-5 ${stat.color}`} />
-                      </div>
-                      <div className={`text-xl font-bold ${stat.color}`}>
-                        {stat.value}
-                      </div>
-                      <div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mt-1">
-                        {stat.label}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-
-              <div className="flex flex-wrap items-center gap-x-8 gap-y-3 py-3 px-6 bg-card border rounded-lg">
-                <div className="flex flex-wrap items-center gap-x-6 gap-y-2">
-                  <div className="flex items-center gap-1.5 whitespace-nowrap">
-                    <span className="text-[11px] font-bold uppercase tracking-tight text-orange-500">
-                      Potholes:
-                    </span>
-                    <span className="text-sm font-bold text-orange-500">
-                      {currentCounts.unique_potholes || 0}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-1.5 whitespace-nowrap">
-                    <span className="text-[11px] font-bold uppercase tracking-tight text-blue-500">
-                      Signboards:
-                    </span>
-                    <span className="text-sm font-bold text-blue-500">
-                      {currentCounts.unique_signboards || 0}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-1.5 whitespace-nowrap">
-                    <span className="text-[11px] font-bold uppercase tracking-tight text-green-500">
-                      Total:
-                    </span>
-                    <span className="text-sm font-bold text-green-500">
-                      {currentCounts.total_detections || 0}
-                    </span>
-                  </div>
-                </div>
-
-                {activeLog && (
-                  <div className="flex flex-wrap items-center gap-6 border-l pl-6 border-border/80 ml-auto">
-                    <div className="flex items-center gap-2">
-                      <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
-                        Frame:
-                      </span>
-                      <span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
-                        {activeLog.frame}
-                      </span>
-                    </div>
-                    {typeof activeLog.latitude === 'number' &&
-                      typeof activeLog.longitude === 'number' && (
-                        <div className="flex items-center gap-2">
-                          <MapPin className="h-3.5 w-3.5 text-muted-foreground" />
-                          <span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
-                            {activeLog.latitude.toFixed(7)},{' '}
-                            {activeLog.longitude.toFixed(7)}
-                          </span>
-                        </div>
-                      )}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            <DetectionLogs
-              logs={sortedLogs}
-              activeLogId={activeLog?.id}
-              onSeek={handleSeek}
-            />
-          </div>
-        </CardContent>
-      </Card>
-
-      <DetailedSummarySection
-        projectId={projectId || ''}
-        videoId={videoId}
-        show={Boolean(projectId)}
-        detectionType={detectionType}
-      />
-    </div>
-  );
-}

src/components/video/annotatedVideoPlayer.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { RefObject } from 'react';
+import { AlertTriangle, Loader2 } from 'lucide-react';
+
+interface AnnotatedVideoPlayerProps {
+  videoRef: RefObject<HTMLVideoElement | null>;
+  videoUrl: string | null;
+  isLoading: boolean;
+  isError: boolean;
+  onRetry: () => void;
+  onTimeUpdate: () => void;
+  onSeeked: () => void;
+}
+
+export default function AnnotatedVideoPlayer({
+  videoRef,
+  videoUrl,
+  isLoading,
+  isError,
+  onRetry,
+  onTimeUpdate,
+  onSeeked,
+}: AnnotatedVideoPlayerProps) {
+  return (
+    <div className="relative overflow-hidden rounded-lg border bg-black">
+      {videoUrl ? (
+        <video
+          ref={videoRef}
+          src={videoUrl}
+          controls
+          preload="metadata"
+          onTimeUpdate={onTimeUpdate}
+          onSeeked={onSeeked}
+          className="block w-full aspect-video"
+        />
+      ) : (
+        <div className="flex aspect-video w-full flex-col items-center justify-center gap-3 text-center text-muted-foreground">
+          {isError ? (
+            <>
+              <AlertTriangle className="h-7 w-7 text-destructive" />
+              <p className="text-sm font-medium text-destructive">
+                Failed to load the annotated video.
+              </p>
+              <button
+                type="button"
+                onClick={onRetry}
+                className="text-xs font-semibold uppercase tracking-wider text-primary hover:underline"
+              >
+                Retry
+              </button>
+            </>
+          ) : (
+            <>
+              <Loader2 className="h-7 w-7 animate-spin text-primary" />
+              <p className="text-xs font-medium uppercase tracking-widest">
+                {isLoading ? 'Loading annotated video...' : 'Preparing video...'}
+              </p>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/video/currentDetectionBar.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { MapPin } from 'lucide-react';
+import { CompletedVideoResult, DetectionResultLog } from '@/types';
+
+interface CurrentDetectionBarProps {
+  activeLog?: DetectionResultLog;
+  summary: CompletedVideoResult['summary'];
+}
+
+export default function CurrentDetectionBar({
+  activeLog,
+  summary,
+}: CurrentDetectionBarProps) {
+  const currentCounts = activeLog?.cumulative_counts || summary;
+  const countItems = [
+    {
+      label: 'Potholes',
+      value: currentCounts.unique_potholes || 0,
+      className: 'text-orange-500',
+    },
+    {
+      label: 'Signboards',
+      value: currentCounts.unique_signboards || 0,
+      className: 'text-blue-500',
+    },
+    {
+      label: 'Total',
+      value: currentCounts.total_detections || 0,
+      className: 'text-green-500',
+    },
+  ];
+  const latitude = activeLog?.latitude;
+  const longitude = activeLog?.longitude;
+  const coordinates =
+    typeof latitude === 'number' && typeof longitude === 'number'
+      ? `${latitude.toFixed(7)}, ${longitude.toFixed(7)}`
+      : undefined;
+
+  return (
+    <div className="rounded-lg border bg-card px-4 py-3">
+      {coordinates && (
+        <div className="mb-3 flex justify-end">
+          <div className="flex max-w-full items-center gap-2 rounded-md border bg-muted/30 px-3 py-1.5">
+            <MapPin className="size-3.5 shrink-0 text-muted-foreground" />
+            <span className="truncate font-mono text-xs font-semibold text-foreground">
+              {coordinates}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        {countItems.map((item) => (
+          <div
+            key={item.label}
+            className="flex items-center justify-between gap-3 rounded-lg border bg-muted/20 px-4 py-2"
+          >
+            <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
+              {item.label}
+            </p>
+            <p className={`text-2xl font-bold leading-none ${item.className}`}>
+              {item.value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/video/detailed-summary-section.tsx

@@ -1,244 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import dynamic from 'next/dynamic';
-import { Map as MapIcon, Activity } from 'lucide-react';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { ChainageSummaryData } from '@/types';
-import { projectSummaryService } from '@/services/api';
-import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
-
-// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
-const MapModal = dynamic(() => import('@/components/map-modal'), {
-  ssr: false,
-});
-
-interface DetailedSummarySectionProps {
-  projectId: string;
-  videoId: string;
-  show: boolean;
-  detectionType: string;
-}
-
-const DetailedSummarySection = ({
-  projectId,
-  videoId,
-  show,
-  detectionType,
-}: DetailedSummarySectionProps) => {
-  const [summaryData, setSummaryData] = useState<ChainageSummaryData | null>(
-    null,
-  );
-  const [loading, setLoading] = useState(false);
-  const [showMap, setShowMap] = useState(false);
-
-  useEffect(() => {
-    if (!show || !videoId || !projectId) return;
-
-    const fetchSummary = async () => {
-      setLoading(true);
-      try {
-        const data =
-          await projectSummaryService.getProjectSummaryByVideo<ChainageSummaryData>(
-            projectId,
-            videoId,
-          );
-        setSummaryData(data);
-      } catch (err) {
-        console.error('Failed to fetch summary:', err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchSummary();
-  }, [show, videoId, projectId]);
-
-  if (!show || loading || !summaryData) return null;
-
-  const modeConfig = getDetectionModeConfig(detectionType);
-
-  // Flatten all detections for the scrollable list
-  const allDetections: Array<{
-    detection: any;
-    chainageName: string;
-    packageName: string;
-  }> = [];
-
-  Object.entries(summaryData.packages || {}).forEach(
-    ([packageName, packageData]) => {
-      Object.entries(packageData?.chainages || {}).forEach(
-        ([chainageName, chainageData]) => {
-          chainageData?.detections?.forEach((detection) => {
-            allDetections.push({ detection, chainageName, packageName });
-          });
-        },
-      );
-    },
-  );
-
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
-      <Card className="flex flex-col lg:col-span-2 overflow-hidden">
-        <CardHeader className="pb-3">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className="p-2 rounded bg-secondary">
-                <MapIcon className="h-5 w-5 text-primary" />
-              </div>
-              <div>
-                <CardTitle className="text-base font-bold">Segments</CardTitle>
-                <CardDescription className="text-xs">
-                  {modeConfig.label} detected
-                </CardDescription>
-              </div>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setShowMap(true)}
-              className="gap-2"
-            >
-              <MapIcon className="h-4 w-4" />
-              Map
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent className="flex-1 p-0 overflow-hidden">
-          <ScrollArea className="h-[300px] p-4">
-            <div className="space-y-4">
-              {/* Project Info */}
-              <div className="pb-3 border-b">
-                <div className="flex flex-col mb-2">
-                  <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
-                    Project
-                  </span>
-                  <span className="text-sm font-bold">
-                    {summaryData.project.name}
-                  </span>
-                </div>
-                {summaryData.project.corridor_name && (
-                  <div className="flex flex-col">
-                    <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
-                      Corridor
-                    </span>
-                    <span className="text-xs font-semibold text-muted-foreground">
-                      {summaryData.project.corridor_name}
-                    </span>
-                  </div>
-                )}
-              </div>
-
-              {/* Packages and Chainages */}
-              {Object.entries(summaryData.packages).map(
-                ([packageName, packageData]) => (
-                  <div key={packageData.package_id} className="space-y-2">
-                    <div className="text-xs font-bold text-muted-foreground truncate">
-                      {packageName}
-                    </div>
-                    <div className="pl-2 space-y-2 border-l-2 border-muted">
-                      {Object.entries(packageData.chainages).map(
-                        ([chainageName, chainageData]) => (
-                          <div
-                            key={chainageData.chainage_id}
-                            className="text-xs p-3 rounded-md bg-muted/50 flex items-center justify-between gap-4"
-                          >
-                            <div className="font-semibold truncate">
-                              {chainageName}
-                            </div>
-                            <div className="text-[10px] bg-background px-2 py-0.5 rounded border font-bold">
-                              {chainageData.detection_count}
-                            </div>
-                          </div>
-                        ),
-                      )}
-                    </div>
-                  </div>
-                ),
-              )}
-            </div>
-          </ScrollArea>
-        </CardContent>
-      </Card>
-
-      <Card className="flex flex-col lg:col-span-3 overflow-hidden">
-        <CardHeader className="pb-3">
-          <div className="flex items-center gap-3">
-            <div className="p-2 rounded bg-secondary">
-              <Activity className="h-5 w-5 text-primary" />
-            </div>
-            <div>
-              <CardTitle className="text-base font-bold">
-                All Detections
-              </CardTitle>
-              <CardDescription className="text-xs">
-                Complete list with GPS coordinates
-              </CardDescription>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent className="flex-1 p-0 overflow-hidden">
-          <ScrollArea className="h-[300px] p-4">
-            <div className="space-y-2">
-              {allDetections.map(({ detection, chainageName }, idx) => (
-                <div
-                  key={`${detection.id}-${idx}`}
-                  className="text-xs p-3 bg-muted/30 border rounded-md hover:bg-muted/50 transition-colors"
-                >
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="font-bold">
-                      {(detection.class || detection.type || '').replace(
-                        /_/g,
-                        ' ',
-                      )}{' '}
-                      #{detection.id}
-                    </span>
-                    <Badge variant="outline" className="text-[10px] font-mono">
-                      Frame {detection.frame_number}
-                    </Badge>
-                  </div>
-                  <div className="grid grid-cols-2 gap-2 text-[10px] text-muted-foreground">
-                    <div className="truncate">
-                      Segment:{' '}
-                      <span className="text-foreground font-medium">
-                        {chainageName}
-                      </span>
-                    </div>
-                    <div>
-                      Confidence:{' '}
-                      <span className="text-foreground font-medium">
-                        {(detection.confidence * 100).toFixed(1)}%
-                      </span>
-                    </div>
-                    <div className="col-span-2 font-mono bg-muted/50 p-1 rounded border">
-                      GPS: {detection.latitude}, {detection.longitude}
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </ScrollArea>
-        </CardContent>
-      </Card>
-
-      {/* Map Modal */}
-      <MapModal
-        open={showMap}
-        onClose={() => setShowMap(false)}
-        detections={allDetections.map(({ detection }) => detection)}
-        detectionType={detectionType}
-      />
-    </div>
-  );
-};
-
-export default DetailedSummarySection;

src/components/video/detailedSummarySection.tsx

@@ -0,0 +1,321 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { Map as MapIcon, Activity } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ChainageSummaryData, DetectionResultLog } from '@/types';
+import { projectSummaryService } from '@/services/api';
+import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
+
+// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
+const MapModal = dynamic(() => import('@/components/map-modal'), {
+  ssr: false,
+});
+
+interface DetailedSummarySectionProps {
+  projectId: string;
+  videoId: string;
+  detectionType: string;
+  logs: DetectionResultLog[];
+}
+
+type DisplayDetection = {
+  id: string | number;
+  type: string;
+  class?: string;
+  confidence?: number;
+  latitude?: number | null;
+  longitude?: number | null;
+  frame_number: number;
+  timestamp_ms?: number;
+  chainageName?: string;
+  packageName?: string;
+};
+
+const DetailedSummarySection = ({
+  projectId,
+  videoId,
+  detectionType,
+  logs,
+}: DetailedSummarySectionProps) => {
+  const [summaryData, setSummaryData] = useState<ChainageSummaryData | null>(
+    null,
+  );
+  const [loading, setLoading] = useState(false);
+  const [showMap, setShowMap] = useState(false);
+
+  useEffect(() => {
+    if (!videoId || !projectId) {
+      setSummaryData(null);
+      setLoading(false);
+      return;
+    }
+
+    const fetchSummary = async () => {
+      setLoading(true);
+      try {
+        const data =
+          await projectSummaryService.getProjectSummaryByVideo<ChainageSummaryData>(
+            projectId,
+            videoId,
+          );
+        setSummaryData(data);
+      } catch (err) {
+        console.error('Failed to fetch summary:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSummary();
+  }, [videoId, projectId]);
+
+  if (!videoId) return null;
+
+  const modeConfig = getDetectionModeConfig(detectionType);
+
+  // Flatten all detections for the scrollable list
+  const summaryDetections: DisplayDetection[] = [];
+
+  Object.entries(summaryData?.packages || {}).forEach(
+    ([packageName, packageData]) => {
+      Object.entries(packageData?.chainages || {}).forEach(
+        ([chainageName, chainageData]) => {
+          chainageData?.detections?.forEach((detection) => {
+            summaryDetections.push({
+              ...detection,
+              chainageName,
+              packageName,
+            });
+          });
+        },
+      );
+    },
+  );
+  const logDetections: DisplayDetection[] = logs.map((log) => ({
+    id: log.id,
+    type: log.type,
+    class: log.label || log.type,
+    confidence: log.confidence,
+    latitude: log.latitude,
+    longitude: log.longitude,
+    frame_number: log.frame,
+    timestamp_ms: Math.round(log.timestamp_seconds * 1000),
+  }));
+  const allDetections = summaryDetections.length
+    ? summaryDetections
+    : logDetections;
+  const mapDetections = allDetections
+    .filter(
+      (detection) =>
+        typeof detection.latitude === 'number' &&
+        typeof detection.longitude === 'number',
+    )
+    .map((detection, index) => ({
+      id:
+        typeof detection.id === 'number'
+          ? detection.id
+          : Number.parseInt(detection.id.replace(/\D/g, ''), 10) || index + 1,
+      type: detection.type,
+      class: detection.class || detection.type,
+      confidence: detection.confidence || 0,
+      latitude: detection.latitude as number,
+      longitude: detection.longitude as number,
+      frame_number: detection.frame_number,
+    }));
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
+      <Card className="flex flex-col lg:col-span-2 overflow-hidden">
+        <CardHeader className="pb-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="p-2 rounded bg-secondary">
+                <MapIcon className="h-5 w-5 text-primary" />
+              </div>
+              <div>
+                <CardTitle className="text-base font-bold">Segments</CardTitle>
+                <CardDescription className="text-xs">
+                  {modeConfig.label} detected
+                </CardDescription>
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowMap(true)}
+              className="gap-2"
+            >
+              <MapIcon className="h-4 w-4" />
+              Map
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 p-0 overflow-hidden">
+          <ScrollArea className="h-[300px]">
+            <div className="space-y-4 p-4">
+              {loading ? (
+                <div className="rounded-md border bg-muted/30 p-6 text-sm text-muted-foreground">
+                  Loading segment summary...
+                </div>
+              ) : summaryData ? (
+                <>
+                  {/* Project Info */}
+                  <div className="pb-3 border-b">
+                    <div className="flex flex-col mb-2">
+                      <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                        Project
+                      </span>
+                      <span className="text-sm font-bold">
+                        {summaryData.project.name}
+                      </span>
+                    </div>
+                    {summaryData.project.corridor_name && (
+                      <div className="flex flex-col">
+                        <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                          Corridor
+                        </span>
+                        <span className="text-xs font-semibold text-muted-foreground">
+                          {summaryData.project.corridor_name}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Packages and Chainages */}
+                  {Object.entries(summaryData.packages).map(
+                    ([packageName, packageData]) => (
+                      <div key={packageData.package_id} className="space-y-2">
+                        <div className="text-xs font-bold text-muted-foreground truncate">
+                          {packageName}
+                        </div>
+                        <div className="pl-2 space-y-2 border-l-2 border-muted">
+                          {Object.entries(packageData.chainages).map(
+                            ([chainageName, chainageData]) => (
+                              <div
+                                key={chainageData.chainage_id}
+                                className="text-xs p-3 rounded-md bg-muted/50 flex items-center justify-between gap-4"
+                              >
+                                <div className="font-semibold truncate">
+                                  {chainageName}
+                                </div>
+                                <div className="text-[10px] bg-background px-2 py-0.5 rounded border font-bold">
+                                  {chainageData.detection_count}
+                                </div>
+                              </div>
+                            ),
+                          )}
+                        </div>
+                      </div>
+                    ),
+                  )}
+                </>
+              ) : (
+                <div className="rounded-md border bg-muted/30 p-6 text-sm text-muted-foreground">
+                  Segment summary is not available for this result.
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+
+      <Card className="flex flex-col lg:col-span-3 overflow-hidden">
+        <CardHeader className="pb-3">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded bg-secondary">
+              <Activity className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle className="text-base font-bold">
+                All Detections
+              </CardTitle>
+              <CardDescription className="text-xs">
+                Complete list with GPS coordinates
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 p-0 overflow-hidden">
+          <ScrollArea className="h-[300px]">
+            <div className="space-y-2 p-4">
+              {allDetections.length === 0 ? (
+                <div className="rounded-md border bg-muted/30 p-6 text-sm text-muted-foreground">
+                  No detailed detections available.
+                </div>
+              ) : (
+                allDetections.map((detection, idx) => (
+                  <div
+                    key={`${detection.id}-${idx}`}
+                    className="text-xs p-3 bg-muted/30 border rounded-md hover:bg-muted/50 transition-colors"
+                  >
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="font-bold">
+                        {(detection.class || detection.type || '').replace(
+                          /_/g,
+                          ' ',
+                        )}{' '}
+                        #{detection.id}
+                      </span>
+                      <Badge variant="outline" className="text-[10px] font-mono">
+                        Frame {detection.frame_number}
+                      </Badge>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2 text-[10px] text-muted-foreground">
+                      {detection.chainageName && (
+                        <div className="truncate">
+                          Segment:{' '}
+                          <span className="text-foreground font-medium">
+                            {detection.chainageName}
+                          </span>
+                        </div>
+                      )}
+                      {typeof detection.confidence === 'number' && (
+                        <div>
+                          Confidence:{' '}
+                          <span className="text-foreground font-medium">
+                            {(detection.confidence * 100).toFixed(1)}%
+                          </span>
+                        </div>
+                      )}
+                      {typeof detection.latitude === 'number' &&
+                      typeof detection.longitude === 'number' ? (
+                        <div className="col-span-2 font-mono bg-muted/50 p-1 rounded border">
+                          GPS: {detection.latitude}, {detection.longitude}
+                        </div>
+                      ) : (
+                        <div className="col-span-2 font-mono bg-muted/50 p-1 rounded border text-muted-foreground">
+                          GPS: Not available
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+
+      {/* Map Modal */}
+      <MapModal
+        open={showMap}
+        onClose={() => setShowMap(false)}
+        detections={mapDetections}
+        detectionType={detectionType}
+      />
+    </div>
+  );
+};
+
+export default DetailedSummarySection;

src/components/video/detectionLogs.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect, useRef } from 'react';
 import { Activity, Film, MapPin } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -21,6 +22,15 @@ const formatVideoTime = (seconds: number) => {
 };
 
 const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
+  const activeLogRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    activeLogRef.current?.scrollIntoView({
+      block: 'nearest',
+      behavior: 'smooth',
+    });
+  }, [activeLogId]);
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
@@ -28,12 +38,9 @@ const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
           <Activity className="h-4 w-4" />
           Detection Logs
         </h4>
-        <Badge variant="secondary" className="text-[10px] font-bold uppercase">
-          Backend Logs
-        </Badge>
       </div>
-      <ScrollArea className="h-[430px] rounded-lg border bg-muted/20 p-4">
-        <div className="space-y-3">
+      <ScrollArea className="h-107.5 rounded-lg border bg-muted/20">
+        <div className="space-y-3 p-4">
           {logs.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
               <Film className="h-8 w-8 mb-2 opacity-20" />
@@ -50,11 +57,12 @@ const DetectionLogs = ({ logs, activeLogId, onSeek }: DetectionLogsProps) => {
               return (
                 <button
                   key={`${log.id}-${log.frame}`}
+                  ref={isActive ? activeLogRef : null}
                   type="button"
                   onClick={() => onSeek(log)}
                   className={cn(
-                    'w-full text-left p-4 rounded border bg-card hover:border-primary transition-all cursor-pointer',
-                    isActive && 'border-primary ring-1 ring-primary/30',
+                    'w-full rounded-md border bg-card p-4 text-left transition-colors hover:border-primary',
+                    isActive && 'border-primary bg-primary/5',
                   )}
                 >
                   <div className="flex items-start justify-between gap-4 mb-3">

src/components/video/resultStatsGrid.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import {
+  Activity,
+  AlertTriangle,
+  Clock,
+  Gauge,
+  SignpostBig,
+} from 'lucide-react';
+import { CompletedVideoResult } from '@/types';
+
+const formatDuration = (seconds: number) => {
+  const safeSeconds = Number.isFinite(seconds) ? seconds : 0;
+  const minutes = Math.floor(safeSeconds / 60);
+  const secs = Math.floor(safeSeconds % 60);
+  return `${minutes}:${secs.toString().padStart(2, '0')}`;
+};
+
+interface ResultStatsGridProps {
+  data: CompletedVideoResult;
+}
+
+export default function ResultStatsGrid({ data }: ResultStatsGridProps) {
+  const stats = [
+    {
+      label: 'Total Detections',
+      value: data.summary.total_detections || 0,
+      icon: Activity,
+      color: 'text-green-500',
+      bgColor: 'bg-green-500/10',
+    },
+    {
+      label: 'Potholes',
+      value: data.summary.unique_potholes || 0,
+      icon: AlertTriangle,
+      color: 'text-orange-500',
+      bgColor: 'bg-orange-500/10',
+    },
+    {
+      label: 'Signboards',
+      value: data.summary.unique_signboards || 0,
+      icon: SignpostBig,
+      color: 'text-blue-500',
+      bgColor: 'bg-blue-500/10',
+    },
+    {
+      label: 'FPS',
+      value: data.fps.toFixed(1),
+      icon: Gauge,
+      color: 'text-purple-500',
+      bgColor: 'bg-purple-500/10',
+    },
+    {
+      label: 'Duration',
+      value: formatDuration(data.duration_seconds),
+      icon: Clock,
+      color: 'text-cyan-500',
+      bgColor: 'bg-cyan-500/10',
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+      {stats.map((stat) => {
+        const Icon = stat.icon;
+
+        return (
+          <div
+            key={stat.label}
+            className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
+          >
+            <div className={`p-2 rounded-md mb-2 ${stat.bgColor}`}>
+              <Icon className={`h-5 w-5 ${stat.color}`} />
+            </div>
+            <div className={`text-xl font-bold ${stat.color}`}>
+              {stat.value}
+            </div>
+            <div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mt-1">
+              {stat.label}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/video/useDetectionPlayback.ts

@@ -0,0 +1,62 @@
+'use client';
+
+import { RefObject, useMemo, useRef, useState } from 'react';
+import { CompletedVideoResult, DetectionResultLog } from '@/types';
+
+interface UseDetectionPlaybackParams {
+  logs: CompletedVideoResult['logs'];
+  videoRef: RefObject<HTMLVideoElement | null>;
+}
+
+export function useDetectionPlayback({
+  logs,
+  videoRef,
+}: UseDetectionPlaybackParams) {
+  const shouldPauseAfterSeekRef = useRef(false);
+  const sortedLogs = useMemo(
+    () => [...(logs || [])].sort((a, b) => a.timestamp_seconds - b.timestamp_seconds),
+    [logs],
+  );
+  const [activeLog, setActiveLog] = useState<DetectionResultLog | undefined>(
+    sortedLogs[0],
+  );
+
+  const handleSeek = (log: DetectionResultLog) => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    shouldPauseAfterSeekRef.current = true;
+    video.pause();
+    video.currentTime = log.timestamp_seconds;
+    setActiveLog(log);
+  };
+
+  const handleSeeked = () => {
+    const video = videoRef.current;
+    if (!video || !shouldPauseAfterSeekRef.current) return;
+
+    shouldPauseAfterSeekRef.current = false;
+    video.pause();
+  };
+
+  const handleTimeUpdate = () => {
+    const video = videoRef.current;
+    if (!video || sortedLogs.length === 0) return;
+
+    const currentLog = sortedLogs.findLast(
+      (log) => log.timestamp_seconds <= video.currentTime,
+    );
+
+    if (currentLog && currentLog.id !== activeLog?.id) {
+      setActiveLog(currentLog);
+    }
+  };
+
+  return {
+    activeLog,
+    sortedLogs,
+    handleSeek,
+    handleSeeked,
+    handleTimeUpdate,
+  };
+}

src/components/videoPlayerSection.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useRef } from 'react';
+import { Film } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { CompletedVideoResult } from '@/types';
+import { useAnnotatedVideoQuery } from '@/app/(modules)/results/hooks/useVideoResults';
+import AnnotatedVideoPlayer from './video/annotatedVideoPlayer';
+import CurrentDetectionBar from './video/currentDetectionBar';
+import DetectionLogs from './video/detectionLogs';
+import DetailedSummarySection from './video/detailedSummarySection';
+import ResultStatsGrid from './video/resultStatsGrid';
+import { useDetectionPlayback } from './video/useDetectionPlayback';
+
+type VideoPlayerSectionProps = {
+  data: CompletedVideoResult;
+  videoId: string;
+  detectionType: string;
+  projectId?: string;
+};
+
+export default function VideoPlayerSection({
+  data,
+  videoId,
+  detectionType,
+  projectId,
+}: VideoPlayerSectionProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const {
+    activeLog,
+    sortedLogs,
+    handleSeek,
+    handleSeeked,
+    handleTimeUpdate,
+  } = useDetectionPlayback({
+    logs: data.logs,
+    videoRef,
+  });
+  const {
+    videoUrl,
+    isLoading: isVideoLoading,
+    isError: isVideoError,
+    refetch: refetchVideo,
+  } = useAnnotatedVideoQuery(data.annotated_video_url);
+
+  return (
+    <div className="space-y-6">
+      <Card className="overflow-hidden">
+        <CardHeader className="pb-4 border-b">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded bg-secondary">
+              <Film className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle className="text-lg font-bold">
+                Detection Playback
+              </CardTitle>
+              <CardDescription className="text-xs">
+                Annotated video with backend detection logs
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="pt-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2 space-y-6">
+              <AnnotatedVideoPlayer
+                videoRef={videoRef}
+                videoUrl={videoUrl}
+                isLoading={isVideoLoading}
+                isError={isVideoError}
+                onRetry={() => void refetchVideo()}
+                onTimeUpdate={handleTimeUpdate}
+                onSeeked={handleSeeked}
+              />
+
+              <ResultStatsGrid data={data} />
+
+              <CurrentDetectionBar
+                activeLog={activeLog}
+                summary={data.summary}
+              />
+            </div>
+
+            <DetectionLogs
+              logs={sortedLogs}
+              activeLogId={activeLog?.id}
+              onSeek={handleSeek}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <DetailedSummarySection
+        projectId={projectId || ''}
+        videoId={videoId}
+        detectionType={detectionType}
+        logs={sortedLogs}
+      />
+    </div>
+  );
+}