"use client";
import { useState, useEffect, useRef } from "react";
import { Calendar, Eye } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { getDetail } from "@/service/landing/landing";
import { BarWave } from "react-cssfx-loading";
import WaveSurfer from "wavesurfer.js";
import { getArticleDetail } from "@/service/content/content";

export default function AudioDetail({ id }: { id: number }) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [audioLoaded, setAudioLoaded] = useState(false);
  const [playing, setPlaying] = useState(false);
  const [volume, setVolume] = useState(0.5);
  const waveformRef = useRef<HTMLDivElement>(null);
  const wavesurfer = useRef<any>(null);
  const [selectedAudio, setSelectedAudio] = useState(0);

  // Ambil data audio dari API lama
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const res = await getArticleDetail(id);
      const detail = res?.data?.data;
      if (detail) setData(detail);
      setLoading(false);
    };
    fetchData();
  }, [id]);

  // Inisialisasi WaveSurfer
  useEffect(() => {
    if (!data?.files?.[selectedAudio]?.url) return;

    // Hancurkan instance sebelumnya jika ada
    if (wavesurfer.current) wavesurfer.current.destroy();

    const url = data.files[selectedAudio].url;

    const options = {
      container: waveformRef.current!,
      waveColor: "#E0E0E0",
      progressColor: "#FFC831",
      cursorColor: "#000",
      barWidth: 2,
      barRadius: 2,
      responsive: true,
      height: 80,
      normalize: true,
      partialRender: true,
    };

    const ws = WaveSurfer.create(options);
    wavesurfer.current = ws;
    ws.load(url);

    ws.on("ready", () => {
      setAudioLoaded(true);
      ws.setVolume(volume);
    });

    ws.on("finish", () => {
      setPlaying(false);
    });

    return () => {
      ws.destroy();
    };
  }, [data?.files, selectedAudio]);

  const handlePlayPause = () => {
    if (!wavesurfer.current) return;
    wavesurfer.current.playPause();
    setPlaying(!playing);
  };

  const handleVolumeChange = (e: any) => {
    const vol = parseFloat(e.target.value);
    setVolume(vol);
    wavesurfer.current?.setVolume(vol);
  };

  if (loading) return <p className="p-6">Memuat audio...</p>;
  if (!data) return <p className="p-6">Data tidak ditemukan</p>;

  return (
    <div className="max-w-5xl mx-auto px-4 py-6 space-y-6">
      {/* 🎵 Player */}
      <div className="relative flex flex-col items-start">
        <div className="flex items-center gap-4">
          <button
            onClick={handlePlayPause}
            className="w-12 h-12 bg-yellow-500 rounded-full flex justify-center items-center text-white text-xl hover:bg-yellow-600"
          >
            {playing ? "❚❚" : "▶"}
          </button>

          {/* Loading sebelum waveform siap */}
          {!audioLoaded && (
            <BarWave
              color="#ffc831"
              width="60px"
              height="25px"
              duration="2s"
              className="ml-5"
            />
          )}

          {/* Waveform */}
          <div ref={waveformRef} className="w-[300px] sm:w-[600px] ml-4"></div>
        </div>

        {/* Volume control */}
        {audioLoaded && (
          <div className="flex items-center gap-2 mt-2">
            <span>🔊</span>
            <input
              type="range"
              min="0"
              max="1"
              step="0.05"
              value={volume}
              onChange={handleVolumeChange}
            />
          </div>
        )}
      </div>

      {/* 🔸 Daftar File Audio */}
      <div className="py-4 flex flex-row gap-3 flex-wrap">
        {data?.files?.map((file: any, index: number) => (
          <button
            key={file?.id}
            onClick={() => setSelectedAudio(index)}
            className={`px-4 py-2 rounded-md border cursor-pointer hover:bg-gray-100 ${
              selectedAudio === index ? "border-yellow-600 bg-yellow-50" : ""
            }`}
          >
            🎧 {file?.fileName || `Audio ${index + 1}`}
          </button>
        ))}
      </div>

      {/* 🗓️ Informasi Artikel */}
      <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
        <span className="font-semibold text-black border-r-2 pr-2 border-black">
          by {data?.uploadedBy?.userLevel?.name || "MABES POLRI"}
        </span>
        <span className="flex items-center gap-1 text-black">
          <Calendar className="w-4 h-4" />
          {new Date(data.createdAt)
            .toLocaleString("id-ID", {
              day: "2-digit",
              month: "short",
              year: "numeric",
              hour: "2-digit",
              minute: "2-digit",
              hour12: false,
              timeZone: "Asia/Jakarta",
            })
            .replace(".", ":")}{" "}
          WIB
        </span>
        <span className="flex items-center gap-1 border-r-2 pr-2 border-black text-black">
          <Eye className="w-4 h-4" />
          {data.clickCount || 0}
        </span>
        <span className="text-black">Creator: {data.creatorName}</span>
      </div>

      {/* 📝 Deskripsi */}
      <div className="mt-4">
        <h1 className="text-xl font-bold">{data.title}</h1>
        <div
          className="text-base text-gray-700 leading-relaxed space-y-3 mt-2"
          dangerouslySetInnerHTML={{ __html: data.htmlDescription }}
        />
      </div>
    </div>
  );
}

