refactor: video section

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

@@ -0,0 +1,208 @@
+'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 { DetectionType, ChainageSummaryData } from '@/types';
+import { projectService } from '@/services/api';
+
+// 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: DetectionType;
+}
+
+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 projectService.getProjectSummaryByVideo(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 isCombined = detectionType === 'pot-sign-detection';
+  const isPothole = detectionType === 'pothole-detection' || isCombined;
+
+  // 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">Chainages</CardTitle>
+                <CardDescription className="text-xs">
+                  {isCombined ? 'Potholes & Signboards' : isPothole ? 'Potholes' : 'Signboards'}{' '}
+                  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.type === 'pothole'
+                        ? 'Pothole'
+                        : (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">
+                      Chainage: <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/detection-logs.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { Activity, Film } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { DetectionLogEntry } from '@/types';
+
+interface DetectionLogsProps {
+  logs: DetectionLogEntry[];
+  onSeek: (frame: number) => void;
+}
+
+const DetectionLogs = ({ logs, onSeek }: DetectionLogsProps) => {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-bold flex items-center gap-2">
+          <Activity className="h-4 w-4" />
+          Detection Logs
+        </h4>
+        <Badge variant="secondary" className="text-[10px] font-bold uppercase">
+          Live Logs
+        </Badge>
+      </div>
+      <ScrollArea className="h-[430px] rounded-lg border bg-muted/20 p-4">
+        <div className="space-y-3">
+          {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" />
+              <p className="text-xs">Playback to see logs</p>
+            </div>
+          ) : (
+            logs.map((log, i) => (
+              <div
+                key={`${log.frame}-${i}`}
+                onClick={() => onSeek(log.frame)}
+                className="p-4 rounded border bg-card hover:border-primary transition-all cursor-pointer group"
+              >
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-sm font-bold">Frame: {log.frame}</span>
+                  <span className="text-xs text-muted-foreground/80">{log.videoTime}</span>
+                </div>
+                <div className="space-y-4">
+                  {log.detections.map((d, j) => (
+                    <div key={`${d.id}-${j}`} className="space-y-1">
+                      <div className="text-[13px] font-bold">
+                        {(d.type || '').replace(/ /g, '_')} ID: {d.id} | Confidence:{' '}
+                        {(d.confidence * 100).toFixed(1)}%
+                      </div>
+                      {d.bbox && (
+                        <div className="text-[12px] text-muted-foreground/80 font-medium">
+                          Coordinates: ({Math.round(d.bbox.x1)}, {Math.round(d.bbox.y1)}){' '}
+                          <span className="text-muted-foreground/40">→</span> (
+                          {Math.round(d.bbox.x2)}, {Math.round(d.bbox.y2)})
+                        </div>
+                      )}
+                      {d.latitude && (
+                        <div className="text-[12px] text-muted-foreground/80 font-medium">
+                          GPS: {d.latitude.toFixed(8)}, {d.longitude?.toFixed(8)}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default DetectionLogs;

src/components/video/detection-stats-bar.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { memo } from 'react';
+import { DetectionCounts } from '@/types';
+
+interface DetectionStatsBarProps {
+  currentFrameCounts: DetectionCounts;
+  currentFrame: number;
+  lastDetectedLat: number | null;
+  lastDetectedLng: number | null;
+}
+
+const DetectionStatsBar = memo(
+  ({
+    currentFrameCounts,
+    currentFrame,
+    lastDetectedLat,
+    lastDetectedLng,
+  }: DetectionStatsBarProps) => {
+    return (
+      <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 text-red-500 uppercase tracking-tight">
+              POTHOLE:
+            </span>
+            <span className="text-sm font-bold text-red-600">{currentFrameCounts.pothole}</span>
+          </div>
+          <div className="flex items-center gap-1.5 whitespace-nowrap">
+            <span className="text-[11px] font-bold text-blue-500 uppercase tracking-tight">
+              DEFECT SIGN BOARD:
+            </span>
+            <span className="text-sm font-bold text-blue-600">
+              {currentFrameCounts.defected_sign_board}
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5 whitespace-nowrap">
+            <span className="text-[11px] font-bold text-indigo-500 uppercase tracking-tight">
+              DAMAGE ROAD MARK:
+            </span>
+            <span className="text-sm font-bold text-indigo-600">
+              {currentFrameCounts.damaged_road_marking}
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5 whitespace-nowrap">
+            <span className="text-[11px] font-bold text-orange-500 uppercase tracking-tight">
+              ROADCRACK:
+            </span>
+            <span className="text-sm font-bold text-orange-600">
+              {currentFrameCounts.road_crack}
+            </span>
+          </div>
+        </div>
+
+        <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">
+              {currentFrame}
+            </span>
+          </div>
+          {lastDetectedLat && (
+            <>
+              <div className="flex items-center gap-2">
+                <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
+                  LAT:
+                </span>
+                <span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
+                  {lastDetectedLat.toFixed(7)}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
+                  LNG:
+                </span>
+                <span className="text-xs font-bold font-mono bg-secondary/50 px-2.5 py-1 rounded border border-border/60">
+                  {lastDetectedLng?.toFixed(7)}
+                </span>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+DetectionStatsBar.displayName = 'DetectionStatsBar';
+
+export default DetectionStatsBar;

src/components/video/summary-section.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { Target, SignpostBig, AlertTriangle, Activity, Gauge, Monitor, Film } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DetectionData, DetectionType } from '@/types';
+import { cn } from '@/lib/utils';
+
+interface SummarySectionProps {
+  data: DetectionData;
+  show: boolean;
+  detectionType: DetectionType;
+}
+
+const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
+  if (!show) return null;
+
+  const stats = [
+    {
+      label: 'Total Damage',
+      value: data.summary.total_road_damage || 0,
+      icon: Target,
+      color: 'text-purple-500',
+      bgColor: 'bg-purple-500/10',
+    },
+    {
+      label: 'Defected Signs',
+      value: data.summary.unique_defected_sign_board || 0,
+      icon: SignpostBig,
+      color: 'text-blue-500',
+      bgColor: 'bg-blue-500/10',
+    },
+    {
+      label: 'Unique Potholes',
+      value: data.summary.unique_pothole || 0,
+      icon: AlertTriangle,
+      color: 'text-red-500',
+      bgColor: 'bg-red-500/10',
+    },
+    {
+      label: 'Road Cracks',
+      value: data.summary.unique_road_crack || 0,
+      icon: AlertTriangle,
+      color: 'text-orange-500',
+      bgColor: 'bg-orange-500/10',
+    },
+    {
+      label: 'Markings',
+      value: data.summary.unique_damaged_road_marking || 0,
+      icon: Activity,
+      color: 'text-indigo-500',
+      bgColor: 'bg-indigo-500/10',
+    },
+    {
+      label: 'Good Signs',
+      value: data.summary.unique_good_sign_board || 0,
+      icon: SignpostBig,
+      color: 'text-emerald-500',
+      bgColor: 'bg-emerald-500/10',
+    },
+    {
+      label: 'Rate',
+      value: `${(data.summary.detection_rate || 0).toFixed(1)}%`,
+      icon: Activity,
+      color: 'text-green-500',
+      bgColor: 'bg-green-500/10',
+    },
+    {
+      label: 'Video FPS',
+      value: (data.video_info.fps || 0).toFixed(1),
+      icon: Gauge,
+      color: 'text-orange-500',
+      bgColor: 'bg-orange-500/10',
+    },
+    {
+      label: 'Resolution',
+      value: `${data.video_info.width}×${data.video_info.height}`,
+      icon: Monitor,
+      color: 'text-blue-500',
+      bgColor: 'bg-blue-500/10',
+    },
+    {
+      label: 'Total Frames',
+      value: data.summary.total_frames || data.video_info.total_frames,
+      icon: Film,
+      color: 'text-purple-500',
+      bgColor: 'bg-purple-500/10',
+    },
+  ];
+
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="pb-4">
+        <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">Quick Stats</CardTitle>
+            <CardDescription className="text-xs">Detection analysis overview</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <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={cn('p-2 rounded-md mb-2', stat.bgColor)}>
+                  <Icon className={cn('h-5 w-5', stat.color)} />
+                </div>
+                <div className={cn('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>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SummarySection;

src/components/video/video-canvas-player.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useRef, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { drawBoundingBoxes } from '@/utils/canvas-drawing';
+
+interface VideoCanvasPlayerProps {
+  videoRef: React.RefObject<HTMLVideoElement | null>;
+  canvasRef: React.RefObject<HTMLCanvasElement | null>;
+  videoUrl: string;
+  videoWidth: number;
+  videoHeight: number;
+  videoError: string | null;
+  onLoadedData: () => void;
+  onEnded: () => void;
+  onSeeked: () => void;
+  currentDetections: any[];
+}
+
+export interface VideoCanvasPlayerRef {
+  resize: () => void;
+  drawDetections: (detections: any[]) => void;
+}
+
+const VideoCanvasPlayer = forwardRef<VideoCanvasPlayerRef, VideoCanvasPlayerProps>(
+  (
+    {
+      videoRef,
+      canvasRef,
+      videoUrl,
+      videoWidth,
+      videoHeight,
+      videoError,
+      onLoadedData,
+      onEnded,
+      onSeeked,
+      currentDetections,
+    },
+    ref,
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const detectionsRef = useRef(currentDetections);
+    useEffect(() => {
+      detectionsRef.current = currentDetections;
+    }, [currentDetections]);
+
+    const resize = useCallback(() => {
+      if (!videoRef.current || !canvasRef.current) return;
+      const rect = videoRef.current.getBoundingClientRect();
+      canvasRef.current.width = rect.width;
+      canvasRef.current.height = rect.height;
+
+      // Draw immediately on resize
+      const ctx = canvasRef.current.getContext('2d');
+      if (ctx) {
+        drawBoundingBoxes(
+          ctx,
+          detectionsRef.current,
+          canvasRef.current.width,
+          canvasRef.current.height,
+          videoWidth,
+          videoHeight,
+        );
+      }
+    }, [videoRef, canvasRef, videoWidth, videoHeight]);
+
+    useImperativeHandle(ref, () => ({
+      resize,
+      drawDetections: (detections) => {
+        if (!canvasRef.current) return;
+        const ctx = canvasRef.current.getContext('2d');
+        if (ctx) {
+          drawBoundingBoxes(
+            ctx,
+            detections,
+            canvasRef.current.width,
+            canvasRef.current.height,
+            videoWidth,
+            videoHeight,
+          );
+        }
+      },
+    }));
+
+    useEffect(() => {
+      if (!containerRef.current) return;
+
+      const observer = new ResizeObserver(() => {
+        resize();
+      });
+
+      observer.observe(containerRef.current);
+
+      return () => observer.disconnect();
+    }, [resize]);
+    // Reacting to detections to ensure correct draw on resize
+
+    return (
+      <div className="space-y-6">
+        {videoError && (
+          <Badge variant="destructive" className="mb-4">
+            {videoError}
+          </Badge>
+        )}
+        <div
+          ref={containerRef}
+          className="relative bg-black rounded-lg overflow-hidden border shadow-inner"
+          style={{ aspectRatio: `${videoWidth}/${videoHeight}` }}
+        >
+          <video
+            ref={videoRef}
+            src={videoUrl}
+            controls
+            className="w-full h-full"
+            onLoadedData={onLoadedData}
+            onEnded={onEnded}
+            onSeeked={onSeeked}
+          />
+          <canvas
+            ref={canvasRef}
+            className="absolute top-0 left-0 pointer-events-none w-full h-full"
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+VideoCanvasPlayer.displayName = 'VideoCanvasPlayer';
+
+export default VideoCanvasPlayer;