import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { ArrowLeft, CalendarDays, CircleAlert, MapPin } from "lucide-react";
import { authOptions } from "@/lib/auth";
import { isAdminEmail } from "@/lib/admin";
import { bookingRepo } from "@/server/repositories/booking.repo";
import { formatRupiah } from "@/lib/utils";
import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
import { AdminReconcileButton } from "@/features/booking/components/admin-reconcile-button";
import { RawCallbackViewer } from "@/features/booking/components/raw-callback-viewer";

interface PageProps {
  params: Promise<{ id: string }>;
}

export default async function AdminBookingDetailPage({ params }: PageProps) {
  const session = await getServerSession(authOptions);
  if (!session?.user) {
    redirect("/login?callbackUrl=/admin/bookings");
  }
  if (!isAdminEmail(session.user.email)) {
    return (
      <div className="mx-auto max-w-2xl px-4 py-12 text-center">
        <p className="text-sm text-neutral-600">
          Halaman ini hanya untuk admin SeTrip.
        </p>
      </div>
    );
  }

  const { id } = await params;
  const booking = await bookingRepo.findByIdForAdmin(id);
  if (!booking) notFound();

  // Build chronological timeline lintas Payment + Refund + Payout.
  type TimelineEvent =
    | {
        kind: "payment";
        at: Date;
        payment: (typeof booking.payments)[number];
      }
    | {
        kind: "refund";
        at: Date;
        refund: (typeof booking.refunds)[number];
      }
    | {
        kind: "payout";
        at: Date;
        payout: NonNullable<typeof booking.payout>;
      };

  const timeline: TimelineEvent[] = [];
  for (const p of booking.payments) {
    timeline.push({ kind: "payment", at: p.createdAt, payment: p });
  }
  for (const r of booking.refunds) {
    timeline.push({ kind: "refund", at: r.createdAt, refund: r });
  }
  if (booking.payout) {
    timeline.push({
      kind: "payout",
      at: booking.payout.createdAt,
      payout: booking.payout,
    });
  }
  timeline.sort((a, b) => a.at.getTime() - b.at.getTime());

  return (
    <div className="mx-auto max-w-4xl px-4 py-8 sm:py-12">
      <div className="mb-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-neutral-500">
        <Link
          href="/admin"
          className="inline-flex items-center gap-1 hover:text-primary-600"
        >
          <ArrowLeft size={14} strokeWidth={2} aria-hidden />
          Dashboard
        </Link>
        <Link
          href={`/admin/trips/${booking.tripId}`}
          className="hover:text-primary-600"
        >
          Trip terkait
        </Link>
      </div>

      <header className="mb-6 rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
        <p className="text-[11px] font-semibold uppercase tracking-wide text-neutral-500">
          Booking
        </p>
        <h1 className="mt-0.5 text-xl font-bold text-neutral-900 sm:text-2xl">
          {booking.trip.title}
        </h1>
        <p className="mt-1 flex flex-wrap items-center gap-1 text-sm text-neutral-500">
          <CalendarDays
            size={14}
            strokeWidth={1.75}
            aria-hidden
            className="shrink-0"
          />
          {formatTripCalendarDateRangeLong(booking.trip.date, booking.trip.endDate)}
          <span aria-hidden>·</span>
          <MapPin
            size={14}
            strokeWidth={1.75}
            aria-hidden
            className="shrink-0"
          />
          {booking.trip.destination}, {booking.trip.location}
        </p>

        <div className="mt-4 grid gap-3 sm:grid-cols-2">
          <FieldRow label="Peserta" value={booking.user.name} sub={booking.user.email} />
          <FieldRow
            label="Organizer"
            value={booking.trip.organizer.name}
            sub={booking.trip.organizer.email}
          />
          <FieldRow
            label="Nominal booking"
            value={formatRupiah(booking.amount)}
            strong
          />
          <FieldRow label="Status booking" value={booking.status} badge />
        </div>

        <div className="mt-4 border-t border-neutral-100 pt-3 text-[11px] text-neutral-500">
          <p>
            Booking ID:{" "}
            <code className="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-neutral-700">
              {booking.id}
            </code>
          </p>
        </div>
      </header>

      <section className="rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-6">
        <h2 className="mb-4 text-sm font-bold text-neutral-900 sm:text-base">
          Timeline Money Flow ({timeline.length} event)
        </h2>

        {timeline.length === 0 ? (
          <p className="text-xs text-neutral-500">
            Belum ada event payment / refund / payout untuk booking ini.
          </p>
        ) : (
          <ol className="space-y-4">
            {timeline.map((ev, idx) => (
              <li key={idx} className="border-l-2 border-neutral-200 pl-4">
                {ev.kind === "payment" && (
                  <PaymentEventCard payment={ev.payment} />
                )}
                {ev.kind === "refund" && <RefundEventCard refund={ev.refund} />}
                {ev.kind === "payout" && <PayoutEventCard payout={ev.payout} />}
              </li>
            ))}
          </ol>
        )}
      </section>
    </div>
  );
}

