"use client";

import { useState, useRef, useEffect } from "react";
import { Calendar, MapPin, Users, Trophy, Loader2 } from "lucide-react";
import LogoComponent from "./AboutLogo";
import SejarahComponent from "./AboutHistory";
import PetaSebaranComponent from "./AboutMap";
import { aboutApi } from "@/lib/api/public/about";
import { publicRegionApi } from "@/lib/api/public/region";
import { publicProfileApi } from "@/lib/api/public/profile";

type MenuType = "logo" | "sejarah" | "peta";

const menuItems = [
  { id: "logo" as MenuType, label: "Logo" },
  { id: "sejarah" as MenuType, label: "Sejarah" },
  { id: "peta" as MenuType, label: "Peta Sebaran" },
];

interface StatsData {
  totalTbm: number | null;
  totalWilayah: number | null;
  totalTahun: number | null;
  periode: string | null;
}

export default function AboutUs() {
  const [isVisible, setIsVisible] = useState(false);
  const [activeMenu, setActiveMenu] = useState<MenuType>("logo");
  const [contentAnimating, setContentAnimating] = useState(false);
  const [contentDirection, setContentDirection] = useState<"right" | "left">("right");
  const [statsData, setStatsData] = useState<StatsData>({
    totalTbm: null,
    totalWilayah: null,
    totalTahun: null,
    periode: null,
  });
  const [statsLoading, setStatsLoading] = useState(true);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setIsVisible(true); },
      { threshold: 0.1 }
    );
    if (sectionRef.current) observer.observe(sectionRef.current);
    return () => { if (sectionRef.current) observer.unobserve(sectionRef.current); };
  }, []);

  useEffect(() => {
    const nowYear = new Date().getFullYear();

    Promise.allSettled([
      aboutApi.getHistories(),
      publicRegionApi.getAll(),
      publicProfileApi.getChairman(),
    ]).then(([historiesResult, regionsResult, chairmanResult]) => {
      let totalTahun: number | null = null;
      if (historiesResult.status === "fulfilled") {
        const histories = historiesResult.value.data ?? [];
        const years = histories
          .map((h: any) => Number(h.year))
          .filter((y: number) => !isNaN(y) && y > 0);
        if (years.length > 0) {
          totalTahun = nowYear - Math.min(...years);
        }
      }

      let totalWilayah: number | null = null;
      let totalTbm: number | null = null;
      if (regionsResult.status === "fulfilled") {
        const regions = regionsResult.value.data ?? [];
        totalWilayah = regions.length;
        totalTbm = regions.reduce(
          (sum: number, r: any) => sum + (Number(r.total_tbms) || 0),
          0
        );
      }

      let periode: string | null = null;
      if (chairmanResult.status === "fulfilled") {
        periode = chairmanResult.value.data?.period ?? null;
      }

      setStatsData({ totalTbm, totalWilayah, totalTahun, periode });
      setStatsLoading(false);
    });
  }, []);

  const nowYear = new Date().getFullYear();

  const stats = [
    {
      icon: <Users className="w-7 h-7" />,
      value: statsLoading ? null : (statsData.totalTbm?.toString() ?? "—"),
      label: "Unit TBM",
      description: "Tersebar di seluruh Indonesia",
    },
    {
      icon: <MapPin className="w-7 h-7" />,
      value: statsLoading ? null : (statsData.totalWilayah?.toString() ?? "—"),
      label: "Wilayah",
      description: "Administratif",
    },
    {
      icon: <Calendar className="w-7 h-7" />,
      value: statsLoading ? null : (statsData.totalTahun?.toString() ?? (nowYear - 1992).toString()),
      label: "Tahun",
      description: "1992 - Sekarang",
    },
    {
      icon: <Trophy className="w-7 h-7" />,
      value: statsLoading ? null : (statsData.periode ?? "—"),
      label: "Periode",
      description: "Kepengurusan",
    },
  ];

  const handleMenuClick = (menuId: MenuType) => {
    const currentIndex = menuItems.findIndex((item) => item.id === activeMenu);
    const newIndex = menuItems.findIndex((item) => item.id === menuId);
    setContentDirection(newIndex > currentIndex ? "right" : "left");
    setContentAnimating(true);
    setTimeout(() => {
      setActiveMenu(menuId);
      setContentAnimating(false);
    }, 300);
  };

  const renderActiveComponent = () => {
    switch (activeMenu) {
      case "logo": return <LogoComponent />;
      case "sejarah": return <SejarahComponent />;
      case "peta": return <PetaSebaranComponent />;
      default: return <LogoComponent />;
    }
  };

  return (
    <section
      ref={sectionRef}
      className="py-16 md:py-24 px-6 sm:px-6 md:px-20 lg:px-36 bg-white"
      id="tentang-kami"
    >
      <div className="w-full mx-auto">
        <div
          className={`text-center mb-12 md:mb-16 transition-all duration-700 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
            }`}
        >
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-main mb-6">
            Tentang <span className="text-brand">Kami</span>
          </h2>
          <div className="w-32 h-1.5 bg-brand mx-auto mb-8"></div>
          <p className="text-lg md:text-xl text-sec max-w-3xl mx-auto">
            Mengenal lebih dalam tentang Perhimpunan Tim Bantuan Medis Mahasiswa Kedokteran Indonesia
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-8 md:gap-12 items-stretch">
          <div
            className={`transition-all duration-700 delay-150 ${isVisible ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-8"
              }`}
          >
            <div className="bg-white border border-gray-200 rounded-2xl shadow-xl h-full pb-6 flex flex-col overflow-hidden">
              <div className="p-6 pt-6">
                <div className="flex rounded-lg border border-gray-100 p-1">
                  {menuItems.map((item) => (
                    <button
                      key={item.id}
                      onClick={() => handleMenuClick(item.id)}
                      className={`cursor-pointer flex-1 px-4 py-3 text-sm font-medium rounded-md transition-all duration-300 ${activeMenu === item.id
                          ? "bg-brand text-white shadow-md scale-105 animate-pulse-once"
                          : "text-brand hover:bg-gray-50 hover:scale-[1.02]"
                        }`}
                    >
                      {item.label}
                    </button>
                  ))}
                </div>
              </div>

              <div className="p-6 pt-4 flex-grow overflow-y-auto h-[calc(100vh-500px)] relative">
                <div
                  className={`transition-all duration-300 transform ${contentAnimating
                      ? contentDirection === "right"
                        ? "opacity-0 translate-x-8"
                        : "opacity-0 -translate-x-8"
                      : "opacity-100 translate-x-0"
                    }`}
                >
                  {renderActiveComponent()}
                </div>

                {contentAnimating && (
                  <div className="absolute inset-0 flex items-center justify-center bg-white/50 backdrop-blur-sm animate-fade-in">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand"></div>
                  </div>
                )}
              </div>
            </div>
          </div>

          <div
            className={`transition-all duration-700 delay-300 ${isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-8"
              }`}
          >
            <div className="space-y-8 h-full flex flex-col">
              <div className="flex-grow">
                <h3 className="text-2xl md:text-3xl font-bold text-main mb-4 animate-fade-in">
                  PTBMMKI
                </h3>

                <div className="space-y-4">
                  <p className="text-base md:text-lg text-sec leading-relaxed animate-fade-in [animation-delay:100ms]">
                    <span className="font-bold text-brand">
                      Perhimpunan Tim Bantuan Medis Mahasiswa Kedokteran Indonesia (PTBMMKI)
                    </span>{" "}
                    merupakan organisasi kemahasiswaan nasional yang bergerak di bidang
                    kegawatdaruratan medis dan kemanusiaan.
                  </p>

                  <p className="text-base md:text-lg text-sec leading-relaxed animate-fade-in [animation-delay:200ms]">
                    PTBMMKI telah berdiri sejak{" "}
                    <span className="font-bold">19 September 1992 di Semarang, Jawa Tengah</span>.
                    Sebagai organisasi berskala nasional, kami menghimpun seluruh potensi Tim Bantuan
                    Medis dari organisasi-organisasi kegawatdaruratan medis intra fakultas yang ada di
                    seluruh Indonesia.
                  </p>

                  <p className="text-base md:text-lg text-sec leading-relaxed animate-fade-in [animation-delay:300ms]">
                    Saat ini PTBMMKI memiliki{" "}
                    <span className="font-bold">
                      {statsLoading ? "..." : `${statsData.totalTbm ?? 83} TBM Unit`}
                    </span>{" "}
                    yang tersebar di seluruh Indonesia dan terbagi dalam{" "}
                    <span className="font-bold">
                      {statsLoading ? "..." : `${statsData.totalWilayah ?? 5} Wilayah`}
                    </span>{" "}
                    administratif yang dikomandoi oleh seorang Koordinator Wilayah dengan Badan
                    Pengurus Wilayah masing-masing.
                  </p>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3 md:gap-4">
                {stats.map((stat, index) => (
                  <div
                    key={index}
                    className={`bg-white border border-gray-200 rounded-xl p-3 md:p-4 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300 animate-fade-in-up ${isVisible ? "opacity-100" : "opacity-0"
                      }`}
                    style={{
                      transitionDelay: `${400 + index * 100}ms`,
                      animationDelay: `${500 + index * 100}ms`,
                    }}
                  >
                    <div className="flex items-center gap-3 h-full">
                      <div className="w-10 h-10 md:w-12 md:h-12 bg-brand rounded-lg flex items-center justify-center flex-shrink-0 animate-pulse">
                        <div className="text-white text-sm">{stat.icon}</div>
                      </div>

                      <div className="flex-1 min-w-0">
                        <div className="flex flex-col">
                          <div className="text-lg md:text-2xl font-bold text-main animate-bounce-in">
                            {stat.value === null ? (
                              <Loader2 className="w-5 h-5 animate-spin text-brand" />
                            ) : (
                              stat.value
                            )}
                          </div>
                          <div className="text-xs md:text-sm font-bold text-brand">{stat.label}</div>
                          <div className="text-xs text-sec mt-0.5 line-clamp-2">{stat.description}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}