import { Suspense } from "react";
import Link from "next/link";
import Banner from "@/components/banner";
import Pagination from "@/components/pagination";
import LoadingSpinner from "@/components/loading-spinner";
import { fetchProjectsImage, getProjectCategories } from "@/lib/api";
import ProjectGrid from "./_components/project-grid";
import { headers } from "next/headers";

interface ProjectCategory {
  id: string;
  name: string;
  slug: string;
  description: string;
  image: string | null;
}

interface PaginationMeta {
  current_page: number;
  per_page: number;
  total: number;
  last_page: number;
}

export const dynamic = "force-dynamic";

export default async function ProjectsPage({
  searchParams,
}: {
  searchParams: { page?: string };
}) {
  headers();

  const page = Number.parseInt(searchParams.page || "1");
  const perPage = 9; // Number of categories per page

  const [categoriesResponse, heroImageResponse] = await Promise.all([
    getProjectCategories(page, perPage),
    fetchProjectsImage(),
  ]);

  const categories: ProjectCategory[] = categoriesResponse.data;
  const meta: PaginationMeta = categoriesResponse.meta;
  const heroImage = heroImageResponse.image_url;

  return (
    <div className="pb-16 min-h-screen bg-gradient-to-b from-white to-gray-50">
      <Banner imageSrc={heroImage} height={400}>
        <div className="text-center text-white">
          <h1 className="text-5xl font-bold mb-4">Our Projects</h1>
          <p className="text-xl text-white/80">
            Explore our extensive portfolio of electrical projects across
            various industries and sectors
          </p>
        </div>
      </Banner>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16 pt-12">
          <h1 className="text-4xl font-bold text-gray-900 sm:text-5xl">
            Our Projects
          </h1>
          <div className="w-24 h-1 bg-gradient-to-r from-orange-500 to-red-500 mx-auto my-6 rounded-full"></div>
          <p className="mt-4 text-xl text-gray-600 max-w-3xl mx-auto">
            Explore our extensive portfolio of electrical projects across
            various industries and sectors
          </p>
        </div>

        <Suspense fallback={<LoadingSpinner />}>
          {categories.length === 0 ? (
            <div className="text-center py-12">
              <div className="bg-orange-50 p-6 rounded-lg max-w-2xl mx-auto">
                <h3 className="text-lg font-medium text-orange-800 mb-2">
                  No Project Categories Found
                </h3>
                <p className="text-orange-700">
                  There are currently no project categories available.
                </p>
              </div>
            </div>
          ) : (
            <>
              <ProjectGrid categories={categories} />

              {meta && (
                <Pagination
                  currentPage={meta.current_page}
                  lastPage={meta.last_page}
                  perPage={meta.per_page}
                  total={meta.total}
                  baseUrl="/projects"
                />
              )}
            </>
          )}
        </Suspense>

        <div className="mt-20 text-center">
          <div className="bg-gradient-to-r from-orange-500 to-red-500 p-8 rounded-xl shadow-lg max-w-3xl mx-auto backdrop-blur-sm">
            <h2 className="text-2xl font-bold text-white mb-4">
              Need a Custom Electrical Solution?
            </h2>
            <p className="text-white/90 mb-6">
              Contact our team of experts to discuss your specific requirements
              and get a tailored solution for your project.
            </p>
            <Link href="/contact">
              <button className="px-6 py-3 bg-white text-orange-600 font-medium rounded-lg shadow-md hover:shadow-lg transition-all">
                Contact Us
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}