import { Link } from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';

import { useAppStateContext } from '../../context/user.data.context';
import { getLocalStorageValue, setLocalStorageValue } from '../../utils';

const OnBoardingPopupToolTip = () => {
  const { user } = useAppStateContext();

  const [selected, setSelected] = useState(0);
  const [showModal, setShowModal] = useState(true);

  useEffect(() => {
    const onBoarding = getLocalStorageValue('tooltip-onboarding');
    if (onBoarding && ['skip', 'done'].includes(onBoarding)) {
      setShowModal(false);
    }
  }, [selected]);

  if (!showModal || !user || user?.step === 3) return <></>;

  return (
    <div className="fixed right-4 top-8 w-72 rounded-xl text-black z-50 shadow-lg border">
      <div className="bg-[#f1f1f1] py-2 px-4 flex justify-between items-center space-x-2">
        <div className="flex space-x-[2px] items-center bg-white shadow rounded-xl p-1 px-2">
          {tabs?.map((_, key) => {
            return (
              <div
                key={key}
                className={
                  selected !== key
                    ? 'bg-[#f1f1f1] w-2 h-2 rounded-full'
                    : 'bg-[#c30878] w-8 h-3 rounded-full'
                }
              ></div>
            );
          })}
        </div>
        <button
          onClick={() => {
            setShowModal(false);
            setLocalStorageValue('tooltip-onboarding', 'skip');
          }}
          className="bg-white p-2 px-4 rounded-xl text-[#777777] text-xs font-semibold"
        >
          Skip
        </button>
      </div>
      <div className="bg-white p-4">
        <div className="text-center px-4 min-h-16 flex flex-col space-y-2 justify-center items-center">
          <p className="text-base font-bold text-black">
            {tabs[selected].title}
          </p>
          <div className="space-y-2">
            {tabs[selected].description.map((desc, key) => {
              return (
                <p key={key} className="text-xs font-semibold text-[#808080]">
                  {desc}
                </p>
              );
            })}
          </div>
        </div>

        <div className="flex justify-between space-x-2 pt-4 items-center w-full">
          <Link
            to={tabs[selected].path}
            className="text-[#777777] bg-[#f1f1f1] p-2 px-4 rounded-xl text-xs font-semibold cursor-pointer"
          >
            View
          </Link>
          <div className="flex space-x-2 items-center">
            <button
              onClick={() =>
                setSelected(select => {
                  return select - 1 >= 0 ? select - 1 : select;
                })
              }
              className={`${
                selected === 0 ? 'text-[#777777]' : 'text-black'
              } bg-[#f1f1f1] p-3 rounded-full text-xs font-semibold cursor-pointer`}
            >
              <FaChevronLeft />
            </button>
            <button
              onClick={() =>
                setSelected(select => {
                  return select + 1 < tabs.length ? select + 1 : select;
                })
              }
              className={`${
                selected === tabs.length - 1 ? 'text-[#777777]' : 'text-black'
              } bg-[#f1f1f1] p-3 rounded-full text-xs font-semibold cursor-pointer`}
            >
              <FaChevronRight />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default OnBoardingPopupToolTip;

interface ITab {
  title: string;
  path: string;
  description: string[];
}

const tabs: ITab[] = [
  {
    title: 'Dashboard',
    path: '/agent-analytics',
    description: [
      'Your command center. See how your AI recommendations are performing in real-time—from conversions to engagement.',
    ],
  },
  {
    title: 'AI ChatBot',
    path: '/customization',
    description: [
      'Make Recomaze feel like your brand. Adjust colors, language tone, and placement of the AI assistant here.',
      'From fonts to tone (“Helpful”, “Bold”, “Conversational”)—match your store vibe.',
    ],
  },
  //   {
  //     title: "Recomaze App Extension",
  //     path: "/app/extension",
  //     description: [
  //       "Enable the Recomaze Extension for product and category pages. No coding needed—just toggle it on.",
  //       "Keeps first-time visitors engaged and reduces drop-offs automatically.",
  //     ],
  //   },
  {
    title: 'Support',
    path: '/support',
    description: [
      'Need help? Watch a quick video, browse setup tips, or book a free 1-on-1 call with our team.',
      'Fast support, human answers, no long waits.',
    ],
  },
];