"use client";

import { Skeleton } from "@heroui/react";

export default function ProductDetailSkeleton() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 w-full">

      {/* ① Header + StatsCards — 同一卡片，跨3列 */}
      <div className="order-1 md:col-span-3 min-w-0">
        <div className="bg-white dark:bg-gray-800 border border-[#f3f4f6] dark:border-gray-700 rounded-2xl md:rounded-3xl p-4 md:p-8 flex flex-col gap-5 md:gap-6">
          {/* ProductHeader */}
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div className="flex items-center gap-4">
              <Skeleton className="w-12 h-12 md:w-16 md:h-16 rounded-2xl flex-shrink-0" />
              <div className="flex flex-col gap-2">
                <Skeleton className="h-6 w-28 md:w-32 rounded-lg" />
                <Skeleton className="h-4 w-40 md:w-56 rounded" />
                <div className="flex gap-2 mt-1">
                  <Skeleton className="h-5 w-16 md:w-20 rounded-full" />
                  <Skeleton className="h-5 w-20 md:w-24 rounded-full" />
                </div>
              </div>
            </div>
            <Skeleton className="h-8 w-full md:w-36 rounded-xl" />
          </div>
          {/* StatsCards — 移动端2列，桌面端5列 */}
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            {[0, 1, 2, 3, 4].map((i) => (
              <div key={i} className="rounded-2xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-5 flex flex-col gap-3">
                <Skeleton className="h-3 w-20 rounded" />
                <Skeleton className="h-7 w-16 rounded-lg" />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ② 交易板 + Protocol — 移动端排第2，桌面端右列 */}
      <div className="order-2 md:order-3 md:col-span-1 min-w-0 flex flex-col gap-6 md:gap-8">
        <div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-6 flex flex-col gap-4">
          <Skeleton className="h-10 w-full rounded-xl" />
          <Skeleton className="h-14 w-full rounded-2xl" />
          <Skeleton className="h-14 w-full rounded-2xl" />
          <Skeleton className="h-4 w-full rounded" />
          <Skeleton className="h-12 w-full rounded-2xl" />
        </div>
        <div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-6 flex flex-col gap-4">
          <Skeleton className="h-5 w-36 rounded" />
          {[0, 1, 2, 3].map((i) => (
            <div key={i} className="flex items-center justify-between">
              <Skeleton className="h-4 w-24 rounded" />
              <Skeleton className="h-4 w-4 rounded" />
            </div>
          ))}
        </div>
      </div>

      {/* ③ Asset Overview + APY + Description — 移动端排第3，桌面端左列 */}
      <div className="order-3 md:order-2 md:col-span-2 min-w-0 flex flex-col gap-6 md:gap-8">
        {/* AssetOverviewCard */}
        <div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-8 flex flex-col gap-5">
          <div className="flex justify-between items-center">
            <Skeleton className="h-5 w-28 rounded" />
            <Skeleton className="h-6 w-16 rounded-full" />
          </div>
          <div className="grid grid-cols-2 gap-4">
            {[0, 1, 2, 3].map((i) => (
              <div key={i} className="flex justify-between">
                <Skeleton className="h-4 w-24 rounded" />
                <Skeleton className="h-4 w-16 rounded" />
              </div>
            ))}
          </div>
          <Skeleton className="h-px w-full rounded" />
          <Skeleton className="h-12 w-full rounded-2xl" />
        </div>
        {/* APYHistoryCard */}
        <div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-6 flex flex-col gap-5">
          <div className="flex justify-between items-center">
            <Skeleton className="h-4 w-28 rounded" />
            <div className="flex gap-2">
              <Skeleton className="h-7 w-16 rounded-full" />
              <Skeleton className="h-7 w-16 rounded-full" />
            </div>
          </div>
          <Skeleton className="h-[140px] md:h-[160px] w-full rounded-xl" />
        </div>
        {/* AssetDescriptionCard */}
        <div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-6 flex flex-col gap-4">
          <Skeleton className="h-5 w-32 rounded" />
          <div className="flex flex-col gap-2">
            {[0, 1, 2, 3].map((i) => (
              <Skeleton key={i} className="h-4 w-full rounded" />
            ))}
            <Skeleton className="h-4 w-2/3 rounded" />
          </div>
        </div>
      </div>

      {/* ④ Season1Rewards — 全宽 */}
      <div className="order-4 md:col-span-3 min-w-0">
        <Skeleton className="h-24 md:h-28 w-full rounded-3xl" />
      </div>

      {/* ⑤ PerformanceAnalysis — 全宽 */}
      <div className="order-5 md:col-span-3 min-w-0">
        <div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-8 flex flex-col gap-5">
          <div className="flex justify-between items-center">
            <Skeleton className="h-5 w-40 rounded" />
            <div className="flex gap-2">
              <Skeleton className="h-8 w-8 rounded-lg" />
              <Skeleton className="h-8 w-20 rounded-lg" />
              <Skeleton className="h-8 w-8 rounded-lg" />
            </div>
          </div>
          <div className="grid grid-cols-7 gap-1">
            {Array.from({ length: 35 }).map((_, i) => (
              <Skeleton key={i} className="h-8 md:h-10 w-full rounded-lg" />
            ))}
          </div>
        </div>
      </div>

      {/* ⑥ AssetCustodyVerification — 全宽 */}
      <div className="order-6 md:col-span-3 min-w-0 flex flex-col gap-8">
        <div className="flex flex-col gap-2">
          <Skeleton className="h-6 w-48 rounded" />
          <Skeleton className="h-4 w-80 rounded" />
        </div>
        <div className="bg-white dark:bg-gray-800 rounded-3xl border border-[#f3f4f6] dark:border-gray-700 p-4 md:p-8 flex flex-col gap-6">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2 pb-6 border-b border-[#f3f4f6] dark:border-gray-700">
            <Skeleton className="h-5 w-40 rounded" />
            <Skeleton className="h-4 w-48 rounded" />
          </div>
          <div className="hidden md:grid grid-cols-5 gap-4 pb-4 border-b border-[#f3f4f6] dark:border-gray-700">
            {[0, 1, 2, 3, 4].map((i) => (
              <Skeleton key={i} className="h-3 w-20 rounded" />
            ))}
          </div>
          <div className="hidden md:grid grid-cols-5 gap-4 py-4">
            {[0, 1, 2, 3, 4].map((i) => (
              <Skeleton key={i} className="h-5 w-full rounded" />
            ))}
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
          {[0, 1, 2].map((i) => (
            <div key={i} className="bg-white dark:bg-gray-800 rounded-2xl border border-[#f3f4f6] dark:border-gray-700 p-6 flex flex-col gap-4">
              <div className="flex items-start gap-4">
                <Skeleton className="w-5 h-5 rounded flex-shrink-0" />
                <div className="flex flex-col gap-2 flex-1">
                  <Skeleton className="h-4 w-32 rounded" />
                  <Skeleton className="h-3 w-full rounded" />
                  <Skeleton className="h-3 w-3/4 rounded" />
                </div>
              </div>
              <div className="flex items-center gap-2 mt-2">
                <Skeleton className="h-3 w-20 rounded" />
                <Skeleton className="h-4 w-4 rounded" />
              </div>
            </div>
          ))}
        </div>
      </div>

    </div>
  );
}