function FieldRow({
  label,
  value,
  sub,
  strong,
  badge,
}: {
  label: string;
  value: string;
  sub?: string;
  strong?: boolean;
  badge?: boolean;
}) {
  return (
    <div>
      <p className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
        {label}
      </p>
      {badge ? (
        <span className="mt-0.5 inline-block rounded-full bg-neutral-200 px-2 py-0.5 text-[11px] font-bold uppercase tracking-wide text-neutral-700">
          {value}
        </span>
      ) : (
        <p
          className={`mt-0.5 text-neutral-800 ${
            strong ? "text-base font-bold text-primary-700" : "text-sm font-semibold"
          }`}
        >
          {value}
        </p>
      )}
      {sub && (
        <p className="text-[11px] text-neutral-500">{sub}</p>
      )}
    </div>
  );
}

function EventHeader({
  kind,
  title,
  at,
}: {
  kind: "payment" | "refund" | "payout";
  title: string;
  at: Date;
}) {
  const dotCls =
    kind === "payment"
      ? "bg-secondary-500"
      : kind === "refund"
        ? "bg-amber-500"
        : "bg-emerald-500";
  return (
    <div className="mb-2 flex items-center gap-2">
      <span className={`inline-block h-2 w-2 rounded-full ${dotCls}`} />
      <p className="text-xs font-bold uppercase tracking-wide text-neutral-700">
        {title}
      </p>
      <p className="text-[11px] text-neutral-400">
        {at.toLocaleString("id-ID", {
          day: "2-digit",
          month: "short",
          year: "numeric",
          hour: "2-digit",
          minute: "2-digit",
        })}
      </p>
    </div>
  );
}

