import { Link } from '@tanstack/react-router'
import { Loader2 } from 'lucide-react'
import { Badge } from '@/components/ui/badge'

export function timeAgo(dateStr: string) {
  const now = Date.now()
  const then = new Date(dateStr).getTime()
  const diff = now - then
  const mins = Math.floor(diff / 60000)
  if (mins < 1) return 'Az önce'
  if (mins < 60) return `${mins} dk önce`
  const hours = Math.floor(mins / 60)
  if (hours < 24) return `${hours} saat önce`
  const days = Math.floor(hours / 24)
  if (days < 7) return `${days} gün önce`
  return new Date(dateStr).toLocaleDateString('tr-TR', { day: 'numeric', month: 'short' })
}

export function MiniStat({
  icon: Icon, label, value, href, color, bg,
}: {
  icon: React.ElementType; label: string; value: number; href: string; color: string; bg: string
}) {
  return (
    <Link to={href}>
      <div className={`flex items-center gap-3 rounded-2xl border border-border/50 px-4 py-3.5 transition hover:shadow-md ${bg}`}>
        <div className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-background shadow-sm ${color}`}>
          <Icon className='size-5' />
        </div>
        <div>
          <span className='text-xl font-bold tracking-tight'>{value}</span>
          <p className='text-[11px] text-muted-foreground'>{label}</p>
        </div>
      </div>
    </Link>
  )
}

export function StatusDot({ status }: { status: string }) {
  const config: Record<string, { color: string; label: string }> = {
    new: { color: 'bg-blue-500', label: 'Yeni' },
    contacted: { color: 'bg-amber-500', label: 'Arandı' },
    enrolled: { color: 'bg-emerald-500', label: 'Kayıt' },
    rejected: { color: 'bg-red-500', label: 'İptal' },
  }
  const c = config[status] ?? { color: 'bg-muted-foreground', label: status }
  return (
    <Badge variant='outline' className='rounded-full px-1.5 py-0 text-[10px] gap-1'>
      <span className={`size-1.5 rounded-full ${c.color}`} />
      {c.label}
    </Badge>
  )
}

export function CmsRow({
  icon: Icon, label, count, href, badge,
}: {
  icon: React.ElementType; label: string; count: number; href: string; badge?: string
}) {
  return (
    <Link to={href}>
      <div className='flex items-center justify-between rounded-lg px-2 py-2 text-sm transition hover:bg-muted/50'>
        <div className='flex items-center gap-2 text-muted-foreground'>
          <Icon className='size-3.5' />
          {label}
        </div>
        {badge ? (
          <Badge variant='outline' className='rounded-full text-[10px]'>{badge}</Badge>
        ) : (
          <span className='font-semibold tabular-nums'>{count}</span>
        )}
      </div>
    </Link>
  )
}

export function LoadingPlaceholder() {
  return (
    <div className='flex items-center justify-center py-8 text-muted-foreground'>
      <Loader2 className='size-4 animate-spin' />
    </div>
  )
}

export function EmptyPlaceholder({ text }: { text: string }) {
  return (
    <div className='py-6 text-center text-xs text-muted-foreground'>{text}</div>
  )
}
