'use client'

import type { EvidenceStage } from '@/lib/storage/evidence'

type EvidenceFile = {
  id: string
  stage: string
  file_url: string
  file_type: string
  uploaded_at: string
}

interface Props {
  files: EvidenceFile[]
  stage?: EvidenceStage
}

function isImage(type: string) { return type.startsWith('image/') }
function isVideo(type: string) { return type.startsWith('video/') }


export function EvidenceGallery({ files, stage }: Props) {
  const filtered = stage ? files.filter(f => f.stage === stage) : files
  if (filtered.length === 0) return <p className="text-sm text-gray-400">No files for this stage</p>

  return (
    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
      {filtered.map(file => (
        <a
          key={file.id}
          href={file.file_url}
          target="_blank"
          rel="noopener noreferrer"
          className="block rounded-lg overflow-hidden bg-gray-100 aspect-square hover:opacity-90 transition-opacity"
        >
          {isImage(file.file_type) ? (
            <img
              src={file.file_url}
              alt="Evidence"
              loading="lazy"
              className="w-full h-full object-cover"
            />
          ) : isVideo(file.file_type) ? (
            <div className="w-full h-full flex items-center justify-center text-3xl">🎥</div>
          ) : (
            <div className="w-full h-full flex items-center justify-center text-3xl">📄</div>
          )}
        </a>
      ))}
    </div>
  )
}