import { useState } from 'react';
import { Film, Upload } from 'lucide-react';

import { Button, Card, CardContent } from '@ump/shared';
import { VideoQuadViewer } from '@ump/shared/video-viewer';

/**
 * Demo surface for the video dataset quad-viewer (no be0 video dataset model yet).
 * Pick a local original video (+ optional depth video + optional segmentation-mask video) and
 * see the 2×2 quad layout. Q4 (3D reconstruction) is a placeholder until a recon source exists.
 */
export function VideoViewerDemoPage() {
  const [video, setVideo] = useState<File | undefined>();
  const [depth, setDepth] = useState<File | undefined>();
  const [seg, setSeg] = useState<File | undefined>();

  return (
    <div className="mx-auto flex h-full max-w-6xl flex-col gap-4">
      <div className="flex items-center gap-2.5">
        <Film className="h-6 w-6 shrink-0 text-primary" />
        <div>
          <h1 className="font-serif text-2xl font-semibold text-foreground">Trình xem video</h1>
          <p className="text-sm text-muted-foreground">
            Bộ xem 4 khung: video gốc · bản đồ độ sâu · mặt nạ phân vùng · tái tạo 3D (tạm để trống).
          </p>
        </div>
      </div>

      {/* Source pickers */}
      <Card>
        <CardContent className="flex flex-wrap gap-3 p-4">
          <FilePicker label="Video gốc" accept="video/*" file={video} onPick={setVideo} />
          <FilePicker label="Bản đồ độ sâu" accept="video/*" file={depth} onPick={setDepth} />
          <FilePicker label="Mặt nạ phân vùng" accept="video/*,image/*" file={seg} onPick={setSeg} />
        </CardContent>
      </Card>

      {/* Quad viewer */}
      <div className="min-h-0 flex-1">
        {video ? (
          <div className="h-[68vh] w-full overflow-hidden rounded-md bg-black">
            <VideoQuadViewer
              video={{ file: video, label: 'Video gốc' }}
              depth={depth ? { file: depth, label: 'Bản đồ độ sâu' } : undefined}
              segmentation={seg ? { file: seg, label: 'Mặt nạ phân vùng', opacity: 0.6 } : undefined}
              recon={{ placeholderText: 'Tái tạo 3D — chưa có dữ liệu' }}
            />
          </div>
        ) : (
          <Card className="flex h-[68vh] items-center justify-center text-center">
            <CardContent className="py-12">
              <Film className="mx-auto mb-3 h-10 w-10 text-muted-foreground" />
              <p className="text-sm text-muted-foreground">
                Chọn một video gốc để bắt đầu. Bản đồ độ sâu và mặt nạ phân vùng là tuỳ chọn.
              </p>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  );
}

function FilePicker({
  label,
  accept,
  file,
  onPick,
}: {
  label: string;
  accept: string;
  file?: File;
  onPick: (f: File | undefined) => void;
}) {
  const inputId = `pick-${label}`;
  return (
    <div className="flex flex-col gap-1">
      <span className="text-xs font-medium text-muted-foreground">{label}</span>
      <input
        id={inputId}
        type="file"
        accept={accept}
        className="hidden"
        onChange={(e) => onPick(e.target.files?.[0])}
      />
      <Button asChild variant="outline" size="sm" className="h-9">
        <label htmlFor={inputId} className="cursor-pointer">
          <Upload className="mr-1.5 h-4 w-4" />
          <span className="max-w-[160px] truncate">{file ? file.name : 'Chọn tệp…'}</span>
        </label>
      </Button>
    </div>
  );
}
