import { RouteLoading } from "@/components/molecules/RouteLoading";
import { ClipboardDocumentCheckIcon, ArrowLeftIcon } from "@heroicons/react/24/outline";
import { Button } from "@/components/atoms/button";

export default function OrderDetailLoading() {
  return (
    <RouteLoading
      icon={<ClipboardDocumentCheckIcon />}
      title="Order Details"
      description="Loading order details..."
      mode="content"
    >
      <div className="mb-6">
        <Button
          as="a"
          href="/orders"
          size="sm"
          variant="ghost"
          leftIcon={<ArrowLeftIcon className="h-4 w-4" />}
          className="text-gray-600 hover:text-gray-900"
        >
          Back to orders
        </Button>
      </div>

      <div className="animate-pulse">
        <div className="rounded-3xl border border-slate-200 bg-white shadow-sm">
          {/* Header Section */}
          <div className="border-b border-slate-200 bg-gradient-to-br from-white to-slate-50 px-6 py-6 sm:px-8">
            <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
              {/* Left: Title & Status */}
              <div className="flex flex-col gap-2">
                <div className="flex items-center gap-3">
                  <div className="h-8 w-48 rounded bg-slate-200" />
                  <div className="h-6 w-24 rounded-full bg-slate-200" />
                </div>
                <div className="h-4 w-64 rounded bg-slate-100" />
              </div>

              {/* Right: Pricing Section */}
              <div className="flex items-start gap-6 sm:gap-8">
                <div className="text-right space-y-2">
                  <div className="h-3 w-16 rounded bg-slate-100" />
                  <div className="h-9 w-24 rounded bg-slate-200" />
                </div>
                <div className="text-right space-y-2">
                  <div className="h-3 w-16 rounded bg-slate-100" />
                  <div className="h-9 w-24 rounded bg-slate-200" />
                </div>
              </div>
            </div>
          </div>

          {/* Body Section */}
          <div className="px-6 py-6 sm:px-8">
            <div className="flex flex-col gap-6">
              {/* Order Items Section */}
              <div>
                <div className="mb-2 h-3 w-32 rounded bg-slate-200" />
                <div className="space-y-4">
                  {/* Item 1 */}
                  <div className="flex flex-col gap-3 rounded-xl border border-slate-200 bg-white px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex flex-1 items-start gap-3">
                      <div className="h-6 w-6 rounded-lg bg-slate-100 flex-shrink-0" />
                      <div className="flex flex-1 items-baseline justify-between gap-4">
                        <div className="min-w-0 flex-1 space-y-2">
                          <div className="h-5 w-3/4 rounded bg-slate-200" />
                          <div className="h-3 w-24 rounded bg-slate-100" />
                        </div>
                        <div className="flex flex-col items-end gap-1">
                          <div className="h-6 w-28 rounded bg-slate-200" />
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Item 2 */}
                  <div className="flex flex-col gap-3 rounded-xl border border-slate-200 bg-white px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex flex-1 items-start gap-3">
                      <div className="h-6 w-6 rounded-lg bg-slate-100 flex-shrink-0" />
                      <div className="flex flex-1 items-baseline justify-between gap-4">
                        <div className="min-w-0 flex-1 space-y-2">
                          <div className="h-5 w-2/3 rounded bg-slate-200" />
                          <div className="h-3 w-20 rounded bg-slate-100" />
                        </div>
                        <div className="flex flex-col items-end gap-1">
                          <div className="h-6 w-24 rounded bg-slate-200" />
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Item 3 */}
                  <div className="flex flex-col gap-3 rounded-xl border border-slate-200 bg-white px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex flex-1 items-start gap-3">
                      <div className="h-6 w-6 rounded-lg bg-slate-100 flex-shrink-0" />
                      <div className="flex flex-1 items-baseline justify-between gap-4">
                        <div className="min-w-0 flex-1 space-y-2">
                          <div className="h-5 w-1/2 rounded bg-slate-200" />
                          <div className="h-3 w-16 rounded bg-slate-100" />
                        </div>
                        <div className="flex flex-col items-end gap-1">
                          <div className="h-6 w-20 rounded bg-slate-200" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </RouteLoading>
  );
}