// "use client";
// import Image from "next/image";
// import { Calendar, Clock, Eye } from "lucide-react";
// import { Button } from "@/components/ui/button";
// import Link from "next/link";
// import { useState, useEffect } from "react";
// import {
//   FaFacebookF,
//   FaTiktok,
//   FaYoutube,
//   FaWhatsapp,
//   FaInstagram,
//   FaTwitter,
//   FaCheck,
//   FaLink,
//   FaShareAlt,
// } from "react-icons/fa";
// import { getDetail, getArticleDetail } from "@/service/landing/landing";

// export default function AudioDetail({ id }: { id: string }) {
//   const [copied, setCopied] = useState(false);
//   const [showShareMenu, setShowShareMenu] = useState(false);
//   const [data, setData] = useState<any>(null);
//   const [loading, setLoading] = useState(true);
//   const [selectedDoc, setSelectedDoc] = useState(0);
//   const [isLoading, setIsLoading] = useState<any>(true);

//   useEffect(() => {
//     const timer = setTimeout(() => {
//       setIsLoading(false);
//     }, 3000);

//     return () => clearTimeout(timer);
//   }, []);

//   const handleCopyLink = async () => {
//     try {
//       await navigator.clipboard.writeText(window.location.href);
//       setCopied(true);
//       setTimeout(() => setCopied(false), 2000);
//     } catch (err) {
//       console.error("Failed to copy: ", err);
//     }
//   };

//   const SocialItem = ({
//     icon,
//     label,
//   }: {
//     icon: React.ReactNode;
//     label: string;
//   }) => (
//     <div className="flex items-center gap-3 cursor-pointer hover:opacity-80">
//       <div className="bg-[#C6A455] p-2 rounded-full text-white">{icon}</div>
//       <span className="text-sm">{label}</span>
//     </div>
//   );

//   useEffect(() => {
//     const fetchDetail = async () => {
//       try {
//         setLoading(true);

//         // Try new Articles API first
//         const response = await getArticleDetail(id);
//         console.log("Article Detail API response:", response);

//         if (response?.error) {
//           console.error("Articles API failed, falling back to old API");
//           // Fallback to old API
//           const fallbackResponse = await getDetail(id);
//           setData(fallbackResponse?.data?.data);
//           console.log(
//             "doc",
//             fallbackResponse?.data?.data.files[selectedDoc]?.secondaryUrl
//           );
//           return;
//         }

