"use client";

import { useMemo, useState } from "react";
import type { GalleryCategoryGroup, GalleryItem } from "@/lib/wp";

interface GalleryTabsProps {
  groups: ReadonlyArray<GalleryCategoryGroup>;
  defaultCategory?: string;
}

export function GalleryTabs({ groups, defaultCategory }: GalleryTabsProps) {
  const initial = useMemo(() => {
    if (defaultCategory && groups.some((g) => g.category.slug === defaultCategory)) {
      return defaultCategory;
    }
    return groups[0]?.category.slug ?? "";
  }, [groups, defaultCategory]);

  const [active, setActive] = useState<string>(initial);
  const current = groups.find((g) => g.category.slug === active);

  if (!groups.length) {
    return (
      <section className="gallery-tabs is-empty">
        <div className="wrap">
          <p>لا توجد صور بعد.</p>
        </div>
      </section>
    );
  }

  return (
    <section className="gallery-tabs" data-screen-label="Gallery Tabs">
      <div className="wrap">
        <div className="gallery-tabs__list" role="tablist" aria-label="فئات المعرض">
          {groups.map((group) => {
            const isActive = group.category.slug === active;
            return (
              <button
                key={group.category.slug}
                type="button"
                role="tab"
                aria-selected={isActive}
                className={`gallery-tabs__tab${isActive ? " is-active" : ""}`}
                onClick={() => setActive(group.category.slug)}
              >
                <span>{group.category.name}</span>
                <span className="gallery-tabs__count">{group.category.count}</span>
              </button>
            );
          })}
        </div>

        <div className="gallery-tabs__grid" role="tabpanel">
          {current?.items.map((item) => (
            <GalleryCard key={item.id} item={item} />
          ))}
        </div>
      </div>
    </section>
  );
}

function GalleryCard({ item }: { item: GalleryItem }) {
  const card = item.image.card ?? item.image.full;
  return (
    <article className="gallery-tabs__card">
      {card ? (
        <img
          src={card.url}
          alt={item.image.alt || item.title}
          width={card.width}
          height={card.height}
          loading="lazy"
        />
      ) : (
        <div className="gallery-tabs__card-placeholder" />
      )}
      <div className="gallery-tabs__card-overlay">
        {item.eyebrow ? <div className="gallery-tabs__eyebrow">{item.eyebrow}</div> : null}
        <h3 className="gallery-tabs__title">{item.title}</h3>
        {item.description ? <p className="gallery-tabs__desc">{item.description}</p> : null}
      </div>
    </article>
  );
}