'use client'

import { Note } from '@/lib/types'
import { Clock } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLanguage } from '@/lib/i18n'

interface RecentNotesSectionProps {
  recentNotes: Note[]
  onEdit?: (note: Note, readOnly?: boolean) => void
}

export function RecentNotesSection({ recentNotes, onEdit }: RecentNotesSectionProps) {
  const { t } = useLanguage()

  const topThree = recentNotes.slice(0, 3)

  if (topThree.length === 0) return null

  return (
    <section data-testid="recent-notes-section" className="mb-6">
      <div className="flex items-center gap-2 mb-3 px-1">
        <Clock className="w-3.5 h-3.5 text-muted-foreground" />
        <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
          {t('notes.recent')}
        </span>
        <span className="text-xs text-muted-foreground">
          · {topThree.length}
        </span>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        {topThree.map((note, index) => (
          <CompactCard
            key={note.id}
            note={note}
            index={index}
            onEdit={onEdit}
          />
        ))}
      </div>
    </section>
  )
}

function CompactCard({
  note,
  index,
  onEdit
}: {
  note: Note
  index: number
  onEdit?: (note: Note, readOnly?: boolean) => void
}) {
  const { t } = useLanguage()
  const timeAgo = getCompactTime(note.contentUpdatedAt || note.updatedAt, t)
  const isFirstNote = index === 0

  return (
    <button
      onClick={() => onEdit?.(note)}
      className={cn(
        "group relative text-left p-4 bg-card border rounded-xl shadow-sm hover:shadow-md transition-all duration-200 min-h-[44px]",
        isFirstNote && "ring-2 ring-primary/20"
      )}
    >
      <div className={cn(
        "absolute left-0 top-0 bottom-0 w-1 rounded-l-xl",
        isFirstNote
          ? "bg-gradient-to-b from-primary to-primary/70"
          : index === 1
            ? "bg-primary/80 dark:bg-primary/70"
            : "bg-muted dark:bg-muted/60"
      )} />

      <div className="pl-2">
        <h3 className="text-sm font-semibold text-foreground line-clamp-1 mb-2">
          {note.title || t('notes.untitled')}
        </h3>

        <p className="text-xs text-muted-foreground line-clamp-2 mb-3 min-h-[2.5rem]">
          {note.content?.substring(0, 80) || ''}
          {note.content && note.content.length > 80 && '...'}
        </p>

        <div className="flex items-center justify-between pt-2 border-t border-border">
          <span className="text-xs text-muted-foreground flex items-center gap-1">
            <Clock className="w-3 h-3" />
            <span className="font-medium">{timeAgo}</span>
          </span>

          <div className="flex items-center gap-1.5">
            {note.notebookId && (
              <div className="w-1.5 h-1.5 rounded-full bg-primary dark:bg-primary/70" title={t('notes.inNotebook')} />
            )}
            {note.labels && note.labels.length > 0 && (
              <div className="w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400" title={t('labels.count', { count: note.labels.length })} />
            )}
          </div>
        </div>
      </div>

      <div className="absolute top-3 right-3 w-2 h-2 rounded-full bg-primary opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
    </button>
  )
}

function getCompactTime(date: Date | string, t: (key: string, params?: Record<string, any>) => string): string {
  const now = new Date()
  const then = date instanceof Date ? date : new Date(date)

  if (isNaN(then.getTime())) {
    console.warn('Invalid date provided to getCompactTime:', date)
    return t('common.error')
  }

  const seconds = Math.floor((now.getTime() - then.getTime()) / 1000)
  const minutes = Math.floor(seconds / 60)
  const hours = Math.floor(minutes / 60)

  if (seconds < 60) return t('time.justNow')
  if (minutes < 60) return t('time.minutesAgo', { count: minutes })
  if (hours < 24) return t('time.hoursAgo', { count: hours })
  const days = Math.floor(hours / 24)
  return t('time.daysAgo', { count: days })
}