'use client'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Note } from '@/types/note'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

const typeColors: Record<string, string> = {
  command: 'bg-green-100 text-green-800',
  snippet: 'bg-blue-100 text-blue-800',
  decision: 'bg-purple-100 text-purple-800',
  recipe: 'bg-orange-100 text-orange-800',
  procedure: 'bg-yellow-100 text-yellow-800',
  inventory: 'bg-gray-100 text-gray-800',
  note: 'bg-slate-100 text-slate-800',
}

export function NoteCard({ note }: { note: Note }) {
  const router = useRouter()
  const preview = note.content.slice(0, 100) + (note.content.length > 100 ? '...' : '')
  const typeColor = typeColors[note.type] || typeColors.note

  const handleMouseEnter = () => {
    // Prefetch on hover for faster navigation
    router.prefetch(`/notes/${note.id}`)
  }

  return (
    <Link href={`/notes/${note.id}`} prefetch={true}>
      <Card
        className="hover:shadow-md transition-shadow cursor-pointer h-full"
        onMouseEnter={handleMouseEnter}
      >
        <CardContent className="p-4">
          <div className="flex items-start justify-between gap-2 mb-2">
            <h3 className="font-semibold text-lg line-clamp-1">{note.title}</h3>
            <div className="flex items-center gap-1">
              {note.isPinned && <span className="text-amber-500">📌</span>}
              {note.isFavorite && <span className="text-pink-500">❤️</span>}
            </div>
          </div>

          <div className="flex items-center gap-2 mb-2">
            <Badge className={typeColor}>{note.type}</Badge>
            <span className="text-xs text-gray-500">
              {new Date(note.updatedAt).toLocaleDateString('en-CA')}
            </span>
          </div>

          <p className="text-sm text-gray-600 line-clamp-2 mb-2">{preview}</p>

          {note.tags && note.tags.length > 0 && (
            <div className="flex flex-wrap gap-1">
              {note.tags.map(({ tag }) => (
                <Badge key={tag.id} variant="outline" className="text-xs">
                  {tag.name}
                </Badge>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </Link>
  )
}