"use client"

import { useEffect, useState } from "react"
import type { AssetResponse } from "@/lib/types"
import { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
import { Checkbox } from "@/components/ui/checkbox"
import { getTokens } from "@/lib/auth"
import { ImageIcon } from "lucide-react"

interface PhotoCardProps {
  asset: AssetResponse
  selected?: boolean
  selectable?: boolean
  onClick?: () => void
  onSelect?: (selected: boolean) => void
}

export function PhotoCard({
  asset,
  selected,
  selectable,
  onClick,
  onSelect,
}: PhotoCardProps) {
  const [src, setSrc] = useState<string | null>(null)
  const [failed, setFailed] = useState(false)

  useEffect(() => {
    let revoke: string | null = null
    setFailed(false)
    const { access } = getTokens()
    const headers: HeadersInit = access
      ? { Authorization: `Bearer ${access}` }
      : {}
    fetch(`/api/v1/assets/${asset.id}/derivatives/thumbnail_square`, {
      headers,
    })
      .then((r) => (r.ok ? r.blob() : Promise.reject()))
      .then((blob) => {
        revoke = URL.createObjectURL(blob)
        setSrc(revoke)
      })
      .catch(() => setFailed(true))
    return () => {
      if (revoke) URL.revokeObjectURL(revoke)
    }
  }, [asset.id])

  return (
    <div
      className={`group relative aspect-square cursor-pointer overflow-hidden rounded-md bg-muted ${selected ? "ring-2 ring-primary ring-offset-2" : ""}`}
      onClick={selectable ? () => onSelect?.(!selected) : onClick}
    >
      {src ? (
        <img
          src={src}
          alt=""
          className="h-full w-full object-cover transition-transform group-hover:scale-105"
        />
      ) : failed ? (
        <div className="flex h-full w-full items-center justify-center">
          <ImageIcon className="h-8 w-8 text-muted-foreground/40" />
        </div>
      ) : (
        <Skeleton className="h-full w-full" />
      )}
      <div className="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/30" />
      {selectable && (
        <div className="absolute top-1.5 left-1.5">
          <Checkbox
            checked={selected}
            onCheckedChange={(c) => onSelect?.(c === true)}
            onClick={(e) => e.stopPropagation()}
            className="border-white bg-black/30"
          />
        </div>
      )}
      <div className="absolute bottom-0 left-0 right-0 translate-y-full p-2 transition-transform group-hover:translate-y-0">
        <Badge variant="secondary" className="text-xs">
          {asset.asset_type}
        </Badge>
      </div>
    </div>
  )
}