"use client";

import { useState, useRef, useEffect } from "react";
import { Quote, Target, Heart, CheckCircle, Loader2 } from "lucide-react";
import Image from "next/image";
import type { Chairman } from "@/types/chairman";
import type { VisionMission } from "@/types/visionMission";
import { publicProfileApi } from "@/lib/api/public";
import { buildImageUrl } from "@/lib/utils/image";

export default function LeadershipVision() {
  const [isVisible, setIsVisible] = useState(false);
  const [chairman, setChairman] = useState<Chairman | null>(null);
  const [visionMission, setVisionMission] = useState<VisionMission | null>(null);
  const [loading, setLoading] = 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(() => {
    Promise.allSettled([
      publicProfileApi.getChairman(),
      publicProfileApi.getVisionMission(),
    ]).then(([chairmanResult, visionResult]) => {
      if (chairmanResult.status === "fulfilled") {
        setChairman(chairmanResult.value.data);
      }
      if (visionResult.status === "fulfilled") {
        setVisionMission(visionResult.value.data);
      }
      setLoading(false);
    });
  }, []);

  const chairmanName = chairman?.organizationStructure?.name ?? "—";
  const chairmanPosition = chairman?.organizationStructure?.position ?? "Ketua Umum PTBMMKI";
  const chairmanPhotoUrl = buildImageUrl(chairman?.organizationStructure?.photo);
  const chairmanPeriod = chairman?.period ?? "—";
  const chairmanMessage = chairman?.welcome_message ?? "";

  const visi = visionMission?.vision ?? "";
  const misi: string[] = visionMission?.missions ?? [];

  return (
    <section
      ref={sectionRef}
      className="py-16 px-6 sm:px-6 md:px-20 lg:px-36"
      id="kepemimpinan"
    >
      <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-3xl md:text-4xl lg:text-5xl font-bold text-main mb-4">
            Kepemimpinan & <span className="text-brand">Visi Misi</span>
          </h2>
          <div className="w-24 h-1 bg-brand mx-auto mb-6"></div>
          <p className="text-lg md:text-xl text-sec max-w-3xl mx-auto">
            Mengenal pemimpin kami dan arah organisasi PTBMMKI
          </p>
        </div>

        {loading ? (
          <div className="flex items-center justify-center h-64 gap-2 text-gray-400">
            <Loader2 className="w-5 h-5 animate-spin" />
            <span>Memuat data...</span>
          </div>
        ) : (
          <div className="grid lg:grid-cols-5 gap-8 md:gap-12">
            <div
              className={`lg:col-span-2 transition-all duration-700 delay-150 ${isVisible ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-8"
                }`}
            >
              <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200 h-full">
                <div className="relative h-48 md:h-56 lg:h-64 bg-gradient-to-br from-brand/20 to-brand/10">
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="relative w-40 h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 rounded-full overflow-hidden border-4 border-white shadow-xl">
                      {chairmanPhotoUrl ? (
                        <Image
                          src={chairmanPhotoUrl}
                          alt={`Foto ${chairmanName}`}
                          fill
                          className="object-cover"
                          sizes="(max-width: 768px) 100vw, 40vw"
                          unoptimized
                        />
                      ) : (
                        <div className="w-full h-full bg-gradient-to-br from-brand to-brand/70 flex items-center justify-center">
                          <div className="text-white text-center p-4">
                            <div className="font-bold text-base md:text-lg">Ketua Umum</div>
                            <div className="text-xs md:text-sm">PTBMMKI</div>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>

                <div className="p-6 md:p-8">
                  <div className="text-center mb-4 md:mb-6">
                    <h3 className="text-xl md:text-2xl lg:text-3xl font-bold text-main mb-2">
                      {chairmanName}
                    </h3>
                    <div className="inline-block bg-brand text-white px-3 md:px-4 py-1 rounded-full text-xs md:text-sm font-semibold mb-2">
                      {chairmanPosition}
                    </div>
                    <div className="text-sm md:text-base text-sec font-medium">
                      Periode {chairmanPeriod}
                    </div>
                  </div>

                  {chairmanMessage && (
                    <div className="bg-gray-50 rounded-xl p-4 md:p-6 border border-gray-200 relative">
                      <div className="flex items-start gap-2 md:gap-3">
                        <Quote className="w-5 h-5 md:w-6 md:h-6 text-brand flex-shrink-0 mt-1" />
                        <div className="flex-1">
                          <h4 className="text-base md:text-lg font-semibold text-main mb-1 md:mb-2">
                            Sambutan Ketua
                          </h4>
                          <div className="relative">
                            <div className="overflow-y-auto max-h-48 md:max-h-38 pr-2">
                              <div className="text-sm md:text-base text-sec leading-relaxed italic">
                                {chairmanMessage.split("\n").map((line, i) => (
                                  <span key={i}>
                                    {line}
                                    {i < chairmanMessage.split("\n").length - 1 && <br />}
                                  </span>
                                ))}
                              </div>
                            </div>
                            <div className="absolute bottom-0 left-0 right-3 h-6 bg-gradient-to-t from-gray-50 to-transparent pointer-events-none" />
                          </div>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>

            <div
              className={`lg:col-span-3 space-y-6 md:space-y-8 transition-all duration-700 delay-300 ${isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-8"
                }`}
            >
              <div className="bg-white rounded-2xl shadow-xl p-5 md:p-6 lg:p-8 border border-gray-200">
                <div className="flex items-center gap-3 md:gap-4 mb-4 md:mb-6">
                  <div className="w-10 h-10 md:w-12 md:h-12 bg-brand rounded-lg md:rounded-xl flex items-center justify-center flex-shrink-0">
                    <Target className="w-5 h-5 md:w-6 md:h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="text-xl md:text-2xl lg:text-3xl font-bold text-main">Visi</h3>
                    <div className="text-sm md:text-md text-sec">Arah dan Tujuan Kami</div>
                  </div>
                </div>

                <div className="bg-gradient-to-r from-[#E67817]/7 to-transparent border-l-4 border-[#E67817] p-4 md:p-5 lg:p-6 rounded-r-lg">
                  <p className="text-base md:text-lg lg:text-xl text-sec font-medium leading-relaxed">
                    {visi || <span className="text-gray-400 italic">Belum ada data visi</span>}
                  </p>
                </div>
              </div>

              <div className="bg-white rounded-2xl shadow-xl p-5 md:p-6 lg:p-8 border border-gray-200">
                <div className="flex items-center gap-3 md:gap-4 mb-4 md:mb-6">
                  <div className="w-10 h-10 md:w-12 md:h-12 bg-brand rounded-lg md:rounded-xl flex items-center justify-center flex-shrink-0">
                    <Heart className="w-5 h-5 md:w-6 md:h-6 text-white" />
                  </div>
                  <div>
                    <h3 className="text-xl md:text-2xl lg:text-3xl font-bold text-main">Misi</h3>
                    <div className="text-sm md:text-md max-w-2xl text-sec">
                      Menjadikan PTBMMKI sebagai wadah koordinasi di antara organisasi Tim Bantuan
                      Medis Mahasiswa Kedokteran se-Indonesia, dalam hal:
                    </div>
                  </div>
                </div>

                {misi.length === 0 ? (
                  <p className="text-gray-400 italic text-sm">Belum ada data misi</p>
                ) : (
                  <div className="space-y-3 md:space-y-4">
                    {misi.map((item, index) => (
                      <div
                        key={index}
                        className={`flex items-start gap-2 md:gap-3 p-3 md:p-4 rounded-lg border border-gray-200 hover:border-brand/30 hover:bg-brand/5 transition-all duration-300 ${isVisible ? "opacity-100" : "opacity-0"
                          }`}
                        style={{ transitionDelay: `${500 + index * 100}ms` }}
                      >
                        <div className="w-5 h-5 md:w-6 md:h-6 bg-brand/10 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                          <CheckCircle className="w-3 h-3 md:w-4 md:h-4 text-brand" />
                        </div>
                        <p className="text-sm md:text-base text-gray-700">{item}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}