import { useQuery } from '@tanstack/react-query'
import { photos } from '../../services/api'
import type { MemoryGroup } from '../../services/api'

export function MemoriesView() {
  const { data, isLoading } = useQuery({
    queryKey: ['memories'],
    queryFn: () => photos.memories(),
    staleTime: 60_000 * 30, // 30 min — date doesn't change often
  })

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64 text-neutral-500">
        Loading memories...
      </div>
    )
  }

  const memories = data?.memories ?? []

  if (memories.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-64 text-neutral-500 gap-2">
        <p className="text-lg font-medium">No memories for today</p>
        <p className="text-sm">Photos taken on this date in previous years will appear here.</p>
      </div>
    )
  }

  return (
    <div className="p-6 space-y-8 max-w-5xl mx-auto">
      <h2 className="text-xl font-semibold text-neutral-200">
        On This Day &mdash; {data?.date}
      </h2>

      {memories.map((group: MemoryGroup) => (
        <section key={group.year} className="space-y-3">
          <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-wide">
            {group.year} &middot; {group.years_ago} year{group.years_ago !== 1 ? 's' : ''} ago
          </h3>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2">
            {group.photos.map((photo) => (
              <div
                key={photo.id}
                className="aspect-square rounded-lg overflow-hidden bg-neutral-800 relative group"
              >
                {photo.thumb_small ? (
                  <img
                    src={`/api/v1/photos/${photo.id}/thumb/small`}
                    alt={photo.filename}
                    className="w-full h-full object-cover"
                    loading="lazy"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center text-neutral-600 text-xs">
                    No thumb
                  </div>
                )}
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity">
                  <p className="text-xs text-white truncate">{photo.filename}</p>
                </div>
              </div>
            ))}
          </div>
        </section>
      ))}
    </div>
  )
}