"use client";

import { useMemo, useState } from "react";
import { ProductDescription } from "@/components/store/product-description";
import { SanityPortableTextBlock } from "@/lib/sanity/queries";

type Characteristic = {
  label: string;
  value: string;
};

type Props = {
  descriptionText?: string;
  richDescription?: SanityPortableTextBlock[] | null;
  characteristics?: Characteristic[];
  personalizationText?: string;
  showPersonalizationTab?: boolean;
};

type TabId = "description" | "characteristics" | "personalization";

export function ProductTabs({
  descriptionText,
  richDescription,
  characteristics = [],
  personalizationText,
  showPersonalizationTab = true,
}: Props) {
  const cleanDescription = (descriptionText || "").trim();
  const cleanPersonalization = (personalizationText || "").trim();
  const hasRichDescription = Array.isArray(richDescription) && richDescription.length > 0;

  const tabs = useMemo(
    () =>
      [
        (hasRichDescription || cleanDescription
          ? { id: "description" as const, label: "Description" }
          : null),
        (characteristics.length
          ? { id: "characteristics" as const, label: "Caracteristiques" }
          : null),
        (showPersonalizationTab && cleanPersonalization
          ? { id: "personalization" as const, label: "Personnalisation" }
          : null),
      ].filter(Boolean) as Array<{ id: TabId; label: string }>,
    [characteristics.length, cleanDescription, cleanPersonalization, hasRichDescription, showPersonalizationTab]
  );

  const [activeTab, setActiveTab] = useState<TabId>(tabs[0]?.id || "description");

  if (!tabs.length) {
    return null;
  }

  return (
    <section className="space-y-5 rounded-[1.7rem] border border-[var(--line)] bg-[linear-gradient(180deg,#fff9f7_0%,#fff3f1_100%)] p-5 shadow-[0_14px_28px_rgba(49,18,18,0.06)] md:p-6">
      <div className="flex flex-wrap gap-2">
        {tabs.map((tab) => {
          const isActive = tab.id === activeTab;
          return (
            <button
              key={tab.id}
              type="button"
              onClick={() => setActiveTab(tab.id)}
              className={`rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.14em] transition ${
                isActive
                  ? "border-[var(--accent-3)] bg-[var(--accent-3)] text-white"
                  : "border-[#ffd8d8] bg-white/90 text-[var(--accent-3)] hover:border-[var(--accent-3)] hover:bg-[#fff3f3]"
              }`}
            >
              {tab.label}
            </button>
          );
        })}
      </div>

      <div className="rounded-[1.2rem] border border-[#ffe2e2] bg-white/80 p-5">
        {activeTab === "description" ? (
          <ProductDescription text={cleanDescription} richBlocks={richDescription} />
        ) : null}

        {activeTab === "characteristics" ? (
          <dl className="grid gap-3 sm:grid-cols-2">
            {characteristics.map((item) => (
              <div key={`${item.label}-${item.value}`} className="rounded-xl border border-[#ffe8e8] bg-[#fff9f8] p-4">
                <dt className="text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--accent-3)]">{item.label}</dt>
                <dd className="mt-1 text-sm leading-7 text-[var(--foreground)]">{item.value}</dd>
              </div>
            ))}
          </dl>
        ) : null}

        {activeTab === "personalization" ? (
          <div className="whitespace-pre-line text-sm leading-8 text-[var(--muted)]">{cleanPersonalization}</div>
        ) : null}
      </div>
    </section>
  );
}