'use client'

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

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/') }

// Supabase Storage image transform endpoint. Falls back to the original object
// URL via onError if the project plan has no image transformation.
function thumbnailUrl(url: string, width = 320): string {
  if (!url.includes('/storage/v1/object/public/')) return url
  return `${url.replace('/storage/v1/object/public/', '/storage/v1/render/image/public/')}?width=${width}&quality=60`
}

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={thumbnailUrl(file.file_url)}
              alt="Evidence"
              loading="lazy"
              className="w-full h-full object-cover"
              onError={e => {
                const img = e.currentTarget
                if (img.src !== file.file_url) img.src = file.file_url
              }}
            />
          ) : 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>
  )
}