"use client";

import { useState, useEffect } from "react";
import { api, getImageUrl } from "@/lib/api";
import { Category } from "@/types";
import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { Skeleton } from "@/components/ui/Skeleton";

import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { ChevronRight, ArrowRight } from "lucide-react";

export default function CategoriesPage() {
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);
  const [imgErrors, setImgErrors] = useState<Record<string, boolean>>({});

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const response = await api.getCategories();
        if (response.data) {
          setCategories(response.data);
        }
      } catch (error) {
        console.error("Failed to fetch categories:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchCategories();
  }, []);

  return (
    <div className="min-h-screen bg-white">
      <Header />
      
      <main>
        <div className="container mx-auto px-4 py-12 md:py-20">
          <div className="text-center mb-12 md:mb-16">
            <motion.h1 
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              className="text-3xl md:text-5xl font-black text-zinc-900 tracking-tight mb-4"
            >
              Shop by <span className="text-[#2b9d10]">Categories</span>
            </motion.h1>
            
            <motion.p 
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="text-zinc-500 text-sm md:text-base font-medium max-w-xl mx-auto"
            >
              Discover our wide range of fresh and organic products across different categories.
            </motion.p>
          </div>

          {loading ? (
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-6">
              {[...Array(10)].map((_, i) => (
                <div key={i} className="bg-zinc-50 rounded-2xl p-6 flex flex-col items-center gap-4">
                  <Skeleton className="w-16 h-16 rounded-full" />
                  <Skeleton className="h-4 w-20 rounded-lg" />
                </div>
              ))}
            </div>
          ) : categories.length > 0 ? (
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-6">
              {categories.map((category: any, index) => {
                const displayImage = category.image || category.image_url || category.imageUrl || category.iconUrl || category.icon_url;
                
                return (
                  <motion.div
                    key={category.id}
                    initial={{ opacity: 0, y: 10 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: index * 0.02 }}
                    className="group"
                  >
                    <Link 
                      href={`/products?category_id=${category.id}`}
                      className="flex flex-col items-center p-6 bg-white border border-zinc-100 rounded-2xl hover:border-[#2b9d10]/30 hover:shadow-lg hover:shadow-green-50 transition-all duration-300"
                    >
                      <div className="w-20 h-20 md:w-24 md:h-24 relative mb-4 p-4 bg-zinc-50 rounded-full group-hover:bg-green-50 transition-colors">
                        <Image
                          src={imgErrors[category.id] ? "https://placehold.co/100x100/f8f9fa/adb5bd?text=C" : getImageUrl(displayImage)}
                          alt={category.name}
                          fill
                          className="object-contain p-4 transition-transform duration-500 group-hover:scale-110"
                          onError={() => setImgErrors(prev => ({ ...prev, [category.id]: true }))}
                        />
                      </div>
                      
                      <h3 className="text-sm md:text-base font-bold text-zinc-900 text-center group-hover:text-[#2b9d10] transition-colors line-clamp-1">
                        {category.name}
                      </h3>
                      
                      <span className="mt-1 text-[10px] font-bold text-zinc-400 uppercase tracking-widest group-hover:text-[#2b9d10]/70">
                        View Products
                      </span>
                    </Link>
                  </motion.div>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-20 bg-zinc-50 rounded-3xl border border-zinc-100">
              <h2 className="text-xl font-bold text-zinc-900 mb-2">No Categories Found</h2>
              <p className="text-zinc-500 text-sm mb-6">We're updating our collection. Please check back later.</p>
              <Link href="/" className="inline-flex items-center gap-2 bg-[#2b9d10] text-white px-6 py-3 rounded-xl font-bold text-sm hover:bg-[#23820d] transition-all">
                Return Home <ArrowRight size={16} />
              </Link>
            </div>
          )}
        </div>
      </main>

      <Footer />
    </div>
  );
}