import { Suspense } from 'react';
import { redirect } from 'next/navigation';
import { getServerSession } from '@/lib/auth/getServerSession';
import { PERMISSIONS } from '@/lib/permissions/permissions';
import AccessDenied from '@/components/admin/errors/AccessDenied';
import CartTable from '@/components/admin/cart/CartTable';
import { cookies } from 'next/headers';
import { SESSION_COOKIE } from '@/lib/auth/requireAuth';
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Carts',
};

async function getCarts(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/cart?user_id=all`, {
      cache: 'no-store',
      headers: { Authorization: `Bearer ${sessionToken}` },
    });
    if (!res.ok) return [];
    const data = await res.json();
    return data.data || [];
  } catch {
    return [];
  }
}

async function CartContent() {
  const cookieStore = await cookies();
  const sessionId = cookieStore.get(SESSION_COOKIE)?.value;
  if (!sessionId) redirect('/admin/login');

  const session = await getServerSession();
  if (!session) redirect('/admin/login');
  if (!session.permissions.includes(PERMISSIONS.CART_READ)) return <AccessDenied />;

  // Fetch all carts
  const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
  const res = await fetch(`${baseUrl}/api/cart?user_id=all`, {
    cache: 'no-store',
    headers: { Authorization: `Bearer ${sessionId}` },
  });
  
  const data = await res.json();
  const carts = data.data || [];

  return (
    <>
      <div className="flex flex-wrap justify-between items-center gap-3 mb-6">
        <div>
          <h1 className="text-2xl font-semibold" style={{ color: 'var(--color-text)' }}>
            Shopping Carts
          </h1>
          <p className="text-sm mt-1" style={{ color: 'var(--color-text-secondary)' }}>
            View customer shopping carts
          </p>
        </div>
      </div>
      <CartTable carts={carts} />
    </>
  );
}

export default async function CartPage() {
  return (
    <div className="sm:p-6">
      <Suspense fallback={<div className="skeleton h-96 w-full rounded-lg" />}>
        <CartContent />
      </Suspense>
    </div>
  );
}