import Container from '@/components/frontend/Container'

// Server-safe (no hooks, no client JS) placeholders used by the storefront's
// <Suspense> boundaries and route-level loading.tsx files. Kept deliberately
// dumb — grey pulsing blocks roughly the size of the real content — so the
// page shell (header/footer) paints immediately and the layout doesn't jump
// when the real data streams in.

function Block({ className = '' }: { className?: string }) {
  return <div className={`animate-pulse rounded-lg bg-gray-100 ${className}`} aria-hidden="true" />
}

export function ProductCardSkeleton() {
  return (
    <div className="rounded-2xl bg-white shadow-sm overflow-hidden" aria-hidden="true">
      <Block className="h-40 w-full rounded-none" />
      <div className="p-5 space-y-3">
        <Block className="h-5 w-3/4" />
        <Block className="h-4 w-1/3" />
        <Block className="h-6 w-1/2" />
        <Block className="h-11 w-full" />
      </div>
    </div>
  )
}

export function ProductGridSkeleton({ count = 4 }: { count?: number }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      {Array.from({ length: count }, (_, i) => (
        <ProductCardSkeleton key={i} />
      ))}
    </div>
  )
}

// A titled section (heading + row of cards) — the shape of most home sections.
export function SectionSkeleton({ count = 4 }: { count?: number }) {
  return (
    <div className="my-12" role="status" aria-busy="true">
      <Block className="h-8 w-56 mb-6" />
      <ProductGridSkeleton count={count} />
    </div>
  )
}

export function PageSkeleton() {
  return (
    <Container className="py-10" >
      <div role="status" aria-busy="true" className="space-y-4 max-w-3xl mx-auto">
        <Block className="h-9 w-2/3" />
        <Block className="h-4 w-1/3" />
        <div className="pt-4 space-y-3">
          {Array.from({ length: 8 }, (_, i) => (
            <Block key={i} className={`h-4 ${i % 3 === 2 ? 'w-2/3' : 'w-full'}`} />
          ))}
        </div>
      </div>
    </Container>
  )
}

// Listing page: filter sidebar + grid (/products, /category/[slug]).
export function ListingSkeleton() {
  return (
    <Container className="py-8">
      <div role="status" aria-busy="true">
        <Block className="h-40 w-full rounded-2xl mb-8" />
        <div className="grid lg:grid-cols-[18rem_1fr] gap-8">
          <div className="hidden lg:block space-y-4">
            <Block className="h-10 w-full" />
            <Block className="h-48 w-full" />
            <Block className="h-32 w-full" />
          </div>
          <div>
            <Block className="h-10 w-56 ml-auto mb-6" />
            <ProductGridSkeleton count={6} />
          </div>
        </div>
      </div>
    </Container>
  )
}

export function ProductDetailSkeleton() {
  return (
    <Container className="mt-4 pb-12">
      <div role="status" aria-busy="true">
        <Block className="h-4 w-64 mb-6" />
        <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
          <Block className="aspect-square w-full rounded-2xl" />
          <div className="space-y-4">
            <Block className="h-9 w-3/4" />
            <Block className="h-5 w-1/3" />
            <Block className="h-10 w-1/2" />
            <Block className="h-20 w-full" />
            <Block className="h-12 w-full" />
            <Block className="h-12 w-full" />
          </div>
        </div>
      </div>
    </Container>
  )
}

// Blog listing / detail.
export function BlogSkeleton() {
  return (
    <Container className="py-10">
      <div role="status" aria-busy="true">
        <Block className="h-9 w-56 mb-8" />
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {Array.from({ length: 6 }, (_, i) => (
            <div key={i} className="space-y-3">
              <Block className="h-44 w-full rounded-2xl" />
              <Block className="h-5 w-3/4" />
              <Block className="h-4 w-full" />
            </div>
          ))}
        </div>
      </div>
    </Container>
  )
}

// Cart / checkout / account tables and forms.
export function FormPageSkeleton() {
  return (
    <Container className="py-10">
      <div role="status" aria-busy="true" className="grid lg:grid-cols-[1fr_22rem] gap-8">
        <div className="space-y-4">
          <Block className="h-9 w-48" />
          {Array.from({ length: 3 }, (_, i) => (
            <Block key={i} className="h-28 w-full rounded-2xl" />
          ))}
        </div>
        <Block className="h-72 w-full rounded-2xl" />
      </div>
    </Container>
  )
}