import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { cn } from "@/lib/utils";

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

export function AgentProfileSkeleton() {
  return (
    <Container className="max-w-full space-y-6 pb-10">
      {/* Page header */}
      <div className="flex items-center gap-4">
        <Bone className="icon-box-md rounded-2xl" />
        <div>
          <Bone className="h-6 w-40" />
          <Bone className="mt-1 h-4 w-56" />
        </div>
      </div>

      {/* Avatar + Personal info — single combined card */}
      <Card>
        <CardContent>
          {/* Avatar — centered */}
          <div className="flex flex-col items-center gap-3 pb-6 text-center">
            <div className="relative">
              <Bone className="h-20 w-20 rounded-full" />
              <div className="absolute bottom-0 right-0 h-7 w-7 rounded-full bg-slate-300 dark:bg-slate-600" />
            </div>
            <div className="flex flex-col items-center gap-2">
              <Bone className="h-5 w-36" />
              <Bone className="h-4 w-48" />
              <Bone className="h-3.5 w-24" />
            </div>
          </div>

          {/* Divider */}
          <div className="-mx-6 sm:-mx-7 border-t border-slate-100 dark:border-slate-800/60" />

          {/* Fields */}
          <div className="mt-6 flex items-center gap-2.5">
            <Bone className="h-4.5 w-4.5 rounded-md" />
            <Bone className="h-5 w-40" />
          </div>

          <div className="mt-6 space-y-6">
            <div className="grid gap-4 sm:grid-cols-2">
              <Bone className="h-11 rounded-2xl" />
              <Bone className="h-11 rounded-2xl" />
            </div>
            <Bone className="h-11 rounded-2xl" />
            <Bone className="h-11 rounded-2xl" />
            <Bone className="h-11 rounded-2xl" />
            <div className="grid gap-4 sm:grid-cols-2">
              <Bone className="h-11 rounded-2xl" />
              <Bone className="h-11 rounded-2xl" />
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              <Bone className="h-11 rounded-2xl" />
              <Bone className="h-11 rounded-2xl" />
            </div>
            <Bone className="h-11 rounded-2xl" />
            <Bone className="h-10 w-36 rounded-xl" />
          </div>
        </CardContent>
      </Card>

      {/* Password card */}
      <Card>
        <CardContent>
          <div className="flex items-center gap-2.5">
            <Bone className="h-4.5 w-4.5 rounded-md" />
            <Bone className="h-5 w-36" />
          </div>

          <div className="mt-5 space-y-6">
            <Bone className="h-11 rounded-2xl" />
            <div className="grid gap-4 sm:grid-cols-2">
              <Bone className="h-11 rounded-2xl" />
              <Bone className="h-11 rounded-2xl" />
            </div>
            <Bone className="h-10 w-40 rounded-xl" />
          </div>
        </CardContent>
      </Card>

      {/* Danger Zone card */}
      <Card className="border border-rose-500/40 shadow-[0_0_20px_rgba(244,63,94,0.15)] dark:border-rose-500/40 dark:shadow-[0_0_20px_rgba(244,63,94,0.25)]">
        <CardContent>
          <Bone className="h-5 w-28" />
          <Bone className="mt-1.5 h-4 w-96 max-w-full" />
          <div className="mt-5">
            <Bone className="h-10 w-36 rounded-xl" />
          </div>
        </CardContent>
      </Card>
    </Container>
  );
}