road-monitoring-ui/src/components/videoPlayerSection.tsx

'use client';

import { useRef } from 'react';
import type { MediaPlayerInstance } from '@vidstack/react';
import { Film } from 'lucide-react';

import { useProtectedVideoQuery } from '@/app/(modules)/results/hooks/useVideoResults';
import type { CompletedVideoResult } from '@/types';

import DetectionLocationMap from './map/detectionLocationMap';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from './ui/card';
import AnnotatedDetectionImage from './video/annotatedDetectionImage';
import AnnotatedVideoPlayer from './video/annotatedVideoPlayer';
import CurrentDetectionBar from './video/currentDetectionBar';
import DetectionLogs from './video/detectionLogs';
import ResultStatsGrid from './video/resultStatsGrid';
import { useVideoAnnotationPlayback } from './video/useVideoAnnotationPlayback';

type VideoPlayerSectionProps = {
  data: CompletedVideoResult;
};

export default function VideoPlayerSection({ data }: VideoPlayerSectionProps) {
  const videoRef = useRef<MediaPlayerInstance | null>(null);
  const {
    activeLog,
    handleSeek,
    handleSeeked,
    handleTimeUpdate,
    handleVideoFrame,
    sortedLogs,
    visibleDetections,
  } = useVideoAnnotationPlayback({
    videoId: data.video_id,
    logs: data.logs,
    fps: data.summary.fps,
    videoRef,
  });
  const {
    videoUrl,
    isLoading: isVideoLoading,
    isError: isVideoError,
    refetch: refetchVideo,
  } = useProtectedVideoQuery(data.raw_video_url);
  const mediaAspectRatio =
    data.summary.video_width > 0 && data.summary.video_height > 0
      ? `${data.summary.video_width} / ${data.summary.video_height}`
      : '16 / 9';
  const activeMapLabel = activeLog
    ? `${activeLog.detection.display_name} - Frame ${activeLog.frame.number}`
    : 'Detection';

  return (
    <div className="space-y-6">
      <Card className="overflow-hidden">
        <CardHeader className="border-b pb-4">
          <div className="flex items-center gap-3">
            <div className="rounded bg-secondary p-2">
              <Film className="h-5 w-5 text-primary" />
            </div>
            <div>
              <CardTitle className="text-lg font-bold">
                Detection Playback
              </CardTitle>
              <CardDescription className="text-xs">
                Raw video with frontend annotation overlay and selected
                detection location
              </CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="pt-6">
          <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div className="space-y-6 lg:col-span-2">
              <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">
                  Detection Video
                </p>
                <AnnotatedVideoPlayer
                  videoRef={videoRef}
                  logs={sortedLogs}
                  visibleDetections={visibleDetections}
                  videoWidth={data.summary.video_width}
                  videoHeight={data.summary.video_height}
                  videoUrl={videoUrl}
                  isLoading={isVideoLoading}
                  isError={isVideoError}
                  onRetry={() => void refetchVideo()}
                  onTimeUpdate={handleTimeUpdate}
                  onVideoFrame={handleVideoFrame}
                  onSeeked={handleSeeked}
                />
              </div>

              <div className="grid gap-4 xl:grid-cols-[minmax(0,1.65fr)_minmax(280px,1fr)]">
                <div className="space-y-2">
                  <p className="text-xs font-medium text-muted-foreground">
                    Annotated Image
                  </p>
                  <AnnotatedDetectionImage
                    detection={activeLog}
                    videoWidth={data.summary.video_width}
                    videoHeight={data.summary.video_height}
                  />
                </div>

                <DetectionLocationMap
                  latitude={activeLog?.location.latitude ?? null}
                  longitude={activeLog?.location.longitude ?? null}
                  label={activeMapLabel}
                  title="Location on Map"
                  variant="plain"
                  aspectRatio={mediaAspectRatio}
                  showCoordinates={false}
                />
              </div>

              <CurrentDetectionBar activeLog={activeLog} data={data} />
            </div>

            <DetectionLogs
              logs={sortedLogs}
              activeLogId={activeLog?.id}
              onSelect={handleSeek}
            />
          </div>

          <div className="mt-6">
            <ResultStatsGrid data={data} />
          </div>
        </CardContent>
      </Card>
    </div>
  );
}