"use client";

import { cn } from "@/app/lib/cn";
import productImage from "@/assets/images/product_image.png";
import Image from "next/image";
import { useState, type FC } from "react";
import { PRODUCT_DESCRIPTION_CONTENT, PRODUCT_TABS, type ProductTabId } from "../constants";

const ProductTabs: FC = () => {
  const [activeTab, setActiveTab] = useState<ProductTabId>("description");

  return (
    <section className="mt-8 sm:mt-10">
      <div className="px-4 sm:px-8 lg:px-30">
        <div className="overflow-x-auto border-b border-[#E9EEF2]">
          <div className="flex min-w-max items-end justify-start gap-6 sm:gap-8 lg:gap-10">
            {PRODUCT_TABS.map((tab) => {
              const isActive = activeTab === tab.id;

              return (
                <button key={tab.id} type="button" onClick={() => setActiveTab(tab.id)} className="relative shrink-0">
                  <span className={cn("block pb-3 text-sm leading-5 transition-colors", isActive ? "font-bold text-[#0A1B2C]" : "font-normal text-[#3F4D5A]")}>{tab.label}</span>
                  {isActive && <span className="absolute bottom-0 left-1/2 h-0.75 w-[72%] -translate-x-1/2 rounded-full bg-primary" />}
                </button>
              );
            })}
          </div>
        </div>

        <div className="mt-6 rounded-2xl bg-[#F7FAFC] p-5 sm:mt-8 sm:p-6 lg:p-8">
          {activeTab === "description" && <DescriptionPanel />}
          {activeTab !== "description" && <p className="py-6 text-center text-xs text-[#53606B] sm:text-sm">محتوای این بخش به‌زودی اضافه می‌شود.</p>}
        </div>
      </div>
    </section>
  );
};

const DescriptionPanel: FC = () => {
  const { title, bullets, sections } = PRODUCT_DESCRIPTION_CONTENT;

  return (
    <div className="flex flex-col items-center gap-6 lg:flex-row lg:items-center lg:gap-12" dir="ltr">
      <div className="mx-auto w-full max-w-85 shrink-0 rounded-2xl bg-white p-3 shadow-[0_4px_20px_rgba(0,0,0,0.08)] sm:max-w-90 lg:max-w-100 lg:p-4">
        <div className="relative aspect-square w-full overflow-hidden rounded-xl">
          <Image src={productImage} alt="" fill className="object-cover" sizes="(max-width: 1024px) 80vw, 400px" />
        </div>
      </div>

      <div className="min-w-0 flex-1 space-y-4 text-right" dir="rtl">
        <h2 className="text-sm font-bold leading-6 text-[#0A1B2C] sm:text-base sm:leading-7">{title}</h2>

        <ul className="space-y-1.5 text-xs leading-6 text-[#0A1B2C] sm:text-sm sm:leading-7">
          {bullets.map((item) => (
            <li key={item} className="flex items-start gap-2">
              <span className="mt-2 size-1 shrink-0 rounded-full bg-[#0A1B2C]" />
              <span>{item}</span>
            </li>
          ))}
        </ul>

        {sections.map((section) => (
          <div key={section.title} className="space-y-1.5">
            <h3 className="text-xs font-bold leading-6 text-[#0A1B2C] sm:text-sm sm:leading-7">{section.title}</h3>
            <p className="text-xs leading-6 text-[#0A1B2C] sm:text-sm sm:leading-7">{section.body}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductTabs;