"use client";

import { ToggleSwitcher } from "@/components/ui";
import { useState } from "react";
import { Accordion, TablaPlanes } from "./components";
import { Plan, Servicios } from "./types";
import { AnimatePresence, motion } from "motion/react";

type PlanesContainerProps = {
  data: Plan[];
};

export const PlanesContainer = ({ data }: PlanesContainerProps) => {
  const [currentOption, setCurrentOption] = useState("Ver planes");
  const options = ["Ver planes", "Comparar planes"];

  // Esta función transforma la lista de objetos en strings para el Accordion
  const getListNames = (list: any[]): string[] => {
    if (!list) return [];
    return list.map((s) => s.name);
  };

  return (
    <div className="my-8 md:my-10 contigo-container">
      <div className="w-4/5 sm:w-2/5 mx-auto mb-8 md:mb-10">
        <ToggleSwitcher options={options} handleClick={setCurrentOption} selectedTab={currentOption} />
      </div>
      <AnimatePresence mode="wait">
        {currentOption === "Ver planes" ? (
          <motion.div
            key="ver"
            initial={{ opacity: 0, x: -12 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 12 }}
            transition={{ duration: 0.25 }}
            className="space-y-8"
          >
            {data.map((plan) => {
              const incluidos = plan.servicios_incluidos 
                ? getListNames(plan.servicios_incluidos)
                : getListNames((plan as any).servicios_cartilla?.filter((s: any) => s.status === "included"));

              const copagos = plan.servicios_copago
                ? getListNames(plan.servicios_copago)
                : getListNames((plan as any).servicios_cartilla?.filter((s: any) => s.status === "copay"));

              return (
                <Accordion
                  key={plan.id}
                  title={plan.titulo}
                  description={plan.descripcion}
                  price={plan.precio}
                  priceDiscount={plan.precio_descuento}
                  list1={incluidos}
                  list2={copagos}
                />
              );
            })}
          </motion.div>
        ) : (
          <motion.div
            key="comparar"
            initial={{ opacity: 0, x: 12 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -12 }}
            transition={{ duration: 0.25 }}
          >
            <TablaPlanes plans={data} />
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default PlanesContainer;