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 SettingsForm from '@/components/admin/settings/SettingsForm';
import { SettingsSkeleton } from '@/components/admin/settings/SettingsSkeleton';
import { cookies } from 'next/headers';
import { SESSION_COOKIE } from '@/lib/auth/requireAuth';
import { Metadata } from 'next';

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

// ─── Data fetcher ────────────────────────────────────────────────────────────

async function getSettings(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/settings`, {
      cache: 'no-store',
      headers: { Authorization: `Bearer ${sessionToken}` },
    });
    
    if (!res.ok) {
      if (res.status === 403) return { error: 'Access denied' };
      throw new Error('Failed to fetch settings');
    }
    
    const data = await res.json();
    return data.data;
  } catch (error) {
    console.error('Failed to fetch settings:', error);
    return null;
  }
}

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

async function SettingsContent() {
  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');
  
  // Check view permission
  if (!session.permissions.includes(PERMISSIONS.GENERAL_SETTINGS_VIEW)) {
    return <AccessDenied />;
  }

  const canUpdate = session.permissions.includes(PERMISSIONS.GENERAL_SETTINGS_UPDATE);
  const settings = await getSettings(sessionId);

  if (!settings) {
    return (
      <div className="p-6 text-center" style={{ color: 'var(--color-text-secondary)' }}>
        Failed to load settings. Please try again.
      </div>
    );
  }

  return (
    <div className="sm:p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-semibold" style={{ color: 'var(--color-text)' }}>
          General Settings
        </h1>
        <p className="text-sm mt-1" style={{ color: 'var(--color-text-secondary)' }}>
          Manage your store configuration, branding, and integrations
        </p>
      </div>

      <SettingsForm 
        initialData={settings}
        canUpdate={canUpdate}
      />
    </div>
  );
}

export default async function SettingsPage() {
  return (
    <Suspense fallback={<SettingsSkeleton />}>
      <SettingsContent />
    </Suspense>
  );
}