//         // Handle new API response structure
//         const articleData = response?.data?.data;
//         if (articleData) {
//           // Transform article data to match old structure for backward compatibility
//           const transformedData = {
//             id: articleData.id,
//             title: articleData.title,
//             description: articleData.description,
//             createdAt: articleData.createdAt,
//             clickCount: articleData.viewCount,
//             creatorGroupLevelName: articleData.createdByName || "Unknown",
//             uploadedBy: {
//               publisher: articleData.createdByName || "MABES POLRI"
//             },
//             files: articleData.files?.map((file: any) => ({
//               id: file.id,
//               url: file.file_url,
//               fileName: file.file_name,
//               filePath: file.file_path,
//               fileThumbnail: file.file_thumbnail,
//               fileAlt: file.file_alt,
//               widthPixel: file.width_pixel,
//               heightPixel: file.height_pixel,
//               size: file.size,
//               downloadCount: file.download_count,
//               createdAt: file.created_at,
//               updatedAt: file.updated_at,
//               secondaryUrl: file.file_url, // For audio files, use same URL
//               ...file
//             })) || [],
//             ...articleData
//           };

//           setData(transformedData);
//           console.log(
//             "doc",
//             transformedData.files[selectedDoc]?.secondaryUrl
//           );
//         }
//       } catch (error) {
//         console.error("Error fetching detail:", error);
//         // Try fallback to old API if new API fails
//         try {
//           const fallbackResponse = await getDetail(id);
//           setData(fallbackResponse?.data?.data);
//           console.log(
//             "doc",
//             fallbackResponse?.data?.data.files[selectedDoc]?.secondaryUrl
//           );
//         } catch (fallbackError) {
//           console.error("Fallback API also failed:", fallbackError);
//         }
//       } finally {
//         setLoading(false);
//       }
//     };
//     if (id) fetchDetail();
//   }, [id]);

//   if (loading) {
//     return (
//       <div className="max-w-6xl mx-auto px-4 py-6">
//         <p>Loading...</p>
//       </div>
//     );
//   }

//   if (!data) {
//     return (
//       <div className="max-w-6xl mx-auto px-4 py-6">
//         <p>Data tidak ditemukan</p>
//       </div>
//     );
//   }

//   return (
//     <div className="max-w-6xl mx-auto px-4 py-6 space-y-6">
//       <div className="relative">
//         <audio controls className="w-full" src={data?.files[selectedDoc]?.url}>
//           Your browser does not support the audio element.
//         </audio>
//       </div>

//       <div className="py-4 px-1 flex flex-row gap-3 flex-wrap">
//         {data?.files?.map((file: any, index: number) => (
//           <button
//             key={file?.id}
//             onClick={() => setSelectedDoc(index)}
//             className={`px-4 py-2 rounded-md border cursor-pointer hover:bg-gray-100 ${
//               selectedDoc === index ? "border-red-600 bg-gray-50" : ""
//             }`}
//           >
//             🎵 {file?.fileName || `Audio ${index + 1}`}
//           </button>
//         ))}
//       </div>

//       <div className="flex flex-col md:flex-row md:items-center md:justify-between text-sm text-muted-foreground">
//         <div className="flex flex-wrap items-center gap-2">
//           <span className="font-semibold text-black border-r-2 pr-2 border-black">
//             by {data?.uploadedBy?.publisher || "MABES POLRI"}
//           </span>
//           <span className="flex items-center gap-1 text-black">
//             <Calendar className="w-4 h-4" />
//             {new Date(data.createdAt)
//               .toLocaleString("id-ID", {
//                 day: "2-digit",
//                 month: "short",
//                 year: "numeric",
//                 hour: "2-digit",
//                 minute: "2-digit",
//                 hour12: false,
//                 timeZone: "Asia/Jakarta",
//               })
//               .replace(".", ":")}{" "}
//             WIB
//           </span>
//           {/* <span className="flex items-center gap-1 border-r-2 pr-2 border-black text-black">
//             <Clock className="w-4 h-4" />
//             {data.time || "-"}
//           </span> */}
//           <span className="flex items-center gap-1 border-r-2 pr-2 border-black text-black">
//             <Eye className="w-4 h-4" />
//             {data.clickCount || 0}
//           </span>
//           <span className="text-black">
//             {" "}
//             Creator: {data.creatorGroupLevelName}
//           </span>
//         </div>
//       </div>

