"use client"

import { useState } from "react"
import { UploadSection } from "@/components/upload-section"
// import { SummarySection } from "@/components/summary-section"
import VideoPlayerSection from "@/components/video-player-section"

export type DetectionData = {
  video_id: string
  video_info: {
    fps: number
    width: number
    height: number
    total_frames: number
  }
  summary: {
    unique_potholes: number
    total_detections: number
    total_frames: number
    detection_rate: number
  }
  frames: Array<{
    frame_id: number
    potholes: Array<{
      pothole_id: number
      bbox: {
        x1: number
        y1: number
        x2: number
        y2: number
      }
      confidence: number
    }>
  }>
}

export default function PotholeDetectionPage() {
  const [detectionData, setDetectionData] = useState<DetectionData | null>(null)
  const [videoFile, setVideoFile] = useState<File | null>(null)

  return (
    <div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
      <div className="container mx-auto px-4 py-8 max-w-7xl">
        {/* Header */}
        <div className="mb-8 animate-in fade-in slide-in-from-top duration-700">
          <h1 className="text-4xl font-bold mb-2 text-balance bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent">
            Pothole Detection System
          </h1>
          <p className="text-muted-foreground">Upload a video to detect and track potholes with AI-powered analysis</p>
        </div>

        {/* Upload Section */}
        <div className="animate-in fade-in slide-in-from-bottom duration-700 delay-100">
          <UploadSection
            onDetectionComplete={(data, file) => {
              setDetectionData(data)
              setVideoFile(file)
            }}
          />
        </div>

        {/* Summary Section */}
        {/* {detectionData && (
          <div className="mt-6 animate-in fade-in slide-in-from-bottom duration-700">
            <SummarySection data={detectionData} />
          </div>
        )} */}

        {/* Video Player Section */}
        {detectionData && videoFile && (
          <div className="mt-6 animate-in fade-in slide-in-from-bottom duration-700 delay-200">
            <VideoPlayerSection data={detectionData} videoFile={videoFile} />
          </div>
        )}
      </div>
    </div>
  )
}