"use client";
import { NoResultsMessage, ToggleSwitcher } from "@/components/ui";
import { fadeInOut } from "@/lib/variants";
import { emptyFilters } from "@/store/cartilla-store";
import { AnimatePresence, motion } from "motion/react";
import { useEffect, useState, ReactNode } from "react";
import { TypeCartillaResults } from "./types";
import { CartillaResultsContent, CartillaResultsSkeleton } from ".";

const options = ["Ver lista", "Ver mapa"];

type CartillaResultsProps = {
  filtros: typeof emptyFilters;
  results: TypeCartillaResults;
  error: Error | null;
  loadingResults: boolean;
};

const CartillaResults = ({ filtros, results, error, loadingResults }: CartillaResultsProps) => {
  const [selectedTab, setSelectedTab] = useState(options[0]);
  const hasData = (results?.data?.length || !error) && !loadingResults;

  useEffect(() => {
    if (loadingResults) setSelectedTab(options[0]);
  }, [loadingResults]);

  const renderState = (): ReactNode => {
    if (error) return <NoResultsMessage message={error.message} />;
    if (loadingResults) return <CartillaResultsSkeleton />;
    return <CartillaResultsContent results={results} selectedTab={selectedTab} />;
  };

  return (
    <motion.section className="pt-7 md:pt-14" {...fadeInOut()}>
      <div className="contigo-container overflow-hidden">
        <h2 className="text-[1.4375rem] lg:text-[2.125rem] font-medium">Resultados de búsqueda</h2>

        <div className="flex flex-col md:flex-row justify-between md:items-center gap-3">
          <p className="text-[0.8125rem] md:text-[min(2vw,1.25rem)] font-medium mt-2">
            En {filtros.localidad} | {filtros.plan} | {filtros.especialidad}
          </p>

          {hasData && (
            <ToggleSwitcher
              options={options}
              className="h-[1.875rem] md:h-[2.5rem] max-w-[12.5625rem] md:max-w-[16.75rem]"
              selectedTab={selectedTab}
              handleClick={setSelectedTab}
            />
          )}
        </div>

        <AnimatePresence>{renderState()}</AnimatePresence>
      </div>
    </motion.section>
  );
};

export default CartillaResults;