import React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Table,
  TableHeader,
  TableRow,
  TableHead,
  TableBody,
  TableCell,
} from "@/components/ui/table";
import { useTranslation } from "react-i18next";
import AccountHeader from "@/components/shared/account-header";

/**
 * Skeleton loader for wishlist page
 * Shows loading placeholders matching the wishlist table structure
 */
export default function WishlistSkeleton() {
  const { t } = useTranslation("wishlist");

  return (
    <>
      {/* Header skeleton */}
      <header>
        <AccountHeader title={t("wishlist:header.title")} />
      </header>

      <main className="mx-auto px-5 xl:px-0 py-8 max-w-7xl container">
        <section className="w-full">
          {/* Desktop table skeleton */}
          <div className="hidden sm:block">
            <Table className="border-separate border-spacing-y-3">
              <TableHeader>
                <TableRow className="border-b">
                  <TableHead className="w-[520px]">
                    <Skeleton className="w-24 h-5" />
                  </TableHead>
                  <TableHead className="w-[140px]">
                    <Skeleton className="w-16 h-5" />
                  </TableHead>
                  <TableHead className="w-[300px]">
                    <Skeleton className="w-28 h-5" />
                  </TableHead>
                  <TableHead className="w-[280px] text-center">
                    <Skeleton className="mx-auto w-20 h-5" />
                  </TableHead>
                </TableRow>
              </TableHeader>

              <TableBody>
                {[...Array(3)].map((_, index) => (
                  <TableRow key={index} className="border-b">
                    <TableCell>
                      <div className="flex items-center gap-4">
                        <Skeleton className="rounded w-24 h-24 shrink-0" />
                        <div className="flex-1 space-y-2">
                          <Skeleton className="w-3/4 h-5" />
                          <Skeleton className="w-1/2 h-4" />
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Skeleton className="w-20 h-6" />
                    </TableCell>
                    <TableCell>
                      <Skeleton className="w-24 h-6" />
                    </TableCell>
                    <TableCell>
                      <div className="flex justify-center gap-2">
                        <Skeleton className="w-24 h-9" />
                        <Skeleton className="w-32 h-9" />
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          {/* Mobile list skeleton */}
          <div className="md:hidden">
            <ul className="space-y-4">
              {[...Array(3)].map((_, index) => (
                <li key={index} className="border rounded-lg">
                  {/* Product row skeleton */}
                  <div className="flex items-center gap-4 p-4">
                    <Skeleton className="rounded w-24 h-24 shrink-0" />
                    <div className="flex-1 space-y-2">
                      <Skeleton className="w-3/4 h-5" />
                      <Skeleton className="w-1/2 h-4" />
                    </div>
                  </div>

                  {/* Stacked fields skeleton */}
                  <div className="border-t">
                    {/* Price row */}
                    <div className="flex justify-between items-center px-4 py-3">
                      <Skeleton className="w-16 h-4" />
                      <Skeleton className="w-20 h-5" />
                    </div>

                    {/* Stock Status */}
                    <div className="flex justify-between items-center px-4 py-3">
                      <Skeleton className="w-24 h-4" />
                      <Skeleton className="w-20 h-6" />
                    </div>

                    {/* Actions row */}
                    <div className="flex flex-col justify-end gap-3 px-4 py-3">
                      <Skeleton className="w-full h-10" />
                      <Skeleton className="w-full h-10" />
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </section>
      </main>
    </>
  );
}