// src\app\admin\(dashboard)\dashboard\employees\edit\[id]\page.tsx

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 EmployeeForm from '@/components/admin/employees/EmployeeForm';
import { EmployeeFormSkeleton } from '@/components/ui/FormSkeleton';
import { cookies } from 'next/headers';
import Link from 'next/link';
import { SESSION_COOKIE } from '@/lib/auth/requireAuth';

interface EditEmployeePageProps {
  params: Promise<{
    id: string;
  }>;
}

async function getEmployee(id: string, sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/employees/${id}`, {
      cache: 'no-store',
      headers: { 'Authorization': `Bearer ${sessionToken}` }
    });
    if (!res.ok) return null;
    const data = await res.json();
    return data.data;
  } catch (error) {
    console.error('Failed to fetch employee data:', error);
    return null;
  }
}

async function getDropdownData(sessionToken: string) {
  try {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
    const res = await fetch(`${baseUrl}/api/employees?for=dropdown`, {
      cache: 'no-store',
      headers: { 'Authorization': `Bearer ${sessionToken}` }
    });
    
    if (!res.ok) {
      return { roles: [], permissions: [] };
    }
    
    const data = await res.json();
    return {
      roles: data.data?.roles || [],
      permissions: data.data?.permissions || []
    };
  } catch (error) {
    console.error('Failed to fetch dropdown data:', error);
    return { roles: [], permissions: [] };
  }
}

async function EditEmployeeContent({ params }: EditEmployeePageProps) {
  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.EMPLOYEES_UPDATE)) {
    return <AccessDenied />;
  }
  
  const { id } = await params;
  
  const [employee, dropdownData] = await Promise.all([
    getEmployee(id, sessionId),
    getDropdownData(sessionId)
  ]);
  
  if (!employee) {
    return (
      <div className="sm:p-6">
        <div className="text-center py-12">
          <h2 className="text-xl font-semibold mb-2" style={{ color: 'var(--color-text)' }}>
            Employee not found
          </h2>
          <p className="text-sm mb-6" style={{ color: 'var(--color-text-secondary)' }}>
            The employee you`re trying to edit doesn`t exist or has been deleted.
          </p>
          <Link 
            href="/dashboard/employees"
            className="inline-block px-4 py-2 rounded-lg text-sm font-medium transition-all hover:opacity-90"
            style={{ background: 'var(--color-cta)', color: 'white' }}
          >
            Back to Employees
          </Link>
        </div>
      </div>
    );
  }

  const canChangePassword = session.permissions.includes(PERMISSIONS.EMPLOYEES_CHANGE_PASSWORD);
  const canManageOverrides = session.permissions.includes(PERMISSIONS.EMPLOYEES_MANAGE_OVERRIDES);
  
  return (
    <>
      <div className="mb-6">
        <h1 className="text-2xl font-semibold" style={{ color: 'var(--color-text)' }}>
          Edit Employee
        </h1>
        <p className="text-sm mt-1" style={{ color: 'var(--color-text-secondary)' }}>
          Update employee information and manage permissions
        </p>
      </div>
      
      <EmployeeForm 
        mode="edit"
        initialData={employee}
        roles={dropdownData.roles}
        allPermissions={dropdownData.permissions}
        canChangePassword={canChangePassword}
        canManageOverrides={canManageOverrides}
      />
    </>
  );
}

export default async function EditEmployeePage({ params }: EditEmployeePageProps) {
  return (
    <div className="sm:p-6">
      <Suspense fallback={<EmployeeFormSkeleton />}>
        <EditEmployeeContent params={params} />
      </Suspense>
    </div>
  );
}