import React from "react";
import { Container } from "@/components/common/Container";
import { cn } from "@/lib/utils";

function Bone({ className, style }: { className?: string; style?: React.CSSProperties }) {
  return (
    <div className={cn("animate-pulse rounded-xl bg-slate-200 dark:bg-slate-700/50", className)} style={style} />
  );
}

export function AgentRecipientsSkeleton() {
  return (
    <Container className="max-w-full space-y-6 lg:space-y-8">

      {/* Page header */}
      <div className="flex items-center gap-4">
        <Bone className="h-12 w-12 shrink-0 rounded-2xl" />
        <div className="space-y-2">
          <Bone className="h-6 w-36" />
          <Bone className="h-3.5 w-28" />
        </div>
      </div>

      {/* List card */}
      <div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white dark:border-slate-800/60 dark:bg-slate-900/40">

        {/* Card header */}
        <div className="flex items-center justify-between gap-4 border-b border-slate-100/80 bg-slate-50/50 p-6 sm:p-7 dark:border-slate-800/60 dark:bg-slate-800/30">
          <div className="flex items-center gap-3">
            <Bone className="h-9 w-9 shrink-0 rounded-xl" />
            <div className="space-y-1.5">
              <Bone className="h-3.5 w-24" />
              <Bone className="h-2.5 w-16" />
            </div>
          </div>
          <Bone className="h-8 w-32 rounded-lg" />
        </div>

        {/* Search + filter bar */}
        <div className="flex flex-wrap items-center gap-3 border-b border-slate-100/80 px-6 py-4 sm:px-7 dark:border-slate-800/60">
          <Bone className="h-9 w-full max-w-sm rounded-xl" />
          <div className="flex gap-1.5">
            {[28, 72, 88, 76].map((w, i) => (
              <Bone key={i} className="h-7 rounded-lg" style={{ width: `${w}px` }} />
            ))}
          </div>
        </div>

        {/* Column headers */}
        <div className="hidden grid-cols-[2.25rem_1fr_11rem_5rem] items-center gap-4 border-b border-slate-100/80 bg-slate-50/60 px-6 py-3 dark:border-slate-800/60 dark:bg-slate-800/20 sm:grid lg:grid-cols-[2.25rem_1fr_11rem_12rem_5rem] sm:px-7">
          <div />
          <Bone className="h-2 w-12 rounded-md" />
          <Bone className="h-2 w-10 rounded-md" />
          <Bone className="hidden h-2 w-11 rounded-md lg:block" />
          <div />
        </div>

        {/* Rows */}
        <div className="divide-y divide-slate-100/80 dark:divide-slate-800/60">
          {[0, 1, 2, 3, 4].map((i) => (
            <div key={i} className="flex items-center gap-4 px-6 py-4 sm:grid sm:grid-cols-[2.25rem_1fr_11rem_5rem] lg:grid-cols-[2.25rem_1fr_11rem_12rem_5rem] sm:px-7">
              <Bone className="h-9 w-9 shrink-0 rounded-full" />
              <div className="min-w-0 flex-1 space-y-1.5">
                <Bone className="h-3.5 w-32" />
                <Bone className="h-2.5 w-44" />
              </div>
              <div className="hidden space-y-1.5 sm:block">
                <Bone className="h-5 w-24 rounded-full" />
                <Bone className="h-2.5 w-16" />
              </div>
              <div className="hidden space-y-1.5 lg:block">
                <Bone className="h-2.5 w-12" />
                <Bone className="h-3.5 w-28" />
              </div>
              <div className="flex shrink-0 gap-1">
                <Bone className="h-8 w-8 rounded-lg" />
                <Bone className="h-8 w-8 rounded-lg" />
              </div>
            </div>
          ))}
        </div>
      </div>

    </Container>
  );
}