import Link from 'next/link'
import { Sparkles } from 'lucide-react'
import { ItemThumb } from './item-thumb'
import type { SearchResult } from '@/lib/search'

const statusLabel: Record<string, { text: string; cls: string }> = {
  ACTIVE: { text: '', cls: '' },
  LOANED: { text: 'loaned', cls: 'bg-amber-100 text-amber-800' },
  DISPOSED: { text: 'disposed', cls: 'bg-zinc-100 text-zinc-600' },
  LOST: { text: 'lost', cls: 'bg-rose-100 text-rose-800' },
}

export function ItemRow({ item }: { item: SearchResult }) {
  const s = statusLabel[item.status] ?? statusLabel.ACTIVE
  const queued = item.needsAIReview
  return (
    <Link
      href={`/items/${item.id}`}
      className={
        queued
          ? 'flex items-center gap-3 p-3 rounded-xl border bg-amber-50/60 dark:bg-amber-950/20 border-amber-200/60 dark:border-amber-900/40 hover:bg-amber-100/60 dark:hover:bg-amber-950/40 transition-colors'
          : 'flex items-center gap-3 p-3 rounded-xl border bg-card hover:bg-accent/40 transition-colors'
      }
    >
      <ItemThumb thumbPath={item.thumbPath} alt={item.name} size={64} />
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <div className="font-medium truncate">{item.name}</div>
          {item.qty > 1 && (
            <span className="text-xs text-muted-foreground">×{item.qty}</span>
          )}
          {queued && (
            <span className="inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-wide px-1.5 py-0.5 rounded bg-amber-200/80 text-amber-900 dark:bg-amber-900/60 dark:text-amber-200">
              <Sparkles className="size-3" />
              Queued
            </span>
          )}
          {s.text && (
            <span className={`text-[10px] font-medium uppercase tracking-wide px-1.5 py-0.5 rounded ${s.cls}`}>
              {s.text}
            </span>
          )}
        </div>
        <div className="text-xs text-muted-foreground truncate">
          {item.locationPath}
        </div>
        {item.description && (
          <div className="text-xs text-muted-foreground/80 truncate mt-0.5">
            {item.description}
          </div>
        )}
      </div>
    </Link>
  )
}