"use client";

import { useState } from "react";
import { CalendarClock, Layers, Landmark } from "lucide-react";
import { AntiquityViewer } from "./AntiquityViewer";
import type { Antiquity } from "@/app/content";

export function AntiquityShowcase({ items }: { items: Antiquity[] }) {
  const [activeId, setActiveId] = useState(items[0]?.id);
  const active = items.find((item) => item.id === activeId) ?? items[0];

  if (!active) {
    return (
      <section className="mx-auto max-w-3xl px-4 py-20 text-center sm:px-6">
        <p className="text-base text-[var(--muted-foreground)]">Bộ sưu tập cổ vật số đang được cập nhật.</p>
      </section>
    );
  }

  return (
    <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:py-16">
      <div className="grid gap-6 lg:grid-cols-[1.32fr_0.68fr] lg:items-stretch">
        <div className="public-panel public-glow rounded-[16px] p-3 sm:p-4">
          <div className="h-[clamp(360px,58vh,640px)] w-full">
            {/* key buộc viewer dựng lại sạch khi đổi hiện vật */}
            <AntiquityViewer key={active.model} src={active.model} />
          </div>
        </div>

        <div className="public-panel flex flex-col rounded-[16px] p-6 sm:p-7">
          <p className="public-kicker">Hiện vật đang xem</p>
          <h2 className="public-display public-heading-safe mt-3 text-[clamp(1.7rem,3vw,2.3rem)] font-bold text-[var(--tour-ink)]">
            {active.name}
          </h2>

          <dl className="mt-5 grid gap-2.5">
            <Meta icon={Landmark} label="Di tích" value={active.site} />
            <Meta icon={Layers} label="Chất liệu" value={active.material} />
            <Meta icon={CalendarClock} label="Niên đại" value={active.period} />
          </dl>

          <div className="mt-5 grid gap-3 border-t border-[var(--surface-border)] pt-5 text-sm leading-7 text-[var(--foreground)]/82">
            {active.description.map((text, index) => (
              <p key={index}>{text}</p>
            ))}
          </div>
        </div>
      </div>

      <div className="mt-8">
        <p className="text-sm font-bold text-[var(--muted-foreground)]">
          Bộ sưu tập · {items.length} hiện vật đã số hóa 3D
        </p>
        <div className="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((item, index) => {
            const isActive = item.id === active.id;
            return (
              <button
                key={item.id}
                type="button"
                onClick={() => setActiveId(item.id)}
                aria-pressed={isActive}
                className={`group flex items-center gap-4 rounded-[14px] border p-4 text-left transition active:scale-[0.99] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[rgb(200_164_106_/_0.22)] ${
                  isActive
                    ? "border-[var(--primary)] bg-[rgb(200_164_106_/_0.12)] shadow-[0_14px_40px_rgb(0_0_0_/_0.3)]"
                    : "border-[var(--surface-border)] bg-[var(--surface-glass)] hover:border-[rgb(200_164_106_/_0.45)]"
                }`}
              >
                <span
                  className={`grid h-12 w-12 shrink-0 place-items-center rounded-[10px] font-display-vn text-lg font-bold transition ${
                    isActive
                      ? "bg-[var(--primary)] text-[var(--primary-foreground)]"
                      : "bg-[rgb(200_164_106_/_0.14)] text-[var(--primary)]"
                  }`}
                >
                  {String(index + 1).padStart(2, "0")}
                </span>
                <span className="min-w-0">
                  <span className="block truncate text-sm font-bold text-[var(--tour-ink)]">{item.name}</span>
                  <span className="mt-0.5 block text-xs text-[var(--muted-foreground)]">
                    {item.material} · {item.period}
                  </span>
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Meta({
  icon: Icon,
  label,
  value,
}: {
  icon: typeof Landmark;
  label: string;
  value: string;
}) {
  return (
    <div className="flex items-start gap-3">
      <span className="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-[8px] bg-[rgb(200_164_106_/_0.14)]">
        <Icon className="h-4 w-4 text-[var(--primary)]" strokeWidth={1.8} />
      </span>
      <span>
        <span className="block text-xs font-bold uppercase tracking-[0.1em] text-[var(--muted-foreground)]">{label}</span>
        <span className="block text-sm font-semibold text-[var(--tour-ink)]">{value}</span>
      </span>
    </div>
  );
}
