"use client";

import type { ReactNode } from "react";

export type DetailsSection = {
  id: string;
  content: ReactNode;
};

export type DetailsCustomProps = {
  /** Direction of the whole page – useful for AR / EN switch */
  dir?: "rtl" | "ltr";

  /** Main title in the green header (e.g. horse name) */
  title: ReactNode;

  /** Small chip: label for the item number (e.g. "رقم العنصر") */
  itemNumberLabel?: ReactNode;
  /** Item number value */
  itemNumber?: ReactNode;

  /** Auction type chip text (e.g. "مزاد سنوي") */
  auctionTypeLabel?: ReactNode;

  /** Auction state chip text (e.g. "قيد المزايدة") */
  auctionStateLabel?: ReactNode;
  /** Tailwind classes for auction state chip color */
  auctionStateClassName?: string;

  /** Optional location text shown under the title */
  location?: ReactNode;

  /** Any extra header content (icons, actions, etc.) */
  headerExtra?: ReactNode;

  /**
   * Left/main column sections – each entry is rendered in order.
   * Typical usage: media gallery, info card, animal details, documents, videos…
   */
  mainSections: DetailsSection[];

  /**
   * Right sidebar content – usually price box, countdown, actions…
   * Completely free layout – just pass a ReactNode.
   */
  sidebar: ReactNode;

  /**
   * Optional extra full‑width sections rendered after the grid,
   * e.g. comments, notes, history, etc.
   */
  footerSections?: DetailsSection[];
};

export default function DetailsCustom({
  dir = "rtl",
  title,
  itemNumberLabel,
  itemNumber,
  auctionTypeLabel,
  auctionStateLabel,
  auctionStateClassName,
  location,
  headerExtra,
  mainSections,
  sidebar,
  footerSections,
}: DetailsCustomProps) {
  return (
    <div dir={dir} className="bg-[#FBF9F6] min-h-screen">
      <main className="max-w-7xl mx-auto px-4 py-8 pb-28 sm:pb-8 space-y-8">
        {/* Header */}
        <section className="rounded-2xl border border-[#0F5132]/20 bg-gradient-to-br from-[#0F5132] via-[#155c3c] to-[#1d724b] p-5 sm:p-6 text-white shadow-[0_16px_40px_rgba(15,81,50,0.3)]">
          <div className="flex flex-col gap-4">
            <div className="flex items-center justify-between gap-3 flex-wrap">
              <h1 className="text-2xl sm:text-3xl font-extrabold leading-tight">
                {title}
              </h1>

              <div className="flex items-center gap-2 flex-wrap">
                {itemNumber != null && itemNumber !== "" && (
                  <span className="inline-flex px-3 py-1 rounded-full text-xs font-bold bg-white/15 border border-white/25">
                    {itemNumberLabel && <>{itemNumberLabel}: </>}
                    {itemNumber}
                  </span>
                )}

                {auctionTypeLabel && (
                  <span className="inline-flex px-3 py-1 rounded-full text-xs font-bold bg-white/15 border border-white/25">
                    {auctionTypeLabel}
                  </span>
                )}

                {auctionStateLabel && (
                  <span
                    className={`inline-flex px-3 py-1 rounded-full text-xs font-bold ${
                      auctionStateClassName ??
                      "bg-slate-100 text-slate-700 border border-slate-200"
                    }`}
                  >
                    {auctionStateLabel}
                  </span>
                )}
              </div>
            </div>

            {location && (
              <div className="inline-flex items-center gap-2 text-sm text-white/90">
                {location}
              </div>
            )}

            {headerExtra}
          </div>
        </section>

        {/* Content layout – responsive grid like the annual details page */}
        <div className="grid lg:grid-cols-3 gap-6 items-start">
          {/* Main column */}
          <div className="lg:col-span-2 space-y-6">
            {mainSections.map((section) => (
              <div key={section.id}>{section.content}</div>
            ))}
          </div>

          {/* Sidebar */}
          <aside className="space-y-6 lg:sticky lg:top-4 self-start">
            {sidebar}
          </aside>
        </div>

        {/* Optional footer sections (full width) */}
        {footerSections && footerSections.length > 0 && (
          <div className="space-y-6">
            {footerSections.map((section) => (
              <div key={section.id}>{section.content}</div>
            ))}
          </div>
        )}
      </main>
    </div>
  );
}