import Link from "next/link";
import type { KolaboraEvent } from "@/types/event";
import { EventActions } from "@/components/admin/event-actions";
import { formatDate, formatCurrency } from "@/lib/format";
import { EVENT_STATUS_LABEL } from "@/lib/labels";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

/**
 * Shared detail-hub markup for `/admin/events/[id]` and
 * `/admin/signature/events/[id]` — every sub-feature link is derived from
 * `basePath` so the two trees never cross-link into each other.
 */
export function EventDetailHub({ event, basePath }: { event: KolaboraEvent; basePath: string }) {
  return (
    <div className="max-w-2xl">
      <Link href={basePath} className="text-sm font-medium text-kolabora-primary">
        &larr; Back to Manage Events
      </Link>

      <div className="mt-4 flex flex-wrap items-start justify-between gap-4">
        <div className="min-w-0">
          <h2 className="text-xl font-semibold">{event.title}</h2>
          <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
            {formatDate(event.start_date)} &middot; {event.location ?? "-"}
          </p>
          <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
            Organizer: {event.organizer?.name ?? "-"}
          </p>
        </div>
        <span className="rounded-full bg-kolabora-tertiary/15 px-3 py-1 text-xs font-medium text-kolabora-tertiary">
          {EVENT_STATUS_LABEL[event.status] ?? event.status}
        </span>
      </div>

      <p className="mt-4 whitespace-pre-line text-sm text-kolabora-neutral-dark/80">
        {event.description || "No description yet."}
      </p>

      <div className="mt-6 flex flex-wrap gap-2">
        <Link
          href={`${basePath}/${event.id}/edit`}
          className="rounded-full border border-kolabora-neutral-dark/20 px-4 py-2 text-sm font-medium hover:bg-kolabora-neutral-dark/5"
        >
          Edit
        </Link>
        <Link
          href={`${basePath}/${event.id}/media`}
          className="rounded-full border border-kolabora-neutral-dark/20 px-4 py-2 text-sm font-medium hover:bg-kolabora-neutral-dark/5"
        >
          Media
        </Link>
        <Link
          href={`${basePath}/${event.id}/ticket-types`}
          className="rounded-full border border-kolabora-neutral-dark/20 px-4 py-2 text-sm font-medium hover:bg-kolabora-neutral-dark/5"
        >
          Ticket
        </Link>
        <Link
          href={`${basePath}/${event.id}/petugas`}
          className="rounded-full border border-kolabora-neutral-dark/20 px-4 py-2 text-sm font-medium hover:bg-kolabora-neutral-dark/5"
        >
          Manage Staff
        </Link>
        <Link
          href={`${basePath}/${event.id}/promo-voucher`}
          className="rounded-full border border-kolabora-neutral-dark/20 px-4 py-2 text-sm font-medium hover:bg-kolabora-neutral-dark/5"
        >
          Promo &amp; Voucher
        </Link>
        {["published", "ongoing", "finished"].includes(event.status) && (
          <a
            href={`/events/${event.slug}`}
            target="_blank"
            rel="noreferrer"
            className="rounded-full border border-kolabora-neutral-dark/20 px-4 py-2 text-sm font-medium hover:bg-kolabora-neutral-dark/5"
          >
            View Public Page
          </a>
        )}
      </div>

      <div className="mt-4">
        <EventActions eventId={event.id} status={event.status} basePath={basePath} />
      </div>

      {event.ticket_types && event.ticket_types.length > 0 && (
        <div className="mt-8">
          <h3 className="text-base font-semibold">Ticket</h3>
          <div className={cn("mt-2 flex flex-col divide-y divide-kolabora-neutral-dark/10", cardClasses())}>
            {event.ticket_types.map((tt) => (
              <div key={tt.id} className="px-4 py-3 text-sm">
                <p className="font-medium">{tt.name}</p>
                {!tt.phases || tt.phases.length === 0 ? (
                  <p className="text-kolabora-neutral-dark/70">No sale phases yet.</p>
                ) : (
                  tt.phases.map((phase) => (
                    <div key={phase.id} className="mt-1 flex items-center justify-between gap-3">
                      <span className="min-w-0 truncate text-kolabora-neutral-dark/70">{phase.name}</span>
                      <span className="shrink-0 text-kolabora-neutral-dark/70">{formatCurrency(phase.price)}</span>
                    </div>
                  ))
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}