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 AgentMoneyOutSkeleton() {
  return (
    <Container className="max-w-full space-y-6 lg:space-y-8">

      {/* Dark hero */}
      <div className="relative overflow-hidden rounded-3xl bg-slate-900 p-8 sm:p-10">
        <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex items-center gap-5">
            <div className="h-14 w-14 shrink-0 animate-pulse rounded-2xl bg-slate-700/60" />
            <div className="space-y-2.5">
              <div className="h-7 w-36 animate-pulse rounded-xl bg-slate-700/60" />
              <div className="h-3.5 w-52 animate-pulse rounded-lg bg-slate-700/40" />
            </div>
          </div>
          <div className="h-12 w-48 animate-pulse rounded-2xl bg-slate-700/40" />
        </div>
      </div>

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

        {/* Step progress header */}
        <div className="grid grid-cols-3 border-b border-slate-100/80 dark:border-slate-800/60">
          {[0, 1, 2].map((i) => (
            <div
              key={i}
              className={cn(
                "flex items-center gap-2.5 px-5 py-4",
                i < 2 && "border-r border-slate-100/80 dark:border-slate-800/60",
              )}
            >
              <Bone className="h-6 w-6 shrink-0 rounded-full" />
              <Bone className="hidden h-3 w-24 sm:block" />
            </div>
          ))}
        </div>

        {/* Form content */}
        <div className="space-y-5 p-6 sm:p-7">
          <div className="space-y-1.5">
            <Bone className="h-6 w-44" />
            <Bone className="h-3.5 w-64" />
          </div>
          <Bone className="h-12 rounded-xl" />
          <Bone className="h-12 rounded-xl" />
          <Bone className="h-12 rounded-xl" />
        </div>
      </div>

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

        {/* Log header */}
        <div className="flex items-center gap-4 border-b border-slate-200/60 bg-slate-50/50 p-6 sm:p-7 dark:border-slate-800/60 dark:bg-slate-800/40">
          <Bone className="h-10 w-10 shrink-0 rounded-xl" />
          <div className="space-y-2">
            <Bone className="h-4 w-32" />
            <Bone className="h-3 w-20" />
          </div>
        </div>

        {/* Column header */}
        <div className="grid grid-cols-3 gap-6 border-b border-slate-100/60 bg-slate-50/60 px-6 py-3 dark:border-slate-800/60 dark:bg-slate-800/30 sm:grid-cols-4 sm:px-7">
          {[48, 32, 28, 20].map((w, i) => (
            <Bone key={i} className={cn("h-2.5 rounded-md", i === 3 && "hidden sm:block")} style={{ width: `${w}px` }} />
          ))}
        </div>

        {/* Rows */}
        <div className="divide-y divide-slate-100/60 dark:divide-slate-800/60">
          {[0, 1, 2, 3].map((i) => (
            <div
              key={i}
              className="grid grid-cols-3 items-center gap-6 px-6 py-4 sm:grid-cols-4 sm:px-7"
            >
              <div className="space-y-1.5">
                <Bone className="h-3.5 w-28" />
                <Bone className="h-2.5 w-20" />
              </div>
              <div className="space-y-1.5">
                <Bone className="h-3.5 w-20" />
                <Bone className="h-2.5 w-14" />
              </div>
              <div className="hidden space-y-1.5 sm:block">
                <Bone className="h-3 w-24" />
                <Bone className="h-2.5 w-16" />
              </div>
              <Bone className="h-5 w-16 rounded-full" />
            </div>
          ))}
        </div>
      </div>

    </Container>
  );
}