"use client";
import { useState, useEffect } from "react";
import Image from "next/legacy/image";
import Link from "next/link";
import { getValidImageUrl, FALLBACK_IMAGES } from "@/lib/imageUtils";

const Story = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const [activeImageIndex, setActiveImageIndex] = useState(0);
  
  // Static case studies data
  const storyData = [
    {
      id: 1,
      destination: "Financial Services",
      title: "Banking System Modernization",
      subtitle: "Complete digital transformation of legacy banking systems with enhanced security and real-time processing capabilities.",
      image: "/images/case/one.png",
      path: "/case-study/banking-system-modernization",
      display_order: 1,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 2,
      destination: "Healthcare",
      title: "Patient Management System",
      subtitle: "Enterprise-grade patient management system with HIPAA compliance and seamless integration across multiple healthcare facilities.",
      image: "/images/case/two.png",
      path: "/case-study/patient-management-system",
      display_order: 2,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 3,
      destination: "Manufacturing",
      title: "Supply Chain Optimization",
      subtitle: "Advanced supply chain management system with real-time tracking, predictive analytics, and automated inventory management.",
      image: "/images/case/three.png",
      path: "/case-study/supply-chain-optimization",
      display_order: 3,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 4,
      destination: "E-commerce",
      title: "Multi-Platform Integration",
      subtitle: "Seamless integration of multiple e-commerce platforms with unified inventory management and real-time synchronization.",
      image: "/images/case/four.png",
      path: "/case-study/multi-platform-integration",
      display_order: 4,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    },
    {
      id: 5,
      destination: "Education",
      title: "Learning Management System",
      subtitle: "Comprehensive LMS with advanced analytics, automated grading, and seamless integration with existing educational tools.",
      image: "/images/case/five.png",
      path: "/case-study/learning-management-system",
      display_order: 5,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString()
    }
  ];

  const handleMouseEnter = (index: number) => {
    setActiveIndex(index);
    setActiveImageIndex(index);
  };


  return (
    <section className="tp-story pt-120 pb-120 bg-black sticky-wrapper fade-wrapper">
      <div className="container">
        <div className="row vertical-column-gap-md">
          <div className="col-12 col-lg-5">
            <div className="tp-story__content sticky-item">
              <h2 className="mt-8 title-anim text-white fw-7">
                Enterprise Case Studies
              </h2>
              <div className="tp-story__items">
                {storyData.map((item, index) => {
                  return (
                    <div
                      key={index}
                      className={`tp-story__single fade-top ${
                        index === activeIndex ? "active" : ""
                      }`}
                      onMouseEnter={() => handleMouseEnter(index)}
                    >
                      <p className="fw-6 mt-8">
                        <Link href={`${item.path}`}>{item.destination}</Link>
                      </p>
                      <h5 className="fw-4 mt-12 mb-12 text-white">
                        {item.title}
                      </h5>
                      <p className="text-xs">{item.subtitle}</p>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
          <div className="col-12 col-lg-7 col-xxl-6 offset-xxl-1 d-none d-lg-block">
            <div className="tp-story__thumbs sticky-item">
              {storyData.map((item, index) => {
                return (
                  <div
                    key={index}
                    className={`tp-story-thumb ${
                      index === activeImageIndex ? "thumb-active" : ""
                    }`}
                  >
                    <Image
                      src={getValidImageUrl(item.image, FALLBACK_IMAGES.CASE_STUDY)}
                      width={600}
                      height={300}
                      className="w-100 mh-300"
                      alt="Image"
                    />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Story;