import type { Metadata } from "next";
import Link from "next/link";
import { PageHero } from "@/components/site/page-hero";
import { Reveal, Stagger, StaggerItem } from "@/components/site/motion";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { db } from "@/lib/db";
import { MapPin, Calendar, ArrowUpRight, Building2 } from "lucide-react";

export const metadata: Metadata = {
  title: "Our Projects",
  description: "Explore industrial and commercial HVAC projects delivered by AHE Services — chiller plants, cold storage, hospital HVAC, cleanrooms and more.",
  alternates: { canonical: "/projects" },
};

export const revalidate = 60;

export default async function ProjectsPage() {
  const projects = await db.project.findMany({
    where: { isEnabled: true },
    orderBy: { createdAt: "desc" },
  });
  const categories = [...new Set(projects.map((p) => p.category))];

  return (
    <>
      <PageHero
        eyebrow="Our Work"
        title={<>Projects That Keep Pakistan <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">Cooling</span></>}
        subtitle="A selection of recent industrial and commercial HVAC installations — each engineered for reliability, efficiency and long-term performance."
        breadcrumbs={[{ label: "Projects" }]}
      />

      <section className="py-16 lg:py-24">
        <div className="container-mx">
          {/* Category filter chips (visual) */}
          <Reveal>
            <div className="flex flex-wrap gap-2 mb-10">
              <span className="px-4 py-2 rounded-full bg-[var(--brand-royal)] text-white text-sm font-semibold">All ({projects.length})</span>
              {categories.map((c) => (
                <span key={c} className="px-4 py-2 rounded-full bg-muted text-muted-foreground text-sm font-medium">{c}</span>
              ))}
            </div>
          </Reveal>

          <Stagger className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {projects.map((p, i) => {
              const imgs = JSON.parse(p.images || "[]") as string[];
              const fallbacks = ["/uploads/project-chiller.jpg", "/uploads/project-coldstorage.jpg", "/uploads/project-hospital.jpg", "/uploads/hero-hvac.jpg"];
              const cover = imgs[0] || fallbacks[i % fallbacks.length];
              return (
                <StaggerItem key={p.id}>
                  <Link href={`/projects/${p.slug}`} className="group block h-full">
                    <Card className="overflow-hidden rounded-2xl border-border/70 hover:shadow-brand transition-all duration-300 hover:-translate-y-1 h-full flex flex-col">
                      <div className="relative aspect-[16/10] overflow-hidden">
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img src={cover} alt={p.title} className="size-full object-cover group-hover:scale-105 transition-transform duration-500" />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
                        <span className="absolute top-3 left-3 px-2.5 py-1 rounded-full bg-[var(--brand-royal)] text-white text-xs font-semibold">{p.category}</span>
                        {p.isFeatured && <span className="absolute top-3 right-3 px-2.5 py-1 rounded-full bg-amber-400 text-amber-950 text-xs font-bold">Featured</span>}
                      </div>
                      <div className="p-5 flex-1 flex flex-col">
                        <h3 className="font-bold text-lg text-foreground group-hover:text-[var(--brand-royal)] transition-colors">{p.title}</h3>
                        <p className="mt-2 text-sm text-muted-foreground line-clamp-2 flex-1">{p.description}</p>
                        <div className="mt-4 pt-4 border-t border-border/60 flex items-center justify-between text-xs text-muted-foreground">
                          <span className="flex items-center gap-1.5"><MapPin className="size-3.5" /> {p.location || "Karachi"}</span>
                          {p.completionDate && <span className="flex items-center gap-1.5"><Calendar className="size-3.5" /> {new Date(p.completionDate).getFullYear()}</span>}
                        </div>
                      </div>
                    </Card>
                  </Link>
                </StaggerItem>
              );
            })}
          </Stagger>

          {projects.length === 0 && (
            <div className="text-center py-20">
              <Building2 className="size-12 text-muted-foreground/40 mx-auto" />
              <p className="mt-4 text-muted-foreground">No projects published yet. Check back soon.</p>
            </div>
          )}
        </div>
      </section>

      <section className="py-16 brand-gradient text-white">
        <div className="container-mx text-center">
          <Reveal>
            <h2 className="text-3xl font-extrabold text-balance">Have a Project in Mind?</h2>
            <p className="mt-3 text-white/85">Let our engineers turn your cooling requirements into a reliable, efficient system.</p>
            <Button asChild size="lg" className="mt-6 bg-white text-[var(--brand-royal)] hover:bg-white/90">
              <Link href="/contact">Discuss Your Project <ArrowUpRight className="size-4" /></Link>
            </Button>
          </Reveal>
        </div>
      </section>
    </>
  );
}