"use client";

import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, ChevronRight } from "lucide-react";

interface TableRow {
  label: string;
  value: string;
  isNone?: boolean;
}

interface PaketDetailMainProps {
  packageName: string;
  title: string;
  description: string;
  tableRows: TableRow[];
  price: string;
  kelebihan: string;
  iconGradient: string;
  tableGradient: string;
  activeTab: "solar" | "pertalite" | "pertamax" | "turbo";
  galleryImages?: string[];
}

const TABS = [
  { id: "solar", label: "Solar", href: "/sunat-racing/paket/solar" },
  {
    id: "pertalite",
    label: "Pertalite",
    href: "/sunat-racing/paket/pertalite",
  },
  { id: "pertamax", label: "Pertamax", href: "/sunat-racing/paket/pertamax" },
  { id: "turbo", label: "Turbo", href: "/sunat-racing/paket/turbo" },
];

const PaketDetailMain = ({
  packageName,
  title,
  description,
  tableRows,
  price,
  kelebihan,
  iconGradient,
  tableGradient,
  activeTab,
  galleryImages,
}: PaketDetailMainProps) => {
  // Use gallery images from CMS or fallback to default images
  const images = galleryImages && galleryImages.length > 0
    ? galleryImages
    : ["/assets/sunat-racing/paket-1.jpg", "/assets/sunat-racing/paket-2.jpg", "/assets/sunat-racing/paket-3.jpg"];

  return (
    <main className="min-h-screen bg-gradient-to-b from-[#1b63ff] to-[#001e5f] pt-[120px] pb-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Back Button */}
        <Link
          href="/sunat-racing"
          className="inline-flex items-center gap-2.5 text-white mb-8 group"
        >
          <div className="w-12 h-12 flex items-center justify-center rounded-full bg-white/10 group-hover:bg-white/20 transition-colors">
            <ArrowLeft className="w-6 h-6" />
          </div>
          <span className="text-[22px] font-medium tracking-[-1.1px]">
            Kembali
          </span>
        </Link>

        {/* Title */}
        <h1 className="text-[41px] font-medium text-white tracking-[-2.05px] mb-8 max-w-[457px] leading-tight">
          Layanan Paket sunat Racing Adera
        </h1>

        {/* Tab Navigation */}
        <div className="flex flex-wrap gap-3 mb-8">
          {TABS.map((tab) => (
            <Link
              key={tab.id}
              href={tab.href}
              className={`px-4 py-2 rounded-[15px] text-[20px] tracking-[-1px] font-semibold transition-all ${
                activeTab === tab.id
                  ? "bg-white text-[#003dd8]"
                  : "border-2 border-white text-white hover:bg-white/10"
              }`}
            >
              {tab.label}
            </Link>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Left Column - Kelebihan Paket */}
          <div className="bg-white rounded-[26px] p-6 lg:p-8">
            <h2 className="text-[35px] font-medium text-black tracking-[-1.05px] mb-4">
              Kelebihan paket
            </h2>
            <p className="text-[20px] text-[rgba(56,54,54,0.8)] tracking-[-1px] mb-6 leading-relaxed">
              {kelebihan}
            </p>

            {/* Pesan Layanan Button */}
            <button className="inline-flex items-center gap-2.5 bg-[#ffb700] hover:bg-[#e6a500] text-white font-medium text-[20px] tracking-[-0.8px] px-6 py-3 rounded-[41px] shadow-[0px_1px_11px_0px_rgba(255,212,102,0.32)] transition-colors mb-6">
              Pesan Layanan
              <ChevronRight className="w-5 h-5" />
            </button>

            {/* Images */}
            <div className="flex gap-2 overflow-x-auto">
              {images.map((src, i) => (
                <div
                  key={i}
                  className="relative w-[185px] h-[196px] rounded-[18px] overflow-hidden shrink-0"
                >
                  <Image
                    src={src}
                    alt={`Paket ${packageName} ${i + 1}`}
                    fill
                    className="object-cover"
                  />
                </div>
              ))}
            </div>
          </div>

          {/* Right Column - Feature Table */}
          <div className="bg-gradient-to-b from-[#fafeff] to-[#5da9ff] rounded-[19px] p-6 lg:p-8">
            {/* Header */}
            <div className="flex items-center gap-3 mb-4">
              <div
                className={`w-[42px] h-[43px] rounded-[21px] bg-gradient-to-t ${iconGradient} flex items-center justify-center`}
              >
                <span className="text-white text-xl font-bold">
                  {packageName.charAt(0)}
                </span>
              </div>
              <h3 className="text-[35px] font-medium text-black tracking-[-1.75px]">
                {title} Feature
              </h3>
            </div>

            {/* Description */}
            <p className="text-[18px] text-[rgba(56,54,54,0.8)] tracking-[-0.9px] mb-6">
              {description}
            </p>

            {/* Table */}
            <div className="space-y-[2px]">
              {tableRows.map((row, index) => (
                <div key={index} className="flex">
                  <div className="flex-1 bg-gradient-to-r from-[#0642da] to-[#5787ff] flex items-center justify-center px-4 py-3 min-h-[55px]">
                    <span className="text-white font-bold text-[18px] tracking-[-0.54px] text-center">
                      {row.label}
                    </span>
                  </div>
                  <div
                    className={`flex-1 bg-gradient-to-r ${tableGradient} flex items-center justify-center px-4 py-3 min-h-[55px]`}
                  >
                    <span
                      className={`font-bold text-[18px] tracking-[-0.54px] text-center ${
                        row.isNone
                          ? "text-[#b21414] italic font-normal"
                          : "text-white"
                      }`}
                    >
                      {row.value}
                    </span>
                  </div>
                </div>
              ))}

              {/* Price Row */}
              <div className="flex">
                <div className="flex-1 bg-[#6af3ff] flex items-center justify-center px-4 py-3 min-h-[55px]">
                  <span className="text-[#0061c2] font-extrabold text-[21px] tracking-[-0.63px]">
                    Harga Normal
                  </span>
                </div>
                <div className="flex-1 bg-white flex items-center justify-center px-4 py-3 min-h-[55px]">
                  <span className="text-[#353535] font-extrabold text-[21px] tracking-[-0.63px]">
                    {price}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
};

export default PaketDetailMain;