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

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

/**
 * Demo surface for the 2D image-sequence quad-viewer (no be0 image-sequence model yet).
 * Pick a FOLDER of PNG/JPG frames per channel (original / depth / segmentation); the viewer
 * natural-sorts them and the frame slider scrubs all panes in sync. Q4 fuses seg over original.
 */
const IMAGE_RE = /\.(png|jpe?g|bmp|webp)$/i;

export function ImageSequenceDemoPage() {
  const [original, setOriginal] = useState<File[]>([]);
  const [depth, setDepth] = useState<File[]>([]);
  const [seg, setSeg] = useState<File[]>([]);

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

      <Card>
        <CardContent className="flex flex-wrap gap-3 p-4">
          <FolderPicker label="Ảnh gốc" files={original} onPick={setOriginal} />
          <FolderPicker label="Bản đồ độ sâu" files={depth} onPick={setDepth} />
          <FolderPicker label="Mặt nạ phân vùng" files={seg} onPick={setSeg} />
        </CardContent>
      </Card>

      <div className="min-h-0 flex-1">
        {original.length > 0 ? (
          <div className="h-[66vh] w-full overflow-hidden rounded-md bg-black">
            <ImageSequenceViewer
              original={{ files: original, label: 'Ảnh gốc' }}
              depth={depth.length ? { files: depth, label: 'Bản đồ độ sâu' } : undefined}
              segmentation={seg.length ? { files: seg, label: 'Mặt nạ phân vùng', opacity: 0.6 } : undefined}
              fps={10}
            />
          </div>
        ) : (
          <Card className="flex h-[66vh] items-center justify-center text-center">
            <CardContent className="py-12">
              <Images className="mx-auto mb-3 h-10 w-10 text-muted-foreground" />
              <p className="text-sm text-muted-foreground">
                Chọn một thư mục ảnh 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 FolderPicker({
  label,
  files,
  onPick,
}: {
  label: string;
  files: File[];
  onPick: (f: File[]) => 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"
        multiple
        accept="image/*"
        className="hidden"
        // webkitdirectory is non-standard; set via ref so TS/JSX stays happy.
        ref={(el) => {
          if (el) el.setAttribute('webkitdirectory', '');
        }}
        onChange={(e) => {
          const picked = Array.from(e.target.files ?? []).filter((f) => IMAGE_RE.test(f.name));
          onPick(picked);
        }}
      />
      <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">
            {files.length ? `${files.length} ảnh` : 'Chọn thư mục…'}
          </span>
        </label>
      </Button>
    </div>
  );
}
