"use client"

import { Album, Category, Gallery, Tag } from "@/generated/prisma"
import { CalendarDaysIcon, ImagesIcon, LayersIcon, QuoteIcon, TagIcon } from "lucide-react"
import Link from "next/link"

type Props = {
  album: Album & {
    gallery: Gallery | null
  } | null
  categories: Category[]
  tags: Tag[]
  creationDate?: Date | null
  creationYear?: number | null
  creationMonth?: number | null
  altText?: string | null
  description?: string | null
}

export default function ImageMetadataBox({
  album,
  categories,
  tags,
  creationDate,
  creationYear,
  creationMonth,
  altText,
  description
}: Props) {
  const creationLabel = creationDate
    ? new Date(creationDate).toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    })
    : creationYear && creationMonth
      ? `${creationMonth.toString().padStart(2, "0")}/${creationYear}`
      : null

  return (
    <div className="border rounded-lg p-4 shadow bg-muted/20 w-full max-w-xl space-y-3">
      {altText && (
        <div className="flex items-center gap-2">
          <TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
          <span className="text-sm text-muted-foreground">{altText}</span>
        </div>
      )}

      {description && (
        <div className="flex items-center gap-2">
          <QuoteIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
          <span className="text-sm text-muted-foreground">{description}</span>
        </div>
      )}

      {creationLabel && (
        <div className="flex items-center gap-2">
          <CalendarDaysIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
          <span className="text-sm text-muted-foreground">{creationLabel}</span>
        </div>
      )}

      {album && (
        <div className="flex items-center gap-2  flex-wrap">
          <ImagesIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
          <Link href={`/galleries/${album.gallery?.slug}/${album.slug}`} className="text-sm underline">
            {album.name}
          </Link>
        </div>
      )}

      {categories.length > 0 && (
        <div className="flex items-center gap-2 flex-wrap">
          <LayersIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
          {categories.map((cat) => (
            <Link
              key={cat.id}
              href={`/categories/${cat.id}`}
              className="text-sm underline"
            >
              {cat.name}
            </Link>
          ))}
        </div>
      )}

      {tags.length > 0 && (
        <div className="flex items-center gap-2 flex-wrap">
          <TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
          {tags.map((tag) => (
            <Link
              key={tag.id}
              href={`/tags/${tag.id}`}
              className="text-sm underline"
            >
              {tag.name}
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}