import classnames from 'classnames';
import { cookies } from "next/headers";
import { JWTPayload, jwtVerify } from "jose";

import DashboardHeader from "@/components/DashboardHeader";
import { Schibsted_Grotesk } from 'next/font/google'
import { notFound, redirect } from 'next/navigation';
import EligibilitySelector from '@/components/EligibilitySelector';

const font = Schibsted_Grotesk({ subsets: ['latin'] })
const SECRET_KEY = new TextEncoder().encode(process.env.JWT_SECRET_KEY);

  interface UserJwtPayload extends JWTPayload {
    user: UserData;
  }

  interface UserData {
    id: string;
    email: string;
    name: string;
    role: string;
    roleId: string;
  }

export default async function EmployerEligibility() {
  const cookieStore = await cookies();
  const sessionCookie = cookieStore.get("session");

  if (!sessionCookie) {
      redirect('/account/signin')  
  }

  try {
    // 2. Extract the raw string token from the cookie object
    const token = sessionCookie.value;

    // 3. Verify and decode the JWT using jose
    const { payload } = await jwtVerify(token, SECRET_KEY)
    
    // 3. Cast the payload to your custom interface
    const data = payload as UserJwtPayload;

    // const userData = {
    //     plPlanKey: '61',
    //     name: "Bryan Pest Control",
    //     role: 'employer',
    //     roleId: '61'
    // }

    const userData = {
        name: data.user.name,
        role: data.user.role,
        roleId: data.user.roleId
    }

    if (!data || userData.role !== 'employer') {
      notFound(); 
    }

    return (
    <>
        <div className="flex flex-col w-full pl-8 pt-5 2xl:pt-7">
            <DashboardHeader
                userDisplayName={userData.name}
            />
            <div className="flex w-full pr-23">
                <div className={classnames("w-full flex flex-col pt-4 z-2 space-x-4 space-y-4 xl:space-y-0 text-bluemana")}>
                    <div className="w-full flex text-3xl ml-2 mb-4 font-semibold">
                        <p>Eligibility Search</p>
                    </div>
                    <div className={classnames("w-full flex flex-col px-2 text-lg", font.className)}>
                        <EligibilitySelector 
                            role={userData.role}
                            roleId={userData.roleId}
                            name={userData.name}
                        />
                    </div>
                </div>
            </div>
        </div>
    </>
    );
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  } catch (error: any) {
        if (error.message === 'NEXT_REDIRECT') throw error; 
  
        if (error.message === 'Unauthenticated') {
            redirect('/account/signin');
        }
  }
}