//       <div className="flex flex-col md:flex-row gap-6 mt-6">
//         {/* Sidebar actions */}
//         <div className="hidden md:flex flex-col gap-4 relative z-10">
//           <div className="flex gap-2 items-center">
//             <Button
//               onClick={handleCopyLink}
//               size="lg"
//               className="justify-start bg-black text-white rounded-full"
//             >
//               {copied ? <FaCheck /> : <FaLink />}
//             </Button>
//             <span>COPY LINK</span>
//           </div>

//           <div className="flex gap-2 items-center relative">
//             <Button
//               onClick={() => setShowShareMenu(!showShareMenu)}
//               size="lg"
//               className="justify-start bg-[#C6A455] text-white rounded-full"
//             >
//               <FaShareAlt />
//             </Button>
//             <span>SHARE</span>

//             {showShareMenu && (
//               <div className="absolute left-16 top-0 bg-white p-4 rounded-lg shadow-lg flex flex-col gap-3 w-48">
//                 <SocialItem icon={<FaFacebookF />} label="Facebook" />
//                 <SocialItem icon={<FaTiktok />} label="TikTok" />
//                 <SocialItem icon={<FaYoutube />} label="YouTube" />
//                 <SocialItem icon={<FaWhatsapp />} label="WhatsApp" />
//                 <SocialItem icon={<FaInstagram />} label="Instagram" />
//                 <SocialItem icon={<FaTwitter />} label="Twitter" />
//               </div>
//             )}
//           </div>

//           <div className="flex gap-2 items-center">
//             <Link href={`/content/video/comment/${id}`}>
//               <Button
//                 variant="default"
//                 size="lg"
//                 className="justify-start bg-[#FFAD10] rounded-full mr-2 text-white"
//               >
//                 <svg
//                   xmlns="http://www.w3.org/2000/svg"
//                   width="15"
//                   height="15"
//                   viewBox="0 0 24 24"
//                 >
//                   <path
//                     fill="currentColor"
//                     d="M10 3h4a8 8 0 1 1 0 16v3.5c-5-2-12-5-12-11.5a8 8 0 0 1 8-8"
//                   />
//                 </svg>
//               </Button>
//               COMMENT
//             </Link>
//           </div>
//         </div>

//         {/* Content */}
//         <div className="flex-1 space-y-4">
//           <h1 className="text-xl font-bold">{data.title}</h1>
//           <div className="text-base text-gray-700 leading-relaxed space-y-3">
//             <p>{data.description}</p>
//           </div>

//           {/* Actions bawah */}
//           <div className="flex flex-wrap md:flex-row justify-center gap-4  my-20">
//             <div className="flex gap-2 items-center">
//               <Button
//                 onClick={handleCopyLink}
//                 size="lg"
//                 className="justify-start bg-black text-white rounded-full"
//               >
//                 {copied ? <FaCheck /> : <FaLink />}
//               </Button>
//               <span>COPY LINK</span>
//             </div>
//             <div className="flex gap-2 items-center">
//               <Button
//                 onClick={() => setShowShareMenu(!showShareMenu)}
//                 size="lg"
//                 className="justify-start bg-[#C6A455] text-white rounded-full"
//               >
//                 <FaShareAlt />
//               </Button>
//               <span>SHARE</span>
//             </div>
//             <div className="flex gap-2 items-center">
//               <Link href={`/content/video/comment/${id}`}>
//                 <Button
//                   variant="default"
//                   size="lg"
//                   className="justify-start bg-[#FFAD10] rounded-full mr-2 text-white"
//                 >
//                   <svg
//                     xmlns="http://www.w3.org/2000/svg"
//                     width="15"
//                     height="15"
//                     viewBox="0 0 24 24"
//                   >
//                     <path
//                       fill="currentColor"
//                       d="M10 3h4a8 8 0 1 1 0 16v3.5c-5-2-12-5-12-11.5a8 8 0 0 1 8-8"
//                     />
//                   </svg>
//                 </Button>
//                 COMMENT
//               </Link>
//             </div>
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// }