"use client";

import { useState } from "react";
import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import { Check, MessageCircle } from "lucide-react";
import { useTranslation } from "@/lib/i18n/context";
import { SectionHeading } from "@/components/ui/section-heading";

export function Products() {
  const { t, dir } = useTranslation();
  const [activeFilter, setActiveFilter] = useState("all");

  const sizes = t.products.sizes;
  const benefits = t.products.benefits;

  const filters = [
    { id: "all", label: t.products.filterAll },
    ...sizes.map((s) => ({ id: s.id, label: s.name })),
  ];

  const filteredSizes = activeFilter === "all" ? sizes : sizes.filter((s) => s.id === activeFilter);

  const getBenefitText = (key: string): string => {
    return benefits[key as keyof typeof benefits] || key;
  };

  return (
    <section id="products" className="section-padding bg-white relative" dir={dir}>
      <div className="max-w-7xl mx-auto">
        <SectionHeading
          tag={t.products.sectionTag}
          title={t.products.title}
          subtitle={t.products.subtitle}
        />

        {/* Filter Tabs */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="flex flex-wrap justify-center gap-2 mb-12"
        >
          {filters.map((filter) => (
            <button
              key={filter.id}
              onClick={() => setActiveFilter(filter.id)}
              className={`px-5 py-2.5 rounded-full text-sm font-semibold transition-all duration-300 ${
                activeFilter === filter.id
                  ? "bg-primary text-white shadow-lg shadow-primary/25"
                  : "bg-light-gray text-dark-text/60 hover:bg-baby-blue/50 hover:text-primary"
              }`}
            >
              {filter.label}
            </button>
          ))}
        </motion.div>

        {/* Product Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          <AnimatePresence mode="wait">
            {filteredSizes.map((size, index) => (
              <motion.div
                key={size.id}
                layout
                initial={{ opacity: 0, y: 30, scale: 0.95 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                exit={{ opacity: 0, scale: 0.95 }}
                transition={{ duration: 0.4, delay: index * 0.08 }}
                className="product-card group"
              >
                <div className="bg-white rounded-3xl border border-medium-gray/50 overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300">
                  {/* Card Header */}
                  <div className="relative bg-gradient-to-br from-baby-blue/30 via-soft-cream/30 to-white p-6 pb-2">
                    {/* Size Badge */}
                    <div className="absolute top-4 start-4 flex items-center gap-2">
                      <span className="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center text-lg font-black">
                        {size.number}
                      </span>
                      <span className="text-xs font-bold text-primary bg-primary/10 px-2.5 py-1 rounded-full">
                        {size.label}
                      </span>
                    </div>

                    {/* Product Image */}
                    <div className="flex justify-center pt-8 pb-4">
                      <motion.div
                        whileHover={{ scale: 1.05, rotate: 2 }}
                        transition={{ type: "spring", stiffness: 300 }}
                      >
                        <Image
                          src={size.image}
                          alt={`UNIPAM ${size.name}`}
                          width={200}
                          height={220}
                          className="h-48 w-auto object-contain drop-shadow-xl"
                        />
                      </motion.div>
                    </div>
                  </div>

                  {/* Card Body */}
                  <div className="p-6 pt-4">
                    <h3 className="text-xl font-extrabold text-dark-text mb-1">
                      {size.name}
                    </h3>
                    <p className="text-sm font-semibold text-primary mb-4">
                      {size.weight}
                    </p>

                    {/* Benefits */}
                    <ul className="space-y-2 mb-6">
                      {size.benefits.map((benefit) => (
                        <li key={benefit} className="flex items-center gap-2 text-sm text-dark-text/70">
                          <Check size={14} className="text-soft-teal flex-shrink-0" />
                          {getBenefitText(benefit)}
                        </li>
                      ))}
                    </ul>

                    {/* CTA */}
                    <button
                      onClick={() => {
                        const msg = `Hello, I'm interested in UNIPAM ${size.name} (${size.weight}). Is it available?`;
                        window.open(`https://wa.me/905352534344?text=${encodeURIComponent(msg)}`, "_blank");
                      }}
                      className="w-full flex items-center justify-center gap-2 py-3 rounded-full bg-[#25D366] text-white font-bold text-sm hover:bg-[#128C7E] transition-all duration-300 group/btn shadow-md hover:shadow-lg shadow-[#25D366]/20"
                    >
                      <MessageCircle size={16} className="group-hover/btn:scale-110 transition-transform" />
                      {t.products.askAvailability}
                    </button>
                  </div>
                </div>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      </div>
    </section>
  );
}