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 OrdersTable from '@/components/admin/orders/OrdersTable';
import OrdersAnalytics from '@/components/admin/orders/OrdersAnalytics';
import { OrdersTableSkeleton, OrdersAnalyticsSkeleton } from '@/components/admin/orders/OrderSkeleton';
import { cookies } from 'next/headers';
import { SESSION_COOKIE } from '@/lib/auth/requireAuth';
import { Metadata } from 'next';

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

// ─── Data fetchers ──────────────────────────────────────────────────────────
async function getInitialOrders(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/orders?page=1&limit=10&status=pending`, {
      cache: 'no-store',
      headers: { Authorization: `Bearer ${sessionToken}` },
    });
    if (!res.ok) throw new Error('Failed to fetch orders');
    const data = await res.json();
    return data.data;
  } catch (error) {
    console.error('Failed to fetch initial orders:', error);
    return {
      orders: [],
      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/orders/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;
  } catch (error) {
    console.error('Failed to fetch order counts:', error);
    return {
      all: 0, pending: 0, confirmed: 0, processing: 0, packed: 0,
      shipped: 0, out_for_delivery: 0, delivered: 0,
      cancelled: 0, returned: 0, refunded: 0, deleted: 0,
    };
  }
}

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

// ─── Page content ───────────────────────────────────────────────────────────
async function OrdersContent() {
  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.ORDERS_READ)) return <AccessDenied />;

  const canUpdate = session.permissions.includes(PERMISSIONS.ORDERS_UPDATE);
  const canDelete = session.permissions.includes(PERMISSIONS.ORDERS_DELETE);
  const canUpdateStatus = session.permissions.includes(PERMISSIONS.ORDERS_UPDATE_STATUS);
  const canCancel = session.permissions.includes(PERMISSIONS.ORDERS_CANCEL);
  const canSingleItemStatus = session.permissions.includes(PERMISSIONS.ORDERS_SINGLE_ITEM_STATUS);
  const canRefund = session.permissions.includes(PERMISSIONS.ORDERS_REFUND);
  const canViewPayments = session.permissions.includes(PERMISSIONS.ORDERS_VIEW_PAYMENTS);
  const canManagePayments = session.permissions.includes(PERMISSIONS.ORDERS_MANAGE_PAYMENTS);
  const canDeletePayments = session.permissions.includes(PERMISSIONS.ORDERS_DELETE_PAYMENTS);
  const canExport = session.permissions.includes(PERMISSIONS.ORDERS_EXPORT);
  const canBulkUpdate = session.permissions.includes(PERMISSIONS.ORDERS_BULK_UPDATE);
  const canBulkDelete = session.permissions.includes(PERMISSIONS.ORDERS_BULK_DELETE);
  const canBulkRestore = session.permissions.includes(PERMISSIONS.ORDERS_BULK_RESTORE);
  const canViewTimeline = session.permissions.includes(PERMISSIONS.ORDERS_VIEW_TIMELINE);
  const canViewDeleted = session.permissions.includes(PERMISSIONS.ORDERS_VIEW_DELETED);
  const canPermanentDelete = session.permissions.includes(PERMISSIONS.ORDERS_PERMANENT_DELETE);
  const canViewDeletedPayments = session.permissions.includes(PERMISSIONS.ORDERS_VIEW_DELETED_PAYMENTS);
  const canPermanentDeletePayments = session.permissions.includes(PERMISSIONS.ORDERS_PERMANENT_DELETE_PAYMENTS);
  const canViewPaymentTimeline = session.permissions.includes(PERMISSIONS.ORDERS_PAYMENT_TIMELINE);
  const canRestorePayments = session.permissions.includes(PERMISSIONS.ORDERS_RESTORE_PAYMENTS);
  const canRestore = session.permissions.includes(PERMISSIONS.ORDERS_RESTORE);
  const canViewAnalytics = session.permissions.includes(PERMISSIONS.ORDERS_VIEW_ANALYTICS);

  const [initialData, initialCounts, analytics] = await Promise.all([
    getInitialOrders(sessionId),
    getInitialCounts(sessionId),
    canViewAnalytics ? getAnalytics(sessionId) : Promise.resolve(null),
  ]);

  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)' }}>
            Orders
          </h1>
          <p className="text-sm mt-1" style={{ color: 'var(--color-text-secondary)' }}>
            Manage and track customer orders
          </p>
        </div>

        {canExport && (
          <button
            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-surface-alt)', color: 'var(--color-text)', border: '1px solid var(--color-border)' }}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
            </svg>
            Export
          </button>
        )}
      </div>

      {/* Analytics Cards - Only visible with permission */}
      {canViewAnalytics && analytics && <OrdersAnalytics data={analytics} />}

      {/* Orders Table */}
      <OrdersTable
        canUpdate={canUpdate}
        canDelete={canDelete}
        canUpdateStatus={canUpdateStatus}
        canCancel={canCancel}
        canSingleItemStatus={canSingleItemStatus}
        canRefund={canRefund}
        canViewPayments={canViewPayments}
        canManagePayments={canManagePayments}
        canDeletePayments={canDeletePayments}
        canExport={canExport}
        canBulkUpdate={canBulkUpdate}
        canBulkDelete={canBulkDelete}
        canBulkRestore={canBulkRestore}
        canViewTimeline={canViewTimeline}
        canViewDeleted={canViewDeleted}
        canPermanentDelete={canPermanentDelete}
        canRestore={canRestore}
        canViewPaymentTimeline={canViewPaymentTimeline}
        canRestorePayments={canRestorePayments}
        canViewDeletedPayments={canViewDeletedPayments}
        canPermanentDeletePayments={canPermanentDeletePayments}
        initialOrders={initialData}
        initialCounts={initialCounts}
      />
    </>
  );
}

export default async function OrdersPage() {
  return (
    <div className="sm:p-6">
      <Suspense fallback={
        <>
          <OrdersAnalyticsSkeleton />
          <OrdersTableSkeleton />
        </>
      }>
        <OrdersContent />
      </Suspense>
    </div>
  );
}