'use client'

import { type LucideIcon } from 'lucide-react'
import { Card } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { cn } from '@/lib/utils'

export function PageHeader({
  title,
  description,
  actions,
}: {
  title: string
  description?: string
  actions?: React.ReactNode
}) {
  return (
    <div className="flex flex-col gap-3 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between">
      <div className="space-y-1">
        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
        {description && <p className="max-w-2xl text-sm text-muted-foreground">{description}</p>}
      </div>
      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
    </div>
  )
}

export function KpiCard({
  label,
  value,
  sub,
  icon: Icon,
  delta,
  tone = 'default',
}: {
  label: string
  value: React.ReactNode
  sub?: string
  icon?: LucideIcon
  delta?: { value: string; positive: boolean }
  tone?: 'default' | 'muted'
}) {
  return (
    <Card className={cn('gap-0 p-4', tone === 'muted' && 'bg-muted/40')}>
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0 space-y-1.5">
          <p className="truncate text-xs font-medium text-muted-foreground">{label}</p>
          <p className="text-2xl font-semibold tracking-tight tabular-nums">{value}</p>
          {sub && <p className="text-[11px] text-muted-foreground">{sub}</p>}
        </div>
        {Icon && (
          <div className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border text-muted-foreground">
            <Icon className="size-4" />
          </div>
        )}
      </div>
      {delta && (
        <p className={cn('mt-2 text-[11px] font-medium', delta.positive ? 'text-foreground' : 'text-muted-foreground')}>
          {delta.value}
        </p>
      )}
    </Card>
  )
}

export function CardSkeletons({ count = 4 }: { count?: number }) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      {Array.from({ length: count }).map((_, i) => (
        <Card key={i} className="p-4">
          <Skeleton className="h-3 w-20" />
          <Skeleton className="mt-3 h-7 w-28" />
        </Card>
      ))}
    </div>
  )
}

export function EmptyState({
  icon: Icon,
  title,
  description,
  action,
}: {
  icon: LucideIcon
  title: string
  description?: string
  action?: React.ReactNode
}) {
  return (
    <div className="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-border bg-muted/20 px-6 py-14 text-center">
      <div className="flex size-12 items-center justify-center rounded-full border border-border bg-background">
        <Icon className="size-5 text-muted-foreground" />
      </div>
      <div className="space-y-1">
        <p className="text-sm font-medium">{title}</p>
        {description && <p className="max-w-sm text-xs text-muted-foreground">{description}</p>}
      </div>
      {action}
    </div>
  )
}

export function StatusDot({ status }: { status: string }) {
  const map: Record<string, string> = {
    active: 'bg-foreground',
    paid: 'bg-foreground',
    won: 'bg-foreground',
    done: 'bg-foreground',
    approved: 'bg-foreground',
    pending: 'bg-muted-foreground/60',
    draft: 'bg-muted-foreground/40',
    sent: 'bg-muted-foreground/70',
    planning: 'bg-muted-foreground/60',
    todo: 'bg-muted-foreground/40',
    qualified: 'bg-muted-foreground/70',
    proposal: 'bg-muted-foreground/70',
    negotiation: 'bg-muted-foreground/80',
    'in-progress': 'bg-muted-foreground/80',
    review: 'bg-muted-foreground/80',
    suspended: 'bg-muted-foreground/60',
    expired: 'bg-muted-foreground/40',
    overdue: 'bg-foreground/80',
    lost: 'bg-muted-foreground/40',
    rejected: 'bg-muted-foreground/40',
    expired_assets: 'bg-muted-foreground/40',
    expiring: 'bg-foreground/60',
    cancelled: 'bg-muted-foreground/30',
    storno: 'bg-muted-foreground/30',
  }
  return <span className={cn('inline-block size-1.5 rounded-full', map[status] ?? 'bg-muted-foreground/50')} />
}