import Link from "next/link";
import { getAdminSignatureEvent } from "@/lib/api/admin";
import { EventThemeForm } from "@/components/admin/event-theme-form";
import { SignatureProjectForm } from "@/components/admin/signature-project-form";
import { SignatureContentForm } from "@/components/admin/signature-content-form";
import { SignatureSectionVisibilityForm } from "@/components/admin/signature-section-visibility-form";
import { SignatureArtistManager } from "@/components/admin/signature-artist-manager";
import { SignatureBrandPartnerManager } from "@/components/admin/signature-brand-partner-manager";
import { MediaSlot } from "@/components/admin/media-slot";
import { FOCUS_RING_CLASSES } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

/**
 * One dedicated place to manage everything specific to the Signature Event
 * (Kolabora Official) — Tema Visual, Project, Lineup Artis, Brand Partner —
 * reached directly from the sidebar instead of buried inside a specific
 * event's detail hub.
 */
export default async function AdminSignaturePage() {
  const { data: event } = await getAdminSignatureEvent();

  if (!event) {
    return (
      <div className="max-w-md">
        <h2 className="text-lg font-semibold">Signature</h2>
        <p className="mt-4 text-sm text-kolabora-neutral-dark/70">
          No event run by Kolaborativ Official yet. Create or assign an event to the
          &quot;Kolaborativ Official&quot; organizer first from the Event menu.
        </p>
      </div>
    );
  }

  return (
    <div className="max-w-2xl">
      <h2 className="text-lg font-semibold">Signature &mdash; {event.title}</h2>

      <div className="mt-8">
        <h3 className="text-base font-semibold">Event Description (Main Page)</h3>
        <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
          Shown on the event&apos;s main page (<code>/events/{event.slug}</code>) — this is the regular event
          Description field, edited on the Event page (not here).
        </p>
        <p className="mt-3 whitespace-pre-line rounded-xl border border-kolabora-neutral-dark/10 bg-kolabora-neutral-dark/5 p-4 text-sm text-kolabora-neutral-dark/80">
          {event.description || "No description yet."}
        </p>
        <Link
          href={`/admin/events/${event.id}/edit`}
          className={cn("mt-2 inline-block rounded text-sm font-medium text-kolabora-primary", FOCUS_RING_CLASSES)}
        >
          Edit Description &rarr;
        </Link>
      </div>

      <div className="mt-10">
        <h3 className="text-base font-semibold">Section Visibility</h3>
        <SignatureSectionVisibilityForm eventId={event.id} initial={event.signature_profile ?? null} />
      </div>

      <div className="mt-10">
        <h3 className="text-base font-semibold">Visual Theme</h3>
        <EventThemeForm eventId={event.id} initial={event.theme ?? null} />
      </div>

      <div className="mt-10">
        <h3 className="text-base font-semibold">Project</h3>
        <SignatureProjectForm eventId={event.id} initial={event.signature_profile ?? null} />
        <div className="mt-4 max-w-md">
          <MediaSlot
            label="Project Thumbnail"
            fieldName="thumbnail"
            endpoint={`/api/admin/events/${event.id}/signature-profile/project-thumbnail`}
            current={event.signature_profile?.project_thumbnail_url ?? null}
            hint="JPG/PNG/WEBP, max 5MB. Shown full-bleed covering the Project section."
          />
        </div>
      </div>

      <div className="mt-10">
        <h3 className="text-base font-semibold">Detail Page Content</h3>
        <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
          Free-form content specific to the public detail page (<code>/events/{event.slug}/detail</code>) — About
          Event, the &quot;Promo &amp; Voucher&quot;/&quot;Special Promo&quot; cards, and the &quot;Rules&quot; list.
          Independent from the Event Description above.
        </p>
        <SignatureContentForm eventId={event.id} initial={event.signature_profile ?? null} />
        <div className="mt-4 max-w-md">
          <MediaSlot
            label="Detail Page Thumbnail"
            fieldName="thumbnail"
            endpoint={`/api/admin/events/${event.id}/signature-profile/detail-thumbnail`}
            current={event.signature_profile?.detail_thumbnail_url ?? null}
            hint="JPG/PNG/WEBP, max 5MB. Independent from the Main Event thumbnail."
          />
        </div>
      </div>

      <div className="mt-10">
        <h3 className="text-base font-semibold">Main Event &mdash; Interactive Effect</h3>
        <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
          &quot;Before&quot; (revealed on hover/swipe) and &quot;after&quot; (normal, obscured) images for the
          interactive effect on the Main Event Signaturee section. Default images are used if none are uploaded.
        </p>
        <div className="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
          <MediaSlot
            label="Before Image"
            fieldName="image"
            endpoint={`/api/admin/events/${event.id}/signature-profile/main-event-before`}
            current={event.signature_profile?.main_event_before_url ?? null}
            hint="JPG/PNG/WEBP, max 5MB."
          />
          <MediaSlot
            label="After Image"
            fieldName="image"
            endpoint={`/api/admin/events/${event.id}/signature-profile/main-event-after`}
            current={event.signature_profile?.main_event_after_url ?? null}
            hint="JPG/PNG/WEBP, max 5MB."
          />
        </div>
      </div>

      <div className="mt-10">
        <h3 className="text-base font-semibold">Venue Map</h3>
        <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
          Venue/location map on the public detail page. A default map image is used if none are uploaded.
        </p>
        <div className="mt-3 max-w-md">
          <MediaSlot
            label="Venue Map"
            fieldName="denah"
            endpoint={`/api/admin/events/${event.id}/signature-profile/denah`}
            current={event.signature_profile?.denah_image_url ?? null}
            hint="JPG/PNG/WEBP, max 5MB."
          />
        </div>
      </div>

      <div className="mt-10">
        <h3 className="text-base font-semibold">Artist Lineup</h3>
        <div className="mt-3">
          <SignatureArtistManager eventId={event.id} artists={event.signature_artists ?? []} />
        </div>
      </div>

      <div className="mt-10">
        <h3 className="text-base font-semibold">Brand Partner</h3>
        <div className="mt-3">
          <SignatureBrandPartnerManager eventId={event.id} partners={event.signature_brand_partners ?? []} />
        </div>
      </div>
    </div>
  );
}