import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
import { JobListingSlugWrapper } from "@/components/jobs/JobListingSlugWrapper";
import { JobService } from "@/services/job.service";
import { JobFilters } from "@/store/jobFilters.store";

export const metadata = {
  title: "Jobs - JobVumi",
  description: "Find the best jobs matching your profile.",
};

const parseSlug = (slug: string) => {
  if (slug.startsWith('jobs-in-')) {
    const cityPart = slug.replace('jobs-in-', '');
    const cityName = cityPart.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
    return { locations: [cityName] };
  } else if (slug.startsWith('jobs-by-industry-')) {
    const part = slug.replace('jobs-by-industry-', '');
    const name = part.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
    return { industries: [name] };
  } else if (slug.startsWith('jobs-by-education-')) {
    const part = slug.replace('jobs-by-education-', '');
    const name = part.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
    return { educations: [name] };
  } else if (slug.startsWith('jobs-by-type-')) {
    const part = slug.replace('jobs-by-type-', '');
    const name = part.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
    return { workTypes: [name] };
  }
  return {};
};

export default async function JobListingSlugPage({ params }: { params: Promise<{ slug: string }> }) {
  const queryClient = new QueryClient();
  const { slug } = await params;
  const slugFilters = parseSlug(slug);

  const initialFilters: JobFilters = {
    keyword: "",
    locations: slugFilters.locations || [],
    industries: slugFilters.industries || [],
    educations: slugFilters.educations || [],
    datePosted: "all",
    workModes: [],
    workTypes: slugFilters.workTypes || [],
    workShifts: [],
    page: 1,
    limit: 10,
  };

  await queryClient.prefetchQuery({
    queryKey: ["jobs", initialFilters],
    queryFn: () => JobService.getFilteredJobs(initialFilters),
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <JobListingSlugWrapper initialFilters={slugFilters} />
    </HydrationBoundary>
  );
}