"use client";

import PageHeader from "@/components/ui/PageHeader";
import Image from "next/image";
import {
  Facebook,
  Twitter,
  Linkedin,
  Instagram,
  Send,
  Youtube,
} from "lucide-react";
import { getCourseSpeaker } from "@/lib/api/testSeriesApi";
import { useCallback, useEffect, useState } from "react";
import { decodeHtml } from "@/lib/commonFunctions";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";
import { getActiveCourseId } from "@/lib/courseSelection";

interface CourseSpeaker {
  id: string;
  course_id: string;
  speaker_name: string;
  speaker_role: string;
  followers: string;
  experience_years: string;
  description: string; // HTML string
  created_at: string;
  speaker_image: string;
  speaker_name_hindi: string;
  speaker_role_hindi: string;
  description_hindi: string;
}

export default function AboutCourse() {
  const icons = [
    {
      icon: Facebook,
      url: "https://www.facebook.com/givegita",
      label: "Facebook",
    },
    {
      icon: Instagram,
      url: "https://www.instagram.com/vrindavanchandra.das/?hl=en",
      label: "Instagram",
    },
    {
      icon: Send, // Telegram
      url: "https://t.me/givegita",
      label: "Telegram",
    },
    {
      icon: Twitter,
      url: "https://twitter.com/givegita",
      label: "Twitter",
    },
    {
      icon: Youtube,
      url: "https://www.youtube.com/givegita",
      label: "YouTube",
    },
  ];
  const [speaker, setSpeaker] = useState<CourseSpeaker | null>(null);
  const [loading, setLoading] = useState(true);
  const { language } = useLanguage();
  const tc = getTranslation(language).aboutCoursePage as any;

  const getCourseData = useCallback(async () => {
    try {
      const courseId = getActiveCourseId();
      const formData = new FormData();
      formData.append("course_id", courseId || "1");

      const res = await getCourseSpeaker(formData);

      if (res?.status) {
        setSpeaker(res.data);
      }
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    getCourseData();
  }, [getCourseData]);

  const InstructorSkeleton = () => {
    return (
      <div className="max-w-6xl mx-auto px-6 py-14 animate-pulse">
        <div className="flex flex-col md:flex-row gap-12">
          {/* LEFT */}
          <div className="w-full md:w-[400px] flex flex-col items-center">
            <div
              className="rounded-full bg-gray-200
            w-[220px] h-[220px]
            sm:w-[260px] sm:h-[260px]
            md:w-[350px] md:h-[350px]
            lg:w-[420px] lg:h-[380px]"
            />

            <div className="flex gap-5 mt-6">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="w-12 h-12 rounded-full bg-gray-200" />
              ))}
            </div>
          </div>

          {/* RIGHT */}
          <div className="flex-1 space-y-4">
            <div className="w-24 h-4 bg-gray-200 rounded" />
            <div className="w-72 h-8 bg-gray-200 rounded" />
            <div className="w-96 h-5 bg-gray-200 rounded" />

            <div className="mt-8 space-y-3">
              {[...Array(6)].map((_, i) => (
                <div key={i} className="w-full h-4 bg-gray-200 rounded" />
              ))}
            </div>

            <div className="mt-10 space-y-3">
              <div className="w-40 h-5 bg-gray-200 rounded" />
              <div className="w-72 h-4 bg-gray-200 rounded" />
              <div className="w-64 h-4 bg-gray-200 rounded" />
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div>
      <PageHeader title={tc.pageTitle} breadcrumb={tc.breadcrumb} />
      {loading ? (
        <InstructorSkeleton />
      ) : (
        <div className="max-w-6xl mx-auto px-6 py-14">
          <div className="flex flex-col md:flex-row gap-12">
            {/* LEFT SIDE */}
            <div className="w-full md:w-[400px] flex flex-col items-center">
              <Image
                src={speaker?.speaker_image ?? "/images/course.png"}
                alt={speaker?.speaker_name ?? "Instructor"}
                width={450}
                height={450}
                className="rounded-full shadow-lg object-cover
                w-[220px] h-[220px]
                sm:w-[260px] sm:h-[260px]
                md:w-[350px] md:h-[350px]
                lg:w-[420px] lg:h-[380px]
                xl:w-[480px] xl:h-[400px]"
              />

              <div className="flex justify-center gap-5 mt-6">
                {icons.map(({ icon: Icon, url, label }, i) => (
                  <a
                    key={i}
                    href={url}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={label}
                    className="w-12 h-12 rounded-full border border-gray-300
                     flex items-center justify-center
                     hover:bg-[#FAA631] hover:text-white transition"
                  >
                    <Icon className="w-6 h-6" />
                  </a>
                ))}
              </div>
            </div>

            {/* RIGHT SIDE */}
            <div className="flex-1">
              <p className="text-sm font-semibold text-[#FAA631] tracking-wide">
                {tc.instructor}
              </p>

              <h2 className="text-4xl font-bold text-gray-900 mt-2">
                {language === "hindi"
                  ? speaker?.speaker_name_hindi
                  : speaker?.speaker_name}
              </h2>

              <p className="text-gray-600 text-lg mt-1">
                {language === "hindi"
                  ? speaker?.speaker_role_hindi
                  : speaker?.speaker_role}
              </p>

              {/* About Me */}
              <h3 className="text-2xl font-bold text-gray-900 mt-10 mb-4">
                About Me
              </h3>

              {/* ✅ HTML RENDER HERE */}
              <div
                className="prose prose-lg max-w-none text-gray-700
                prose-p:leading-relaxed
                prose-ul:list-disc prose-ul:pl-6
                prose-li:mb-2"
                dangerouslySetInnerHTML={{
                  __html:
                    decodeHtml(
                      language === "hindi"
                        ? speaker?.description_hindi
                        : speaker?.description,
                    ) || "",
                }}
              />

              {/* Contact */}
              <h3 className="text-2xl font-bold text-gray-900 mt-10 mb-4">
                Contact Me
              </h3>

              <div className="space-y-4 text-gray-700 text-lg">
                <p>
                  <strong>{tc.address}</strong> {tc.addressValue}
                </p>
                <p>
                  <strong>{tc.email}</strong> {tc.emailValue}
                </p>
                <p>
                  <strong>{tc.phone}</strong> {tc.phoneValue}
                </p>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}