import { cn } from '@/lib/utils'

// ── Base pulse block ─────────────────────────────────────────────
export function Skeleton({ className }: { className?: string }) {
  return (
    <div className={cn('animate-pulse rounded-md bg-gray-200', className)} />
  )
}

// ── Property Card Skeleton ────────────────────────────────────────
export function PropertyCardSkeleton({ listMode = false }: { listMode?: boolean }) {
  if (listMode) {
    return (
      <div className="bg-white rounded-xl border flex overflow-hidden animate-pulse">
        <div className="w-52 h-36 bg-gray-200 shrink-0" />
        <div className="p-4 flex-1 space-y-3">
          <Skeleton className="h-5 w-3/4" />
          <Skeleton className="h-3 w-1/2" />
          <Skeleton className="h-6 w-1/3" />
          <div className="flex gap-4 pt-2 border-t mt-auto">
            <Skeleton className="h-3 w-12" />
            <Skeleton className="h-3 w-12" />
            <Skeleton className="h-3 w-16" />
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="bg-white rounded-xl border overflow-hidden animate-pulse">
      <div className="h-48 bg-gray-200" />
      <div className="p-4 space-y-3">
        <Skeleton className="h-5 w-3/4" />
        <Skeleton className="h-3 w-1/2" />
        <Skeleton className="h-6 w-1/3" />
        <div className="flex gap-4 pt-3 border-t">
          <Skeleton className="h-3 w-10" />
          <Skeleton className="h-3 w-10" />
          <Skeleton className="h-3 w-14" />
        </div>
      </div>
    </div>
  )
}

// ── Properties Grid Skeleton ──────────────────────────────────────
export function PropertiesGridSkeleton({
  count = 8,
  listMode = false,
}: {
  count?: number
  listMode?: boolean
}) {
  return (
    <div
      className={
        listMode
          ? 'space-y-4'
          : 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6'
      }
    >
      {Array.from({ length: count }).map((_, i) => (
        <PropertyCardSkeleton key={i} listMode={listMode} />
      ))}
    </div>
  )
}

// ── Section Header Skeleton ───────────────────────────────────────
export function SectionHeaderSkeleton() {
  return (
    <div className="text-center mb-12 animate-pulse space-y-3">
      <Skeleton className="h-8 w-64 mx-auto" />
      <Skeleton className="h-4 w-96 mx-auto" />
    </div>
  )
}

// ── Property Detail Skeleton ──────────────────────────────────────
export function PropertyDetailSkeleton() {
  return (
    <div className="min-h-screen bg-gray-50 py-8 animate-pulse">
      <div className="container mx-auto px-4">
        <Skeleton className="h-4 w-64 mb-6" />
        <div className="flex justify-between mb-6">
          <div className="space-y-2">
            <Skeleton className="h-8 w-96" />
            <Skeleton className="h-4 w-48" />
          </div>
          <Skeleton className="h-10 w-48" />
        </div>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 space-y-6">
            <Skeleton className="h-96 rounded-2xl" />
            <div className="bg-white rounded-2xl p-6">
              <Skeleton className="h-6 w-40 mb-4" />
              <div className="grid grid-cols-3 gap-4 mb-6">
                <Skeleton className="h-24 rounded-xl" />
                <Skeleton className="h-24 rounded-xl" />
                <Skeleton className="h-24 rounded-xl" />
              </div>
              <Skeleton className="h-4 w-full mb-2" />
              <Skeleton className="h-4 w-5/6 mb-2" />
              <Skeleton className="h-4 w-4/6" />
            </div>
          </div>
          <div className="space-y-6">
            <Skeleton className="h-48 rounded-2xl" />
            <Skeleton className="h-64 rounded-2xl" />
          </div>
        </div>
      </div>
    </div>
  )
}

// ── Stats Skeleton ────────────────────────────────────────────────
export function StatsSkeleton() {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8 animate-pulse">
      {Array.from({ length: 4 }).map((_, i) => (
        <div key={i} className="space-y-2 text-center">
          <Skeleton className="h-10 w-10 rounded-full mx-auto" />
          <Skeleton className="h-8 w-24 mx-auto" />
          <Skeleton className="h-3 w-20 mx-auto" />
        </div>
      ))}
    </div>
  )
}