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

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

export function AgentSendRemittanceSkeleton() {
  return (
    <Container className="max-w-full space-y-6 lg:space-y-8">
      <div className="flex flex-col gap-6 lg:gap-8">
        {/* Page header */}
        <div>
          <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <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-7 w-48" />
                <Bone className="h-4 w-64 sm:w-80" />
              </div>
            </div>
          </header>
        </div>

        {/* Main 2-column layout */}
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
          {/* ── Left: Form ── */}
          <div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm backdrop-blur-md dark:border-slate-800/60 dark:bg-slate-900/40">
            <div className="divide-y divide-slate-100/80 dark:divide-white/5">
              {/* Amount */}
              <div className="space-y-3 p-6 sm:p-7">
                <Bone className="h-3.5 w-32" />
                <Bone className="h-12 w-full" />
              </div>

              {/* Recipient Gets */}
              <div className="space-y-3 p-6 sm:p-7">
                <Bone className="h-3.5 w-48" />
                <Bone className="h-12 w-full" />
              </div>

              {/* Receiving Method */}
              <div className="space-y-3 p-6 sm:p-7">
                <Bone className="h-3.5 w-36" />
                <Bone className="h-12 w-full" />
              </div>

              {/* Sender */}
              <div className="space-y-3 p-6 sm:p-7">
                <div className="flex items-center justify-between">
                  <Bone className="h-3.5 w-16" />
                  <Bone className="h-3.5 w-20" />
                </div>
                <Bone className="h-12 w-full" />
              </div>

              {/* Recipient */}
              <div className="space-y-3 p-6 sm:p-7">
                <div className="flex items-center justify-between">
                  <Bone className="h-3.5 w-20" />
                  <Bone className="h-3.5 w-24" />
                </div>
                <Bone className="h-12 w-full" />
              </div>

              {/* Send Button */}
              <div className="p-6 sm:p-7">
                <Bone className="h-12 w-full bg-brand-100 dark:bg-brand-900/30" />
              </div>
            </div>
          </div>

          {/* ── Right: Summary ── */}
          <div className="space-y-4">
            <div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm backdrop-blur-md dark:border-slate-800/60 dark:bg-slate-900/40">
              <div className="border-b border-slate-100 p-6 dark:border-slate-800/60 sm:p-7">
                <Bone className="h-4 w-20" />
              </div>
              <div className="p-6 sm:p-7">
                {[80, 96, 72, 88, 80].map((w, i) => (
                  <div
                    key={i}
                    className="flex items-center justify-between border-b border-slate-100/80 py-3 last:border-0 dark:border-white/5"
                  >
                    <div className="flex items-center gap-2.5">
                      <Bone className="h-7 w-7 shrink-0 rounded-lg" />
                      <Bone className="h-3.5" style={{ width: `${w}px` }} />
                    </div>
                    <Bone className="h-3.5 w-14" />
                  </div>
                ))}
              </div>
            </div>

            {/* Tip Card */}
            <div className="rounded-3xl border border-amber-200/60 bg-amber-50/60 p-6 dark:border-amber-500/20 dark:bg-amber-500/10 sm:p-7">
              <Bone className="h-8 w-full bg-amber-200/60 dark:bg-amber-500/20" />
            </div>
          </div>
        </div>

        {/* Transaction Log */}
        <div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm backdrop-blur-md dark:border-slate-800/60 dark:bg-slate-900/40">
          <div className="flex items-center justify-between gap-4 border-b border-slate-100 bg-slate-50/50 p-6 sm:p-7 dark:border-slate-800/60 dark:bg-slate-800/40">
            <div className="flex items-center gap-4">
              <Bone className="h-10 w-10 shrink-0 rounded-xl" />
              <div className="space-y-2">
                <Bone className="h-4 w-44" />
                <Bone className="h-3 w-20" />
              </div>
            </div>
          </div>
          <div className="divide-y divide-slate-100/60 dark:divide-white/5">
            {Array.from({ length: 5 }).map((_, i) => (
              <div key={i} className="flex items-center gap-6 px-6 py-5 sm:px-7">
                <Bone className="h-4 w-32 sm:w-40" />
                <Bone className="ml-auto h-4 w-20 sm:w-24" />
                <Bone className="hidden h-4 w-20 sm:block sm:w-24" />
                <Bone className="hidden h-4 w-20 sm:block" />
                <Bone className="hidden h-4 w-16 sm:block" />
                <Bone className="h-6 w-16 rounded-full sm:w-20" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </Container>
  );
}

export default AgentSendRemittanceSkeleton;