"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { Award as AwardIcon, X, Maximize2, FileText, Search } from "lucide-react";
import gsap from "gsap";
import Navbar from "@/components/Navbar";
import Breadcrumbs from "@/components/Breadcrumbs";
import Footer from "@/components/Footer";
import ScrollAnimations from "@/components/ScrollAnimations";
import { awards, AwardItem } from "@/lib/awards";
import { cn } from "@/lib/utils";

export default function AwardsPage() {
    const mainRef = useRef<HTMLDivElement>(null);
    const [selectedAward, setSelectedAward] = useState<AwardItem | null>(null);
    const [activeTab, setActiveTab] = useState<"all" | "Award" | "Certificate">("all");
    const [searchQuery, setSearchQuery] = useState("");

    useEffect(() => {
        const ctx = gsap.context(() => {
            gsap.from(".awards-hero-title", {
                y: 50,
                opacity: 0,
                duration: 1.2,
                ease: "power3.out",
                delay: 0.2
            });
        }, mainRef);

        return () => ctx.revert();
    }, []);

    // Filter items
    const filteredAwards = awards.filter((item) => {
        const matchesTab = activeTab === "all" || item.type === activeTab;
        const matchesSearch =
            item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
            item.subtitle.toLowerCase().includes(searchQuery.toLowerCase());
        return matchesTab && matchesSearch;
    });

    return (
        <main ref={mainRef} className="min-h-screen bg-white">
            <ScrollAnimations />
            <Navbar />

            {/* AWARDS HERO - Banner */}
            <section className="relative pt-24 pb-8 md:pt-40 md:pb-16 min-h-[20px] w-full flex items-center justify-center overflow-hidden mb-24">
                <Image
                    src="/images/pexels9.webp"
                    alt="Awards Background"
                    fill
                    className="object-cover"
                    priority
                />
                <div className="absolute inset-0 bg-brand-dark/70" />

                <div className="relative z-10 text-center px-6">
                    <h1 className="awards-hero-title text-4xl md:text-6xl lg:text-7xl font-medium text-white tracking-tight mt-6">
                        Awards & Certifications
                    </h1>
                </div>
            </section>

            {/* BREADCRUMB, SEARCH & FILTER CONTROLS */}
            <section className="pb-8 pt-8">
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 pb-8 mt-[-4rem]">
                    <Breadcrumbs items={[{ label: "Awards & Certifications" }]} className="mb-12" />

                    <div className="flex flex-col md:flex-row items-center justify-between gap-6 border-b border-zinc-100 pb-8">
                        {/* Search Input */}
                        {/* <div className="relative w-full md:max-w-md">
                            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-400" />
                            <input
                                type="text"
                                placeholder="Search awards or test reports..."
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                                className="w-full pl-11 pr-4 py-3 rounded-xl border border-zinc-200 bg-zinc-50 text-sm focus:outline-none focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent focus:bg-white transition-all text-zinc-800 placeholder-zinc-400 font-sans"
                            />
                        </div> */}

                        {/* Category Tabs */}
                        <div className="flex flex-wrap gap-2 w-full md:w-auto justify-start md:justify-end">
                            {(["all", "Award", "Certificate"] as const).map((tab) => (
                                <button
                                    key={tab}
                                    onClick={() => setActiveTab(tab)}
                                    className={cn(
                                        "px-6 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider transition-all duration-300 cursor-pointer font-sans",
                                        activeTab === tab
                                            ? "bg-[#b12028] text-white shadow-md shadow-[#b12028]/15"
                                            : "bg-zinc-50 hover:bg-zinc-100 text-zinc-600 border border-zinc-200/50"
                                    )}
                                >
                                    {tab === "all" ? "All Documents" : tab === "Award" ? "Awards" : "Certifications & Tests"}
                                </button>
                            ))}
                        </div>
                    </div>
                </div>

                {/* ARCHIVE GRID */}
                <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 pb-24">
                    {filteredAwards.length > 0 ? (
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                            {filteredAwards.map((item, i) => (
                                <div
                                    key={i}
                                    className="group aspect-square relative rounded-2xl overflow-hidden border border-brand-dark/5 bg-zinc-50 shadow-sm hover:shadow-xl transition-all duration-700 cursor-pointer"
                                    onClick={() => setSelectedAward(item)}
                                >
                                    <Image
                                        src={item.image}
                                        alt={item.title}
                                        fill
                                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                                        className="object-cover transition-transform duration-1000 group-hover:scale-110"
                                    />
                                    <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                        <div className="p-8 text-center text-white transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                                            <div className="flex items-center justify-center gap-2 mb-3">
                                                <Maximize2 className="w-4 h-4 text-brand-accent" />
                                                <span className="text-[10px] font-black uppercase tracking-widest text-white/50">View Document</span>
                                            </div>
                                            <h4 className="text-lg font-bold mb-2 leading-tight">{item.title}</h4>
                                            <p className="text-xs opacity-70 italic line-clamp-2">{item.subtitle}</p>
                                        </div>
                                    </div>
                                    
                                    {/* Default overlay type badge at bottom left when not hovered */}
                                    <div className="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm border border-zinc-200/50 px-3 py-1 rounded-lg flex items-center gap-1.5 shadow-sm group-hover:opacity-0 transition-opacity duration-300">
                                        {item.type === "Award" ? (
                                            <AwardIcon className="w-3.5 h-3.5 text-[#b12028]" />
                                        ) : (
                                            <FileText className="w-3.5 h-3.5 text-[#b12028]" />
                                        )}
                                        <span className="text-[9px] font-bold uppercase tracking-wider text-zinc-700">
                                            {item.type === "Award" ? "Award" : "Certificate"}
                                        </span>
                                    </div>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div className="text-center py-20 bg-zinc-50 rounded-2xl border border-dashed border-zinc-200">
                            <p className="text-sm font-semibold text-zinc-500 uppercase tracking-widest">
                                No matching documents found.
                            </p>
                        </div>
                    )}
                </div>
            </section>

            {/* DETAIL MODAL */}
            {selectedAward && (
                <div className="fixed inset-0 z-[110] flex items-center justify-center p-6 md:p-12">
                    <div
                        className="absolute inset-0 bg-brand-dark/95 backdrop-blur-xl transition-all duration-700"
                        onClick={() => setSelectedAward(null)}
                    />
                    <div className="relative w-full max-w-5xl bg-white rounded-2xl overflow-hidden shadow-2xl flex flex-col md:flex-row h-auto max-h-[90vh] overflow-y-auto animate-in zoom-in-95 duration-300">
                        <div className="relative w-full md:w-3/5 min-h-[300px] md:h-auto bg-zinc-100">
                            <Image src={selectedAward.image} alt={selectedAward.title} fill className="object-contain p-4 md:p-8" />
                        </div>
                        <div className="w-full md:w-2/5 p-12 md:p-16 flex flex-col justify-center bg-white relative">
                            <button
                                onClick={() => setSelectedAward(null)}
                                className="absolute top-8 right-8 z-[50] w-10 h-10 rounded-full bg-red-600 hover:bg-red-700 text-white flex items-center justify-center shadow-lg hover:scale-110 active:scale-95 transition-all group cursor-pointer"
                            >
                                <X className="w-4 h-4 group-hover:rotate-90 transition-transform" />
                            </button>
                            <div className="flex items-center gap-4 mb-8">
                                <div className="h-[1.5px] w-12 bg-brand-accent" />
                                <span className="text-[10px] font-black text-brand-accent uppercase tracking-[0.4em]">{selectedAward.type} Details</span>
                            </div>
                            <h3 className="text-3xl font-black text-brand-dark mb-6 tracking-tighter leading-tight">{selectedAward.title}</h3>
                            <p className="text-lg text-brand-dark/50 font-medium leading-relaxed italic mb-10">{selectedAward.subtitle}</p>
                            <div className="p-8 rounded-[1.5rem] bg-zinc-50 border border-brand-dark/5">
                                <p className="text-xs text-brand-dark/40 font-medium leading-relaxed">
                                    Official verification of iRoof&apos;s commitment to industrial excellence and product safety within the Sri Lankan construction landscape.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            <Footer />
        </main>
    );
}