"use client";

import { Fragment, useState } from "react";
import {
  BookOpen,
  FileText,
  Target,
  Users,
  Star,
  CircleCheck,
  Clock,
  Video,
  Award,
  Trophy,
  ExternalLink,
} from "lucide-react";

import RollingCourseDate from "@/components/courses/RollingCourseDate";
import { courseTabsData } from "@/data/courses/certificates/advanced-fluency/courseTabsData";

const KRISH_IMAGE = "/uploads/images/krish.png";

const icons = {
  book: BookOpen,
  file: FileText,
  target: Target,
  users: Users,
  star: Star,
  video: Video,
  award: Award,
  clock: Clock,
  trophy: Trophy,
};

export default function CourseTabsSection({ data = courseTabsData }) {
  const [activeTab, setActiveTab] = useState(data.defaultTab);

  return (
    <section
      id={data.sectionId || "instructor"}
      className="py-20 border-t border-[#E6D3B1]/30"
    >
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-wrap gap-3 mb-8 justify-center">
          {data.tabs.map((tab) => {
            const Icon = icons[tab.icon];
            const active = activeTab === tab.id;

            return (
              <button
                key={tab.id}
                type="button"
                onClick={() => setActiveTab(tab.id)}
                className={`px-5 py-2.5 rounded-xl font-bold text-sm flex items-center gap-2 transition-all duration-300 border-2 ${
                  active
                    ? "bg-gradient-to-r from-[#4A141E] to-[#3B0F18] text-white border-[#D4AF37] shadow-lg"
                    : "bg-white text-[#4A141E] border-[#D4AF37]"
                }`}
              >
                <Icon className="w-4 h-4" />
                {tab.label}
              </button>
            );
          })}
        </div>

        {(data.renderAllTabsInSsr || activeTab === "overview") && (
          <div
            className={`p-10 rounded-3xl bg-white border-2 border-[#D4AF37] shadow-xl ${
              activeTab === "overview" ? "" : "hidden"
            }`}
          >
            <h3 className="text-2xl md:text-3xl font-black text-[#4A141E] mb-6">
              {data.overview.title}
            </h3>

            {data.overview.paragraphs.map((text) => (
              <p
                key={text}
                className="text-[#4A141E]/80 leading-relaxed mb-4"
              >
                {text}
              </p>
            ))}

            <h4 className="text-xl font-black text-[#4A141E] mb-4">
              {data.overview.learnTitle}
            </h4>

            <div className="grid md:grid-cols-2 gap-4 mb-6">
              {data.overview.learn.map((item) => (
                <div key={item} className="flex items-start gap-3">
                  <CircleCheck className="w-5 h-5 text-[#8B1C1C] flex-shrink-0 mt-1" />
                  <span className="text-[#4A141E]/80">{item}</span>
                </div>
              ))}
            </div>

            {data.overview.showAudience !== false ? (
              <>
                <h4 className="text-xl font-black text-[#4A141E] mb-4">
                  {data.overview.audienceTitle}
                </h4>

                <ul className="space-y-3 text-[#4A141E]/80">
                  {data.overview.audience.map((item) => (
                    <li key={item}>- {item}</li>
                  ))}
                </ul>
              </>
            ) : null}
          </div>
        )}

        {(data.renderAllTabsInSsr || activeTab === "course-content") && (
          <div
            className={`space-y-6 ${
              activeTab === "course-content" ? "" : "hidden"
            }`}
          >
            {data.modules.map((module) => (
              <div
                key={module.number}
                className="p-8 rounded-2xl bg-white border-2 border-[#E6D3B1]/40 hover:border-[#D4AF37] transition-all duration-300 shadow-lg"
              >
                <div className="flex items-start justify-between mb-4 gap-4">
                  <div>
                    <h4 className="text-xl font-black text-[#4A141E] mb-2">
                      Module {module.number}: Unit {module.number} -{" "}
                      {module.title}
                    </h4>
                    <div className="flex items-center gap-4 text-sm text-[#4A141E]/60">
                      <span className="flex items-center gap-1">
                        <Clock className="w-4 h-4" />
                        Unit {module.number}
                      </span>
                      <span className="flex items-center gap-1">
                        <BookOpen className="w-4 h-4" />
                        {module.topics.length} topics
                      </span>
                    </div>
                  </div>

                  <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] flex items-center justify-center border-2 border-[#D4AF37]/50 flex-shrink-0">
                    <span className="text-xl font-black text-[#D4AF37]">
                      {module.number}
                    </span>
                  </div>
                </div>

                <div className="flex flex-wrap gap-2">
                  {module.topics.map((topic) => (
                    <span
                      key={topic}
                      className="px-3 py-1 rounded-full bg-[#F6EFE9] border border-[#E6D3B1]/40 text-sm text-[#4A141E]/80"
                    >
                      {topic}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}

        {(data.renderAllTabsInSsr || activeTab === "details") && (
          <div
            className={`grid md:grid-cols-2 gap-8 ${
              activeTab === "details" ? "" : "hidden"
            }`}
          >
            <div className="p-8 rounded-3xl bg-white border-2 border-[#D4AF37] shadow-xl">
              <h3 className="text-xl font-black text-[#4A141E] mb-6">
                Programme Details
              </h3>

              {data.details.programme.map(([label, value]) => (
                <div
                  key={label}
                  className="flex justify-between items-center py-3 border-b border-[#E6D3B1]/30 last:border-0"
                >
                  <span className="font-semibold text-[#4A141E]/70">
                    {label}
                  </span>
                  <span className="font-bold text-[#4A141E] text-right">
                    <RollingCourseDate>{value}</RollingCourseDate>
                  </span>
                </div>
              ))}
            </div>

            <div className="p-8 rounded-3xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] border-2 border-[#D4AF37] text-white shadow-xl">
              <h3 className="text-xl font-black mb-6">Course Features</h3>

              <div className="grid gap-4">
                {data.details.features.map(([icon, title, desc]) => {
                  const Icon = icons[icon];

                  return (
                    <div key={title} className="flex items-start gap-3">
                      <div className="w-10 h-10 rounded-lg bg-[#D4AF37]/20 flex items-center justify-center flex-shrink-0">
                        <Icon className="w-5 h-5 text-[#D4AF37]" />
                      </div>
                      <div>
                        <h4 className="font-bold text-[#E6D3B1] mb-1">
                          {title}
                        </h4>
                        <p className="text-sm text-[#F6EFE9]/80">{desc}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        {(data.renderAllTabsInSsr || activeTab === "instructor") && (
          <div
            data-static-border="true"
            data-instructor-card="true"
            className={`p-10 rounded-3xl bg-white border-2 border-[#D4AF37] shadow-xl ${
              activeTab === "instructor" ? "" : "hidden"
            }`}
          >
            <div className="flex flex-col md:flex-row gap-8 items-start">
              <div className="flex-shrink-0">
                <img
                  src={data.instructor.image?.trim() || KRISH_IMAGE}
                  alt={data.instructor.imageAlt || data.instructor.name}
                  className="w-48 h-48 rounded-2xl border-4 border-[#D4AF37] shadow-xl object-cover"
                />

                <div className="mt-4 space-y-4">
                  <div className="flex items-center gap-2">
                    <div className="flex gap-1">
                      {Array.from({ length: data.instructor.rating }).map(
                        (_, index) => (
                          <Star
                            key={index}
                            className="w-4 h-4 fill-[#D4AF37] text-[#D4AF37]"
                          />
                        )
                      )}
                    </div>
                    <span className="text-sm font-bold text-[#4A141E]">
                      {data.instructor.ratingText}
                    </span>
                  </div>

                  <p className="text-sm text-[#4A141E]/70">
                    {data.instructor.students}
                  </p>

                  <a
                    href={data.instructor.linkedin}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-4 py-3 rounded-xl bg-[#0A66C2] text-white font-bold text-sm shadow-lg hover:bg-[#084f98] transition-all duration-300"
                  >
                    <ExternalLink className="w-4 h-4" aria-hidden="true" />
                    <span>View LinkedIn</span>
                  </a>
                </div>
              </div>

              <div className="flex-1">
                <div className="flex flex-wrap items-center gap-3 mb-2">
                  <h3 className="text-2xl md:text-3xl font-black text-[#4A141E]">
                    {data.instructor.name}
                  </h3>
                  <a
                    href={data.instructor.linkedin}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-[#0A66C2] text-white shadow-md hover:bg-[#084f98] transition-colors"
                    aria-label="View LinkedIn profile"
                  >
                    <ExternalLink className="w-5 h-5" aria-hidden="true" />
                  </a>
                </div>

                <p className="text-base md:text-lg text-[#8B1C1C] font-bold mb-6">
                  {data.instructor.title}
                </p>

                <div className="prose prose-lg max-w-none text-[#4A141E]/80 leading-relaxed space-y-4">
                  {data.instructor.paragraphs.map((paragraph) => (
                    <p key={paragraph}>{paragraph}</p>
                  ))}

                  <div className="mt-6 pt-6 border-t-2 border-[#E6D3B1]/30">
                    <h4 className="font-black text-[#4A141E] mb-3">
                      {data.instructor.credentialTitle}
                    </h4>

                    <div className="grid md:grid-cols-2 gap-3">
                      {data.instructor.credentials.map((credential) => (
                        <div
                          key={credential}
                          className="flex items-center gap-2"
                        >
                          <Award className="w-4 h-4 text-[#D4AF37]" />
                          <span className="text-sm">{credential}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {(data.renderAllTabsInSsr || activeTab === "reviews") && (
          <div
            className={`space-y-6 ${
              activeTab === "reviews" ? "" : "hidden"
            }`}
          >
            <div className="p-10 rounded-3xl bg-white border-2 border-[#D4AF37] shadow-xl text-center">
              <div className="text-4xl font-black text-[#4A141E] mb-2">
                {data.reviews.rating}
              </div>

              <div className="flex justify-center gap-1 mb-2">
                {Array.from({ length: 5 }).map((_, index) => (
                  <Star
                    key={index}
                    className="w-8 h-8 fill-[#D4AF37] text-[#D4AF37]"
                  />
                ))}
              </div>

              <p className="text-[#4A141E]/70 mb-6">{data.reviews.text}</p>

              <div className="grid grid-cols-5 gap-2 max-w-md mx-auto">
                {data.reviews.distribution.map(([label, percent]) => (
                  <Fragment key={label}>
                    <div className="text-sm font-semibold text-[#4A141E]">
                      {label}
                    </div>
                    <div className="col-span-3 bg-[#E6D3B1]/30 rounded-full h-4 overflow-hidden flex items-center">
                      <div
                        className="h-full bg-gradient-to-r from-[#8B1C1C] to-[#D4AF37]"
                        style={{ width: percent }}
                      />
                    </div>
                    <div className="text-sm font-semibold text-[#4A141E]">
                      {percent}
                    </div>
                  </Fragment>
                ))}
              </div>
            </div>

            {data.reviews.items.map((review) => (
              <div
                key={review.name}
                className="p-6 rounded-2xl bg-white border-2 border-[#D4AF37]"
              >
                <div className="flex items-start gap-4">
                  {typeof review.image === "string" && review.image.trim() ? (
                    <img
                      src={review.image.trim()}
                      alt={review.alt || review.name}
                      className="w-12 h-12 rounded-full border-2 border-[#D4AF37] object-cover"
                    />
                  ) : (
                    <span
                      aria-hidden="true"
                      className="w-12 h-12 shrink-0 rounded-full border-2 border-[#D4AF37] bg-[#F6EFE9]"
                    />
                  )}
                  <div>
                    <h4 className="font-bold text-[#4A141E] mb-2">
                      {review.name}
                    </h4>
                    <p className="text-[#4A141E]/80 leading-relaxed">
                      {review.text}
                    </p>
                  </div>
                </div>
              </div>
            ))}

            <div className="text-center">
              <a
                href={data.reviews.verifiedHref}
                className="font-bold text-[#8B1C1C] hover:text-[#D4AF37] inline-flex items-center gap-2"
              >
                <span>{data.reviews.verifiedText}</span>
                <ExternalLink className="w-4 h-4" />
              </a>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}