"use client";
import React, { useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { useTranslation } from "react-i18next";
import "./cmistyle.css";
import icon from "@/assets/used-images/tab-icon.png";

const Plan = () => {
  const { t } = useTranslation(); // Get the translation function
  const [activeKey, setActiveKey] = useState("first");
  const [openCard, setOpenCard] = useState<number | null>(null);

  const toggleCard = (cardIndex: number) => {
    setOpenCard(openCard === cardIndex ? null : cardIndex);
  };

  // Content for first tab (Dynamic translation keys)
  const firstTabContent = [
    {
      icon: icon,
      titleKey: "cmi.strategic-thinking",
      description: (
        <ul>
          <li>{t("cmi.strategic-thinking-desc-1")}</li>
          <li>{t("cmi.strategic-thinking-desc-2")}</li>
          <li>{t("cmi.strategic-thinking-desc-3")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.customer-experience",
      description: (
        <ul>
          <li>{t("cmi.customer-experience-desc-1")}</li>
          <li>{t("cmi.customer-experience-desc-2")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.change-management",
      description: (
        <ul>
          <li>{t("cmi.change-management-desc-1")}</li>
          <li>{t("cmi.change-management-desc-2")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.innovation-problem-solving",
      description: (
        <ul>
          <li>{t("cmi.innovation-problem-solving-desc-1")}</li>
          <li>{t("cmi.innovation-problem-solving-desc-2")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.financial-acumen",
      description: (
        <ul>
          <li>{t("cmi.financial-acumen-desc-1")}</li>
          <li>{t("cmi.financial-acumen-desc-2")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.stakeholder-management",
      description: (
        <ul>
          <li>{t("cmi.stakeholder-management-desc-1")}</li>
          <li>{t("cmi.stakeholder-management-desc-2")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.leadership-coaching",
      description: (
        <ul>
          <li>{t("cmi.leadership-coaching-desc-1")}</li>
          <li>{t("cmi.leadership-coaching-desc-2")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.reflective-practice",
      description: (
        <ul>
          <li>{t("cmi.reflective-practice-desc-1")}</li>
          <li>{t("cmi.reflective-practice-desc-2")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.project-management",
      description: (
        <ul>
          <li>{t("cmi.project-management-desc-1")}</li>
          <li>{t("cmi.project-management-desc-2")}</li>
          <li>{t("cmi.project-management-desc-3")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.edi",
      description: (
        <ul>
          <li>{t("cmi.edi-desc-1")}</li>
          <li>{t("cmi.edi-desc-2")}</li>
        </ul>
      ),
    },
  ];

  // Content for second tab (Dynamic translation keys)
  const secondTabContent = [
    {
      icon: icon,
      titleKey: "cmi.strategic-analytical",
      description: (
        <ul>
          <li>{t("cmi.strategic-analytical-desc-1")}</li>
          <li>{t("cmi.strategic-analytical-desc-2")}</li>
          <li>{t("cmi.strategic-analytical-desc-3")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.leadership-management",
      description: (
        <ul>
          <li>{t("cmi.leadership-management-desc-1")}</li>
          <li>{t("cmi.leadership-management-desc-2")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.personal-skills",
      description: (
        <ul>
          <li>{t("cmi.personal-skills-desc-1")}</li>
          <li>{t("cmi.personal-skills-desc-2")}</li>
        </ul>
      ),
    },
    {
      icon: icon,
      titleKey: "cmi.personal-development",
      description: (
        <ul>
          <li>{t("cmi.personal-development-desc-1")}</li>
          <li>{t("cmi.personal-development-desc-2")}</li>
        </ul>
      ),
    },
  ];

  return (
    <section className="plan-section">
      <div className="layout">
        <div className="flex justify-center">
          <h2 className="services-header after:w-20 after:-bottom-2 text-center flex justify-center !mb-4">
            {t("cmi.header")}
          </h2>
        </div>

        {/* Tabs */}
        <div className="tabs-container">
          <button
            onClick={() => setActiveKey("first")}
            className={`tab-button ${activeKey === "first" ? "active" : ""}`}
          >
            {t("cmi.detailed-competencies")}
          </button>
          <button
            onClick={() => setActiveKey("second")}
            className={`tab-button ${activeKey === "second" ? "active" : ""}`}
          >
            {t("cmi.strategic-competencies")}
          </button>
        </div>

        {/* Tab content */}
        {activeKey === "first" && (
          <div className="cards-container">
            {firstTabContent.map((card, index) => (
              <div key={index} className="mb-3 Planning-card">
                <div className="card-header" onClick={() => toggleCard(index)}>
                  <div className="card-title">
                    <p>
                      <img src={card.icon} alt="" /> {t(card.titleKey)}
                    </p>
                    {openCard === index ? (
                      <ChevronUp className="w-5 h-5 text-[#6d2c3e]" />
                    ) : (
                      <ChevronDown className="w-5 h-5 text-[#6d2c3e]" />
                    )}
                  </div>
                </div>
                {openCard === index && <div className="card-description">{card.description}</div>}
              </div>
            ))}
          </div>
        )}

        {activeKey === "second" && (
          <div className="cards-container">
            {secondTabContent.map((card, index) => (
              <div key={index} className="mb-3 Planning-card">
                <div className="card-header" onClick={() => toggleCard(index)}>
                  <div className="card-title">
                    <p>
                      <img src={card.icon} alt="" /> {t(card.titleKey)}
                    </p>
                    {openCard === index ? (
                      <ChevronUp className="w-5 h-5 text-[#6d2c3e]" />
                    ) : (
                      <ChevronDown className="w-5 h-5 text-[#6d2c3e]" />
                    )}
                  </div>
                </div>
                {openCard === index && <div className="card-description">{card.description}</div>}
              </div>
            ))}
          </div>
        )}
      </div>
    </section>
  );
};

export default Plan;