import { Suspense } from 'react';
import { redirect } from 'next/navigation';
import Link from 'next/link';
import { getServerSession } from '@/lib/auth/getServerSession';
import { PERMISSIONS } from '@/lib/permissions/permissions';
import AccessDenied from '@/components/admin/errors/AccessDenied';
import ProductsTable from '@/components/admin/products/ProductsTable';
import { ProductsTableSkeleton } from '@/components/admin/products/ProductSkeleton';
import { cookies } from 'next/headers';
import { SESSION_COOKIE } from '@/lib/auth/requireAuth';
import { Metadata } from 'next';

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

// ─── Data fetchers ────────────────────────────────────────────────────────────

async function getInitialProducts(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/products?page=1&limit=10`, {
      cache: 'no-store',
      headers: { Authorization: `Bearer ${sessionToken}` },
    });
    if (!res.ok) throw new Error('Failed to fetch products');
    const data = await res.json();
    return data.data;
  } catch (error) {
    console.error('Failed to fetch initial products:', error);
    return {
      products: [],
      pagination: { page: 1, limit: 10, total: 0, totalPages: 0 },
    };
  }
}

async function getInitialCounts(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/products/counts`, {
      cache: 'no-store',
      headers: { Authorization: `Bearer ${sessionToken}` },
    });
    if (!res.ok) throw new Error('Failed to fetch counts');
    const data = await res.json();
    return data.data as { active: number; deleted: number };
  } catch (error) {
    console.error('Failed to fetch product counts:', error);
    return { active: 0, deleted: 0 };
  }
}

// ✅ Updated: Use /api/products/form-data instead of /api/categories
async function getFormData(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/products/form-data`, {
      cache: 'no-store',
      headers: { Authorization: `Bearer ${sessionToken}` },
    });
    if (!res.ok) throw new Error('Failed to fetch form data');
    const data = await res.json();
    return data.data;
  } catch (error) {
    console.error('Failed to fetch form data:', error);
    return {
      categories: [],
      tags: [],
      attributes: [],
      languages: [],
      default_language: 'en',
    };
  }
}

// ─── Page content ─────────────────────────────────────────────────────────────

async function ProductsContent() {
  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.PRODUCTS_READ)) return <AccessDenied />;

  const canCreate = session.permissions.includes(PERMISSIONS.PRODUCTS_CREATE);
  const canEdit = session.permissions.includes(PERMISSIONS.PRODUCTS_UPDATE);
  const canDelete = session.permissions.includes(PERMISSIONS.PRODUCTS_DELETE);
  const canBulkDelete = session.permissions.includes(PERMISSIONS.PRODUCTS_BULK_DELETE);
  const canViewDeleted = session.permissions.includes(PERMISSIONS.PRODUCTS_VIEW_DELETED);
  const canPermanentDelete = session.permissions.includes(PERMISSIONS.PRODUCTS_PERMANENT_DELETE);
  const canRestore = session.permissions.includes(PERMISSIONS.PRODUCTS_RESTORE);
  const canBulkRestore = session.permissions.includes(PERMISSIONS.PRODUCTS_BULK_RESTORE);
  const canViewTimeline = session.permissions.includes(PERMISSIONS.PRODUCTS_VIEW_TIMELINE);
  const canActivateDeactivate = session.permissions.includes(PERMISSIONS.PRODUCTS_ACTIVATE_DEACTIVATE);

  // ✅ Single API call instead of separate calls
  const [initialData, initialCounts, formData] = await Promise.all([
    getInitialProducts(sessionId),
    getInitialCounts(sessionId),
    getFormData(sessionId),
  ]);

  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)' }}>
            Products
          </h1>
          <p className="text-sm mt-1" style={{ color: 'var(--color-text-secondary)' }}>
            Manage your product catalog with multi-language support
          </p>
        </div>

        {canCreate && (
          <Link
            href="/admin/dashboard/products/new"
            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all hover:opacity-90"
            style={{ background: 'var(--color-cta)', color: 'white' }}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 5v14m-7-7h14"/>
            </svg>
            Add Product
          </Link>
        )}
      </div>

      <ProductsTable
        canEdit={canEdit}
        canDelete={canDelete}
        canBulkDelete={canBulkDelete}
        canViewDeleted={canViewDeleted}
        canPermanentDelete={canPermanentDelete}
        canRestore={canRestore}
        canBulkRestore={canBulkRestore}
        canViewTimeline={canViewTimeline}
        canActivateDeactivate={canActivateDeactivate}
        initialProducts={initialData}
        initialCounts={initialCounts}
        categories={formData.categories} // ✅ Using categories from form-data
      />
    </>
  );
}

export default async function ProductsPage() {
  return (
    <div className="sm:p-6">
      <Suspense fallback={<ProductsTableSkeleton />}>
        <ProductsContent />
      </Suspense>
    </div>
  );
}