"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { motion, useInView } from "framer-motion";
import { ChevronRight } from "lucide-react";
import Link from "next/link";
import { getServices } from "@/lib/api";

interface Service {
  id: number;
  name: string;
  description: string;
  banner: string;
}

export default function ChintCategories() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.2,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.6, ease: "easeOut" },
    },
  };

  function truncateText(
    text: string,
    maxLength: number,
    ellipsis: string = "...",
  ): string {
    // Check if the text is already shorter than the max length
    if (text.length <= maxLength) {
      return text;
    }

    // Truncate the text and add the ellipsis
    return text.slice(0, maxLength) + ellipsis;
  }

  const [services, setServices] = useState<Service[] | undefined>(undefined);
  useEffect(() => {
    async function fetchServices() {
      const resp = await getServices();
      setServices(resp[0].services);
    }
    fetchServices();
  }, []);

  return (
    <section
      ref={ref}
      className="px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-900/50 overflow-hidden"
    >
      <motion.div
        initial="hidden"
        animate={isInView ? "visible" : "hidden"}
        variants={containerVariants}
        className="max-w-7xl mx-auto"
      >
        <motion.div variants={itemVariants} className="text-center mb-16">
          <motion.h2
            variants={itemVariants}
            className="text-4xl  font-bold text-slate-900 dark:text-slate-100 mb-6"
          >
            Our Services
          </motion.h2>
          <motion.div
            variants={itemVariants}
            className="w-24 h-1 bg-gradient-to-r from-red-500 to-red-600 rounded-full mx-auto mb-6"
          />
        </motion.div>

        <motion.div
          variants={containerVariants}
          className="grid grid-cols-1 md:grid-cols-2 gap-6"
        >
          {services &&
            services.map((service) => (
              <motion.div
                key={service.id}
                variants={itemVariants}
                whileHover={{ y: -5 }}
                className="bg-white dark:bg-slate-800 rounded-xl shadow-md overflow-hidden flex flex-col justify-between"
              >
                <div className="p-6">
                  <div className="flex items-start space-x-4">
                    <div
                      className={`bg-blue-600 p-3 rounded-full flex-shrink-0`}
                    >
                      <Image
                        src={`${process.env.NEXT_PUBLIC_API_URL}/storage/${service.banner}`}
                        alt={service.name}
                        width={32}
                        height={32}
                      />
                    </div>
                    <div>
                      <h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
                        {service.name}
                      </h3>
                      <p className="text-sm text-slate-600 dark:text-slate-400">
                        {truncateText(service.description, 70)}
                      </p>
                    </div>
                  </div>
                </div>
                <div className="px-6 py-3 bg-slate-50 dark:bg-slate-700/50 border-t border-slate-100 dark:border-slate-700">
                  <Link
                    href={`/services/${service.id}`}
                    className="flex items-center text-sm font-medium text-red-600 dark:text-red-400 hover:underline"
                  >
                    Learn more <ChevronRight className="ml-1 h-4 w-4" />
                  </Link>
                </div>
              </motion.div>
            ))}
        </motion.div>

        {/* Image version as fallback/alternative */}
        <motion.div variants={itemVariants} className="mt-12 text-center">
          <div className="relative max-w-2xl mx-auto">
            {/* <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-XQtrgixW61Rz0yDJNuonhvovmZNs39.png"
              alt="CHINT Group Business Categories"
              width={800}
              height={450}
              className="rounded-lg shadow-md"
            /> */}
          </div>
        </motion.div>
      </motion.div>
    </section>
  );
}