"use client";

import { useEffect, useRef, useState } from "react";
import { motion } from "framer-motion";

export default function JourneyTimeline() {
  const pointsRef = useRef<HTMLDivElement[]>([]);
  const containerRef = useRef<HTMLDivElement>(null);

  const [fillHeight, setFillHeight] = useState(0);
  const [activeIndex, setActiveIndex] = useState(1);

  const updateScroll = () => {
    if (!containerRef.current) return;

    const screenMid = window.innerHeight / 2;
    let newActive = 0;

    pointsRef.current.forEach((el, index) => {
      if (!el) return;
      const rect = el.getBoundingClientRect();
      if (rect.top - screenMid < 0) newActive = index;
    });

    setActiveIndex(newActive);

    const activePoint = pointsRef.current[newActive];
    if (activePoint) {
      const offset = activePoint.offsetTop;
      setFillHeight(offset + 80);
    }
  };

  useEffect(() => {
    updateScroll();
    window.addEventListener("scroll", updateScroll);
    window.addEventListener("resize", updateScroll);
    return () => {
      window.removeEventListener("scroll", updateScroll);
      window.removeEventListener("resize", updateScroll);
    };
  }, []);

  return (
    <div className="space-y-12 items-center flex flex-col w-full">
      <div className="relative w-full z-20 bg-[url('/our-menu-background.png')] h-[15vh] bg-cover bg-top flex items-center justify-center text-white">
        <h2 className="text-[#F2AE48] text-4xl font-semibold">Our Journey</h2>
      </div>

      <div
        ref={containerRef}
        className="relative flex w-full max-w-6xl px-6 md:flex-row flex-col"
      >
        <div className="relative md:mr-10 md:block flex justify-center mb-10 md:mb-0">
          <div className="absolute left-0.5 md:left-5  -translate-x-1/2 w-1 bg-gray-200 h-full rounded-full" />

          <motion.div
            className="
      absolute md:left-5 left-0.5 -translate-x-1/2 w-1 
      bg-gradient-to-b from-[#E44A0D] to-[#F2AE48] 
      rounded-full animate-flow
    "
            animate={{ height: fillHeight }}
            transition={{ type: "spring", stiffness: 100, damping: 20 }}
          />

          <motion.div
            animate={{ y: fillHeight - 20 }}
            transition={{ type: "spring", stiffness: 100, damping: 20 }}
            className="
      absolute md:left-5 left-0.5 -translate-x-1/2
      w-5 h-5 bg-[#E44A0D]
      rounded-full border-4 border-white shadow-lg
    "
          />
        </div>

        {/* RIGHT CONTENT */}
        <div className="space-y-8 -mt-10 md:mt-0 px-6 max-w-5xl text-[#333] text-lg leading-relaxed w-full">
          {[
            {
              title: "2010 – A homegrown Dubai story begins",
              text: `  Kulcha King was born in Dubai in 2010, created to bring the true
                taste of Amritsar’s kulchas to the UAE. Built around classic
                recipes, tandoor-fresh breads and generous hospitality, the
                brand quickly struck a chord with residents and visitors looking
                for authentic North Indian flavours.`,
            },
            {
              title: "2010–2016 – Growing with Dubai",
              text: `Over the next several years, Kulcha King expanded across Dubai
                and the wider UAE, opening outlets in key neighbourhoods and
                malls. By the mid-2010s, the brand had grown from a single
                restaurant into a multi-outlet chain with a strong following,
                known for its stuffed kulchas, chole, biryanis and
                value-for-money meals.`,
            },
            {
              title: "2017 – A new investment chapter",
              text: `In 2017, Kulcha King entered a new phase when it was acquired by
                Wakira Investments, a Dubai-based food investment company
                focused on scaling strong homegrown F&B concepts. The deal,
                valued at around AED 28 million (approximately US$9 million),
                marked a key milestone in the brand’s evolution and paved the
                way for further operational growth and refinement.`,
            },
            {
              title: "Today – Part of HJ Group",
              text: `Today, Kulcha King is proudly part of HJ Group, a diversified
                Dubai-headquartered business house with interests across real
                estate, hospitality, healthcare, travel, investments and more.`,
              list: [
                "Preserve the soul of classic Amritsari kulchas and North Indian favourites",
                "Elevate consistency, quality and hygiene across every outlet",
                "Invest in technology, delivery partnerships and guest experience",
                "Continue expanding thoughtfully across the UAE and beyond",
              ],
            },
          ].map((item, index) => (
            <div
              key={index}
              ref={(el) => {
                if (el) pointsRef.current[index] = el;
              }}
              className="journey-point transition-all"
            >
              <h4 className="font-semibold text-[#E44A0D]">{item.title}</h4>
              <p className="mt-1">{item.text}</p>

              {item.list && (
                <ul className="list-disc pl-6 mt-3 space-y-2">
                  {item.list.map((li, i) => (
                    <li key={i}>{li}</li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}