"use client";

import { useState } from "react";
import { Ruler } from "lucide-react";
import type { Product } from "@/data/types";
import { cn } from "@/lib/cn";

type Tab = "Overview" | "Materials & care" | "Size guide" | "Shipping & returns";

/** Detailed product information: descriptions, care, and size charts. */
export function ProductInfoTabs({ product }: { product: Product }) {
  const [active, setActive] = useState<Tab>("Overview");
  const tabs: Tab[] = [
    "Overview",
    "Materials & care",
    ...(product.sizeGuide.length > 0 ? (["Size guide"] as const) : []),
    "Shipping & returns",
  ];
  const guideKeys = [
    "size",
    ...(["chest", "waist", "hip", "length", "foot"] as const).filter((key) =>
      product.sizeGuide.some((row) => row[key]),
    ),
  ] as const;

  const labels: Record<string, string> = {
    size: "Size",
    chest: "Chest",
    waist: "Waist",
    hip: "Hip",
    length: "Length",
    foot: "Foot",
  };

  return (
    <section className="mt-12 border-t border-border" id="product-details">
      <div className="flex gap-0 overflow-x-auto border-b border-border">
        {tabs.map((tab) => (
          <button
            key={tab}
            type="button"
            onClick={() => setActive(tab)}
            className={cn(
              "shrink-0 border-b px-0 py-3 pr-5 text-[11px] font-medium uppercase tracking-[0.14em] transition",
              active === tab
                ? "border-foreground text-foreground"
                : "border-transparent text-muted hover:text-foreground",
            )}
          >
            {tab}
          </button>
        ))}
      </div>

      <div className="py-6">
        {active === "Overview" ? (
          <div className="space-y-5">
            <div>
              <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted">
                Short description
              </h3>
              <p className="mt-2 text-[15px] leading-relaxed text-foreground">
                {product.shortDescription}
              </p>
            </div>
            <div>
              <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted">
                Long description
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-muted sm:text-[15px]">
                {product.longDescription}
              </p>
            </div>
            <div>
              <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted">
                Fit
              </h3>
              <p className="mt-2 text-sm text-foreground">{product.fit}</p>
            </div>
            <div>
              <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted">
                Essentials
              </h3>
              <ul className="mt-3 grid gap-2 sm:grid-cols-2">
                {product.details.map((detail) => (
                  <li
                    key={detail}
                    className="rounded-xl border border-border bg-background px-3 py-2 text-sm"
                  >
                    {detail}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ) : null}

        {active === "Materials & care" ? (
          <div className="grid gap-8 sm:grid-cols-2">
            <div>
              <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted">
                Materials
              </h3>
              <ul className="mt-3 space-y-2">
                {product.materials.map((item) => (
                  <li key={item} className="text-sm text-foreground">
                    · {item}
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h3 className="text-sm font-semibold uppercase tracking-[0.14em] text-muted">
                Care guide
              </h3>
              <ul className="mt-3 space-y-2">
                {product.care.map((item) => (
                  <li key={item} className="text-sm text-foreground">
                    · {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ) : null}

        {active === "Size guide" ? (
          <div>
            <div className="flex items-start gap-2">
              <Ruler className="mt-0.5 h-4 w-4 shrink-0 text-foreground" />
              <div>
                <h3 className="text-sm font-semibold tracking-tight">
                  Size & measurement guide
                </h3>
                <p className="mt-1 text-sm text-muted">{product.sizeGuideNote}</p>
                <p className="mt-2 text-sm text-foreground">
                  <span className="font-medium">Fit tip:</span> {product.fit}
                </p>
              </div>
            </div>

            <div className="mt-5 overflow-x-auto rounded-2xl border border-border">
              <table className="min-w-full text-left text-sm">
                <thead className="bg-surface text-xs uppercase tracking-wide text-muted">
                  <tr>
                    {guideKeys.map((key) => (
                      <th key={key} className="px-4 py-3 font-semibold">
                        {labels[key]}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {product.sizeGuide.map((row) => (
                    <tr
                      key={row.size}
                      className="border-t border-border odd:bg-background even:bg-card"
                    >
                      {guideKeys.map((key) => (
                        <td
                          key={key}
                          className="px-4 py-3 tabular-nums text-foreground"
                        >
                          {key === "size" ? row.size : row[key] ?? "—"}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="mt-4 grid gap-2 sm:grid-cols-3">
              {[
                "Measure over undergarments",
                "Keep the tape parallel to the floor",
                "If between sizes, size up for comfort",
              ].map((tip) => (
                <p
                  key={tip}
                  className="rounded-xl border border-border bg-background px-3 py-2 text-xs text-muted"
                >
                  {tip}
                </p>
              ))}
            </div>
          </div>
        ) : null}

        {active === "Shipping & returns" ? (
          <div className="grid gap-4 sm:grid-cols-2">
            {[
              {
                title: "Shipping",
                body: "Orders ship in 1–2 business days. Standard delivery arrives in 2–3 days across the United States. Free shipping over $150.",
              },
              {
                title: "Returns & exchanges",
                body: "Free exchanges within 30 days on unworn items with tags attached. Start a return from your account orders page.",
              },
              {
                title: "International",
                body: "We ship worldwide. Duties and taxes may apply depending on your destination country.",
              },
              {
                title: "Need help?",
                body: "Contact support for sizing advice before you order — we’ll help you choose the right fit.",
              },
            ].map((item) => (
              <div
                key={item.title}
                className="rounded-2xl border border-border bg-background p-4"
              >
                <h3 className="text-sm font-semibold">{item.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted">
                  {item.body}
                </p>
              </div>
            ))}
          </div>
        ) : null}
      </div>
    </section>
  );
}