function PaymentEventCard({
  payment,
}: {
  payment: {
    id: string;
    provider: string;
    method: string | null;
    amount: number;
    status: string;
    externalOrderId: string;
    externalTxId: string | null;
    snapToken: string | null;
    expiresAt: Date | null;
    paidAt: Date | null;
    failedAt: Date | null;
    rejectionReason: string | null;
    rawCallback: unknown;
    createdAt: Date;
    updatedAt: Date;
  };
}) {
  const canReconcile = payment.provider === "MIDTRANS";
  return (
    <div>
      <EventHeader
        kind="payment"
        title={`Payment ${payment.provider}`}
        at={payment.createdAt}
      />
      <div className="rounded-xl border border-neutral-200 bg-neutral-50/60 p-3 sm:p-4">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div className="min-w-0 flex-1 space-y-1 text-xs text-neutral-700">
            <p>
              <span className="font-semibold">Order ID:</span>{" "}
              <code className="rounded bg-white px-1.5 py-0.5 font-mono text-[11px]">
                {payment.externalOrderId}
              </code>
            </p>
            {payment.externalTxId && (
              <p>
                <span className="font-semibold">Transaction ID:</span>{" "}
                <code className="rounded bg-white px-1.5 py-0.5 font-mono text-[11px]">
                  {payment.externalTxId}
                </code>
              </p>
            )}
            <p>
              <span className="font-semibold">Nominal:</span>{" "}
              {formatRupiah(payment.amount)}
            </p>
            <p>
              <span className="font-semibold">Status:</span>{" "}
              <StatusBadge value={payment.status} />
              {payment.method && (
                <span className="ml-2 text-neutral-500">
                  via <span className="font-medium">{payment.method}</span>
                </span>
              )}
            </p>
            {payment.expiresAt && (
              <p className="text-neutral-500">
                Expires:{" "}
                {payment.expiresAt.toLocaleString("id-ID", {
                  day: "2-digit",
                  month: "short",
                  year: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </p>
            )}
            {payment.paidAt && (
              <p className="text-emerald-700">
                Paid at:{" "}
                {payment.paidAt.toLocaleString("id-ID", {
                  day: "2-digit",
                  month: "short",
                  year: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })}
              </p>
            )}
            {payment.rejectionReason && (
              <p className="flex items-center gap-1 text-red-700">
                <CircleAlert
                  size={14}
                  strokeWidth={2}
                  aria-hidden
                  className="shrink-0"
                />
                {payment.rejectionReason}
              </p>
            )}
          </div>
          {canReconcile && (
            <AdminReconcileButton orderId={payment.externalOrderId} />
          )}
        </div>
        <div className="mt-3 border-t border-neutral-200 pt-3">
          <RawCallbackViewer payload={payment.rawCallback} />
        </div>
      </div>
    </div>
  );
}

function RefundEventCard({
  refund,
}: {
  refund: {
    id: string;
    amount: number;
    reason: string;
    status: string;
    adminNote: string | null;
    reportNote: string;
    createdAt: Date;
    reviewedAt: Date | null;
    succeededAt: Date | null;
    failedAt: Date | null;
    reviewedBy: { id: string; name: string; email: string } | null;
  };
}) {
  return (
    <div>
      <EventHeader
        kind="refund"
        title={`Refund (${refund.reason})`}
        at={refund.createdAt}
      />
      <div className="rounded-xl border border-amber-200 bg-amber-50/60 p-3 sm:p-4">
        <div className="space-y-1 text-xs text-neutral-700">
          <p>
            <span className="font-semibold">Nominal:</span>{" "}
            {formatRupiah(refund.amount)}
          </p>
          <p>
            <span className="font-semibold">Status:</span>{" "}
            <StatusBadge value={refund.status} />
          </p>
          {refund.reportNote && (
            <p className="text-neutral-600">
              <span className="font-semibold">Report:</span> {refund.reportNote}
            </p>
          )}
          {refund.adminNote && (
            <p className="text-neutral-600">
              <span className="font-semibold">Admin note:</span>{" "}
              {refund.adminNote}
            </p>
          )}
          {refund.reviewedBy && (
            <p className="text-[11px] text-neutral-500">
              Reviewed by {refund.reviewedBy.email}
              {refund.reviewedAt && (
                <>
                  {" "}
                  ·{" "}
                  {refund.reviewedAt.toLocaleString("id-ID", {
                    day: "2-digit",
                    month: "short",
                    year: "numeric",
                    hour: "2-digit",
                    minute: "2-digit",
                  })}
                </>
              )}
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

function PayoutEventCard({
  payout,
}: {
  payout: {
    id: string;
    amount: number;
    status: string;
    heldUntil: Date;
    releasedAt: Date | null;
    paidAt: Date | null;
    cancelledAt: Date | null;
    adminNote: string | null;
    createdAt: Date;
    processedBy: { id: string; name: string; email: string } | null;
  };
}) {
  return (
    <div>
      <EventHeader kind="payout" title="Payout ke organizer" at={payout.createdAt} />
      <div className="rounded-xl border border-emerald-200 bg-emerald-50/60 p-3 sm:p-4">
        <div className="space-y-1 text-xs text-neutral-700">
          <p>
            <span className="font-semibold">Nominal:</span>{" "}
            {formatRupiah(payout.amount)}
          </p>
          <p>
            <span className="font-semibold">Status:</span>{" "}
            <StatusBadge value={payout.status} />
          </p>
          <p className="text-neutral-600">
            Held until:{" "}
            {payout.heldUntil.toLocaleDateString("id-ID", {
              day: "2-digit",
              month: "short",
              year: "numeric",
            })}
          </p>
          {payout.paidAt && (
            <p className="text-emerald-700">
              Paid at:{" "}
              {payout.paidAt.toLocaleString("id-ID", {
                day: "2-digit",
                month: "short",
                year: "numeric",
                hour: "2-digit",
                minute: "2-digit",
              })}
            </p>
          )}
          {payout.adminNote && (
            <p className="text-neutral-600">
              <span className="font-semibold">Admin note:</span>{" "}
              {payout.adminNote}
            </p>
          )}
          {payout.processedBy && (
            <p className="text-[11px] text-neutral-500">
              Processed by {payout.processedBy.email}
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

function StatusBadge({ value }: { value: string }) {
  const finalStatuses = ["PAID", "SUCCEEDED", "RELEASED"];
  const negativeStatuses = ["FAILED", "EXPIRED", "CANCELLED", "REJECTED"];
  const cls = finalStatuses.includes(value)
    ? "bg-emerald-100 text-emerald-800"
    : negativeStatuses.includes(value)
      ? "bg-red-100 text-red-800"
      : "bg-amber-100 text-amber-800";
  return (
    <span
      className={`inline-block rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${cls}`}
    >
      {value}
    </span>
  );
}