"use client";

import { cn } from "@/shared/utils";

interface OrderDetailSkeletonProps {
  className?: string;
}

export function OrderDetailSkeleton({ className }: OrderDetailSkeletonProps) {
  return (
    <div className={cn("space-y-6", className)}>
      {/* Stats Cards Grid Skeleton */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[1, 2, 3, 4].map(index => (
          <div
            key={index}
            className="bg-card rounded-xl border border-border p-4 shadow-[var(--cp-shadow-1)]"
          >
            <div className="animate-pulse space-y-2">
              <div className="h-3 w-16 rounded bg-muted" />
              <div className="h-6 w-24 rounded bg-muted" />
            </div>
          </div>
        ))}
      </div>

      {/* Progress Timeline Skeleton */}
      <div className="bg-card rounded-xl border border-border p-5 shadow-[var(--cp-shadow-1)]">
        <div className="animate-pulse">
          <div className="flex items-start justify-between">
            {[1, 2, 3, 4].map((_, index) => (
              <div key={index} className="flex flex-col items-center flex-1 relative">
                <div className="h-8 w-8 rounded-full bg-muted" />
                <div className="mt-2 h-3 w-16 rounded bg-muted" />
                {index < 3 && (
                  <div
                    className="absolute top-4 h-0.5 bg-muted -translate-y-1/2"
                    style={{ left: "calc(50% + 16px)", width: "calc(100% - 32px)" }}
                  />
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Main Content Card Skeleton */}
      <div className="rounded-3xl border border-border bg-card shadow-[var(--cp-shadow-1)]">
        {/* Header Section */}
        <div className="border-b border-border px-6 py-6 sm:px-8">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between animate-pulse">
            {/* Left: Title & Date */}
            <div className="flex items-center gap-3">
              <div className="h-11 w-11 rounded-xl bg-muted" />
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <div className="h-7 w-40 rounded bg-muted" />
                  <div className="h-5 w-20 rounded-full bg-muted" />
                </div>
                <div className="h-4 w-32 rounded bg-muted" />
              </div>
            </div>

            {/* Right: Pricing */}
            <div className="flex items-start gap-6">
              <div className="text-right space-y-1">
                <div className="h-3 w-16 rounded bg-muted" />
                <div className="h-8 w-24 rounded bg-muted" />
              </div>
              <div className="text-right space-y-1">
                <div className="h-3 w-16 rounded bg-muted" />
                <div className="h-8 w-20 rounded bg-muted" />
              </div>
            </div>
          </div>
        </div>

        {/* Content Section */}
        <div className="px-6 py-6 sm:px-8">
          <div className="space-y-6 animate-pulse">
            {/* Order Details Label */}
            <div className="h-3 w-24 rounded bg-muted" />

            {/* Order Items */}
            <div className="rounded-xl border border-border overflow-hidden divide-y divide-border">
              {[1, 2, 3].map(index => (
                <div key={index} className="flex items-center gap-3 px-4 py-4">
                  <div className="h-8 w-8 rounded-lg bg-muted" />
                  <div className="flex-1 space-y-2">
                    <div className="h-5 w-48 rounded bg-muted" />
                    <div className="h-3 w-16 rounded bg-muted" />
                  </div>
                  <div className="text-right space-y-1">
                    <div className="h-5 w-20 rounded bg-muted" />
                    <div className="h-3 w-12 rounded bg-muted" />
                  </div>
                </div>
              ))}
            </div>

            {/* Info boxes */}
            <div className="space-y-4">
              <div className="h-16 w-full rounded-lg bg-muted/50" />
              <div className="h-20 w-full rounded-lg bg-muted/50" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default OrderDetailSkeleton;
