// app/admin/dashboard/sidebars/page.tsx
import SidebarsTable from '@/app/components/admin/sidebars/SidebarsTable';
import { authService } from '@/services/auth-service';
import { PERMISSIONS } from '@/lib/permissions';
import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Sidebar Library',
  description: 'Manage reusable sidebars in the admin panel.',
};

async function getInitialData(token: string) {
  try {
    const res = await fetch(
      `${process.env.NEXTAUTH_URL}/api/backend/admin/sidebars?page=1&limit=10`,
      { cache: 'no-store', headers: { Authorization: `Bearer ${token}` } }
    );
    if (res.ok) return await res.json();
  } catch (e) {
    console.error('Failed to fetch initial sidebars:', e);
  }
  return null;
}

export default async function SidebarsPage() {
  const cookieStore = await cookies();
  const token = cookieStore.get('admin_token')?.value || null;
  if (!token) redirect('/admin/login');

  const hasPermission = await authService.checkUserPermission(token, PERMISSIONS.SIDEBARS_READ);
  if (!hasPermission) {
    return (
      <div className="space-y-6">
        <div className="bg-var-danger-bg border border-var-danger-border rounded-2xl p-6 text-center">
          <h1 className="text-2xl font-bold text-var-danger-text">Access Denied</h1>
          <p className="text-var-danger-text mt-2">You don&apos;t have permission to view sidebars.</p>
        </div>
      </div>
    );
  }

  const initialData = await getInitialData(token);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-var-text">Sidebar Library</h1>
        <p className="text-var-text-secondary mt-2">
          Create reusable sidebar templates. Assign them to any container — edit once and changes apply everywhere.
        </p>
      </div>
      <SidebarsTable initialData={initialData} />
    </div>
  );
}