"use client";

import { useEffect, useState } from "react";
import { Link } from "@/i18n/routing";
import Image from "next/image";
import { useBlogStore } from "@/store/blog/user";
import { Skeleton } from "@/components/ui/skeleton";
import { motion } from "framer-motion";
import {
  ArrowRight,
  Layers,
  AlertCircle,
} from "lucide-react";
import { useTranslations } from "next-intl";
import { PageHero } from "../components/page-hero";
import { FloatingShapes, InteractivePattern } from "@/components/sections/shared";

export function CategoriesClient() {
  const t = useTranslations("blog_blog");
  const tCommon = useTranslations("common");
  const { categories, isLoading, fetchCategories, error } = useBlogStore();
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  useEffect(() => {
    fetchCategories();
  }, [fetchCategories]);
  if (isLoading && categories.length === 0) {
    return (
      <div className="min-h-screen relative overflow-hidden bg-white dark:bg-zinc-950">
        {/* Premium Background */}
        <div
          className="fixed inset-0 pointer-events-none"
          style={{
            background: `linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.03) 10%, rgba(139, 92, 246, 0.02) 30%, transparent 60%)`,
          }}
        />
        <div
          className="fixed inset-0 pointer-events-none"
          style={{
            background: `radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%)`,
          }}
        />

        {/* PageHero Skeleton */}
        <div className="relative z-10 container mx-auto px-4 py-16 text-center">
          {/* Badge Skeleton */}
          <div className="flex justify-center mb-6">
            <Skeleton className="h-8 w-32 rounded-full" />
          </div>
          {/* Title Skeleton */}
          <Skeleton className="h-14 w-96 mx-auto mb-4 rounded-xl" />
          {/* Description Skeleton */}
          <Skeleton className="h-6 w-2/3 mx-auto mb-2 rounded-lg" />
          <Skeleton className="h-6 w-1/2 mx-auto rounded-lg" />
        </div>

        <div className="relative z-10 container mx-auto px-4 py-12">
          {/* Featured Categories Section */}
          <div className="mb-16">
            {/* Section Header */}
            <div className="flex items-center justify-between mb-8">
              <Skeleton className="h-8 w-48 rounded-lg" />
              <Skeleton className="h-6 w-32 rounded-lg" />
            </div>

            {/* Featured Cards Grid - 3 large cards with h-80 */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {Array.from({ length: 3 }).map((_, i) => (
                <Skeleton key={`featured-${i}`} className="h-80 w-full rounded-2xl" />
              ))}
            </div>
          </div>

          {/* All Categories Section */}
          <div>
            {/* Section Header */}
            <Skeleton className="h-8 w-40 mb-8 rounded-lg" />

            {/* All Categories Grid - smaller cards */}
            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
              {Array.from({ length: 6 }).map((_, i) => (
                <div key={`all-${i}`} className="flex flex-col h-full">
                  {/* Image skeleton */}
                  <Skeleton className="h-48 w-full rounded-t-xl" />
                  {/* Content skeleton */}
                  <div className="flex-1 p-6 bg-white dark:bg-zinc-800 rounded-b-xl border border-zinc-100 dark:border-zinc-700 border-t-0">
                    <Skeleton className="h-5 w-3/4 mb-4 rounded-lg" />
                    <Skeleton className="h-4 w-full mb-2 rounded-lg" />
                    <Skeleton className="h-4 w-5/6 mb-6 rounded-lg" />
                    <Skeleton className="h-4 w-24 rounded-lg" />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }
  if (error) {
    return (
      <div className="min-h-screen relative overflow-hidden bg-white dark:bg-zinc-950 pt-24">
        <div
          className="fixed inset-0 pointer-events-none"
          style={{
            background: `radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%)`,
          }}
        />
        <FloatingShapes
          count={6}
          interactive={true}
          theme={{ primary: "indigo", secondary: "purple" }}
        />
        <div className="relative z-10 container mx-auto px-4 pb-16">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center"
          >
            <div className="mb-8 inline-flex items-center justify-center p-8 bg-linear-to-br from-red-500/10 to-orange-500/10 rounded-3xl border border-red-200/50 dark:border-red-900/50">
              <AlertCircle className="h-16 w-16 text-red-500 dark:text-red-400" />
            </div>
            <h1 className="text-3xl font-bold mb-4 text-zinc-900 dark:text-zinc-100">
              {t("categories")}
            </h1>
            <div className="bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl text-red-700 dark:text-red-400 p-6 rounded-2xl inline-block border border-red-200/50 dark:border-red-900/50 shadow-xl">
              {error}
            </div>
          </motion.div>
        </div>
      </div>
    );
  }

  // Function to get a gradient based on category index
  const getCategoryGradient = (index: number) => {
    const gradients = [
      "from-indigo-500 to-purple-600 dark:from-indigo-600 dark:to-purple-700",
      "from-blue-500 to-cyan-500 dark:from-blue-600 dark:to-cyan-600",
      "from-emerald-500 to-teal-500 dark:from-emerald-600 dark:to-teal-600",
      "from-orange-500 to-amber-500 dark:from-orange-600 dark:to-amber-600",
      "from-pink-500 to-rose-500 dark:from-pink-600 dark:to-rose-600",
    ];
    return gradients[index % gradients.length];
  };
  return (
    <div className="min-h-screen relative overflow-hidden bg-white dark:bg-zinc-950">
      {/* Premium Background */}
      <div
        className="fixed inset-0 pointer-events-none"
        style={{
          background: `linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.03) 10%, rgba(139, 92, 246, 0.02) 30%, transparent 60%)`,
        }}
      />
      <div
        className="fixed inset-0 pointer-events-none"
        style={{
          background: `radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%)`,
        }}
      />
      <FloatingShapes
        count={8}
        interactive={true}
        theme={{ primary: "indigo", secondary: "purple" }}
      />
      <InteractivePattern
        config={{
          enabled: true,
          variant: "crosses",
          opacity: 0.015,
          size: 40,
          interactive: true,
        }}
      />

      {/* Hero Section */}
      <PageHero
        badge={{ icon: <Layers className="h-3.5 w-3.5" />, text: t("categories") }}
        title={[
          { text: "Browse by " },
          { text: "Category", gradient: "from-indigo-600 to-purple-600" },
        ]}
        description={`${t("explore_our_content_organized_by_topics")}. ${t("discover_articles_tutorials_of_interest")}.`}
      />

      <div className="relative z-10 container mx-auto px-4 py-12">
        {/* Featured Categories */}
        <div className="mb-16">
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
              {t("featured_categories")}
            </h2>
            <Link
              href="/blog"
              className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 flex items-center"
            >
              {t("view_all_posts")}
              <ArrowRight className="ml-1 h-4 w-4" />
            </Link>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {categories.slice(0, 3).map((category, index) => {
              return (
                <motion.div
                  key={`featured-${category.id}`}
                  initial={{
                    opacity: 0,
                    y: 20,
                  }}
                  animate={{
                    opacity: 1,
                    y: 0,
                  }}
                  transition={{
                    duration: 0.5,
                    delay: index * 0.1,
                  }}
                  className="relative h-80 overflow-hidden rounded-2xl shadow-lg"
                  onMouseEnter={() => setHoveredIndex(index)}
                  onMouseLeave={() => setHoveredIndex(null)}
                >
                  <div className="absolute inset-0 bg-gradient-to-br from-black/60 to-black/40 z-10"></div>
                  <div
                    className={`absolute inset-0 bg-gradient-to-br ${getCategoryGradient(index)} opacity-70 z-0 transition-opacity duration-300 ${hoveredIndex === index ? "opacity-90" : "opacity-70"}`}
                  ></div>

                  {category.image && (
                    <Image
                      src={category.image || "/placeholder.svg"}
                      alt={category.name}
                      fill
                      className="object-cover z-0 transition-transform duration-700 scale-105"
                      style={{
                        transform:
                          hoveredIndex === index ? "scale(1.1)" : "scale(1.05)",
                      }}
                    />
                  )}

                  <div className="absolute inset-0 z-20 p-8 flex flex-col justify-between">
                    <div>
                      <h3 className="text-3xl font-bold text-white mb-2">
                        {category.name}
                      </h3>
                      <p className="text-white/80 line-clamp-3">
                        {category.description ||
                          "Explore posts in this category"}
                      </p>
                    </div>

                    <div className="flex items-center justify-between">
                      {category.postCount !== undefined && (
                        <span className="inline-flex items-center rounded-full bg-white/20 backdrop-blur-sm px-3 py-1 text-sm font-medium text-white">
                          {category.postCount}{" "}
                          {category.postCount === 1 ? "post" : "posts"}
                        </span>
                      )}

                      <Link
                        href={`/blog/category/${category.slug}`}
                        className="inline-flex items-center rounded-full bg-white/20 backdrop-blur-sm px-4 py-2 text-sm font-medium text-white hover:bg-white/30 transition-colors duration-300"
                      >
                        {t("explore")}
                        <ArrowRight className="ml-1 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
                      </Link>
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </div>

        {/* All Categories Grid */}
        <div>
          <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-8">
            {tCommon("all_categories")}
          </h2>

          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {categories.map((category, index) => {
              return (
                <motion.div
                  key={category.id}
                  initial={{
                    opacity: 0,
                    y: 20,
                  }}
                  animate={{
                    opacity: 1,
                    y: 0,
                  }}
                  transition={{
                    duration: 0.4,
                    delay: index * 0.05,
                  }}
                  whileHover={{
                    y: -5,
                  }}
                  className="group h-full"
                >
                  <Link
                    href={`/blog/category/${category.slug}`}
                    className="flex flex-col h-full overflow-hidden rounded-xl bg-white dark:bg-zinc-800 shadow-md hover:shadow-xl dark:shadow-zinc-900/30 dark:hover:shadow-zinc-900/50 transition-all duration-300 border border-zinc-100 dark:border-zinc-700"
                  >
                    <div className="relative h-48 w-full overflow-hidden">
                      <Image
                        src={category.image || "/placeholder.svg"}
                        alt={category.name}
                        fill
                        className="object-cover transition-transform duration-500 group-hover:scale-105"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>

                      <div className="absolute bottom-4 left-4 right-4 flex justify-between items-center">
                        <h2 className="text-xl font-bold text-white drop-shadow-sm">
                          {category.name}
                        </h2>
                        {category.postCount !== undefined && (
                          <span className="inline-flex items-center rounded-full bg-white/20 backdrop-blur-sm px-2.5 py-0.5 text-xs font-medium text-white">
                            {category.postCount}{" "}
                            {category.postCount === 1 ? "post" : "posts"}
                          </span>
                        )}
                      </div>
                    </div>

                    <div className="flex-1 p-6 flex flex-col justify-between">
                      <p className="text-zinc-600 dark:text-zinc-300 mb-4 line-clamp-2">
                        {category.description ||
                          "Explore posts in this category"}
                      </p>

                      <div className="flex items-center text-indigo-600 dark:text-indigo-400 text-sm font-medium group-hover:text-indigo-700 dark:group-hover:text-indigo-300">
                        {t("browse_posts")}
                        <ArrowRight className="ml-1 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
                      </div>
                    </div>
                  </Link>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}