mule-image/frontend/src/components/rated/RatedView.tsx

import { useState, useMemo, useCallback } from 'react'
import { Star, ArrowLeft, Loader2 } from 'lucide-react'
import clsx from 'clsx'
import { photos as photosApi } from '../../services/api'
import { useFilterStore } from '../../store/filterStore'
import { usePhotosQuery } from '../../hooks/usePhotosQuery'
import { useCardGridNav } from '../../hooks/useCardGridNav'
import { Timeline } from '../timeline/Timeline'
import type { Photo } from '../../types/photo'

interface RatingGroup {
  rating: number
  label: string
  count: number
  representative: Photo | null
}

/**
 * Rated view — two states:
 * 1. Grid of rating-level cards (default) — arrow keys + Enter to browse
 * 2. Detail view showing a rating level's photos in the full Timeline — Esc to go back
 */
export function RatedView() {
  const { data: allPhotos = [], isLoading } = usePhotosQuery()
  const setRatingMin = useFilterStore((s) => s.setRatingMin)
  const setRatingMax = useFilterStore((s) => s.setRatingMax)
  const [selectedGroup, setSelectedGroup] = useState<RatingGroup | null>(null)

  const groups = useMemo(() => {
    const buckets = new Map<number, Photo[]>()

    for (const photo of allPhotos) {
      if (photo.rating > 0) {
        const arr = buckets.get(photo.rating) ?? []
        arr.push(photo)
        buckets.set(photo.rating, arr)
      }
    }

    // Highest rating first
    const result: RatingGroup[] = []
    for (let r = 5; r >= 1; r--) {
      const photos = buckets.get(r) ?? []
      if (photos.length === 0) continue
      result.push({
        rating: r,
        label: '★'.repeat(r),
        count: photos.length,
        representative: photos[0],
      })
    }
    return result
  }, [allPhotos])

  const enterDetail = useCallback(
    (group: RatingGroup) => {
      setRatingMin(group.rating)
      setRatingMax(group.rating)
      setSelectedGroup(group)
    },
    [setRatingMin, setRatingMax]
  )

  const exitDetail = useCallback(() => {
    // Restore the section preset: ratingMin=1 (all rated), no max
    setRatingMin(1)
    setRatingMax(0)
    setSelectedGroup(null)
  }, [setRatingMin, setRatingMax])

  const { activeIndex, gridRef } = useCardGridNav({
    items: groups,
    inDetail: selectedGroup !== null,
    onEnter: enterDetail,
    onExit: exitDetail,
  })

  if (selectedGroup) {
    return (
      <div className="flex h-full flex-col overflow-hidden">
        <div className="flex items-center gap-3 border-b border-border px-4 py-3">
          <button
            onClick={exitDetail}
            className="rounded p-1 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
            title="Back to ratings"
          >
            <ArrowLeft className="h-4 w-4" />
          </button>
          <h2 className="text-sm font-semibold text-amber-400">{selectedGroup.label}</h2>
        </div>
        <div className="flex-1 overflow-hidden">
          <Timeline />
        </div>
      </div>
    )
  }

  if (isLoading) {
    return (
      <div className="flex h-full items-center justify-center text-text-muted">
        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
        Loading ratings...
      </div>
    )
  }

  if (groups.length === 0) {
    return (
      <div className="flex h-full flex-col items-center justify-center gap-3 text-text-muted">
        <Star className="h-12 w-12 opacity-40" />
        <p className="text-sm">No rated photos yet</p>
        <p className="max-w-xs text-center text-xs opacity-70">
          Rate photos with 1–5 stars and they will appear here grouped by
          rating.
        </p>
      </div>
    )
  }

  return (
    <div className="h-full overflow-auto p-4">
      <div className="mb-4 flex items-center gap-2 text-text-muted">
        <Star className="h-4 w-4" />
        <span className="text-sm font-medium">
          {groups.length} rating {groups.length === 1 ? 'level' : 'levels'}
        </span>
      </div>

      <div
        ref={gridRef}
        className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3"
      >
        {groups.map((group, i) => (
          <div
            key={group.rating}
            className={clsx(
              'group cursor-pointer overflow-hidden rounded-lg border bg-surface transition-all hover:border-primary/50 hover:shadow-md',
              i === activeIndex
                ? 'border-primary ring-1 ring-primary/30'
                : 'border-border'
            )}
            onClick={() => enterDetail(group)}
          >
            <div className="relative aspect-square overflow-hidden bg-surface-2">
              {group.representative ? (
                <img
                  src={photosApi.getThumbnailUrl(group.representative.id, 'small')}
                  alt={group.label}
                  className="h-full w-full object-cover"
                />
              ) : (
                <div className="flex h-full w-full items-center justify-center">
                  <Star className="h-10 w-10 text-text-muted/30" />
                </div>
              )}

              <span className="absolute bottom-1.5 right-1.5 rounded-full bg-black/60 px-2 py-0.5 text-[11px] font-medium text-white backdrop-blur-sm">
                {group.count}
              </span>
            </div>

            <div className="px-2 py-1.5">
              <p className="truncate text-xs font-medium text-amber-400">{group.label}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}