import type { Metadata } from "next";
import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { tripService } from "@/server/services/trip.service";
import { organizerService } from "@/server/services/organizer.service";
import { bookingService } from "@/server/services/booking.service";
import { formatRupiah } from "@/lib/utils";
import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
import { isFreeTrip } from "@/lib/trip-pricing";
import { categoryMeta } from "@/lib/activity-category";
import { MarkPaidButton } from "@/features/booking/components/mark-paid-button";
import { CopyButton } from "@/features/booking/components/copy-button";

export const metadata: Metadata = {
  title: "Detail Pembayaran",
  robots: { index: false, follow: false },
};

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

export default async function PaymentPage({ params }: PageProps) {
  const { id } = await params;
  const session = await getServerSession(authOptions);
  if (!session?.user) {
    redirect(`/login?callbackUrl=/trips/${id}/payment`);
  }

  let trip;
  try {
    trip = await tripService.getTripById(id);
  } catch {
    notFound();
  }

  // Organizer trip-nya sendiri tidak butuh halaman pembayaran.
  if (trip.organizerId === session.user.id) {
    redirect(`/trips/${id}`);
  }

  const booking = await bookingService.getByTripAndUser(
    trip.id,
    session.user.id
  );

  if (!booking || booking.status === "CANCELLED") {
    return <NotJoinedNotice tripId={trip.id} title={trip.title} />;
  }

  const latestManualPayment = booking.payments.find(
    (p) => p.provider === "MANUAL"
  );

  const tripIsFree = isFreeTrip(trip);
  const catMeta = categoryMeta(trip.category);
  const dateRange = formatTripCalendarDateRangeLong(trip.date, trip.endDate);

  // Header info — sama untuk free vs paid
  const tripHeader = (
    <section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
      <div className="flex items-start gap-3">
        <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-neutral-100 text-xl">
          {catMeta.icon}
        </span>
        <div className="min-w-0 flex-1">
          <p className="text-[11px] font-semibold uppercase tracking-wide text-neutral-500">
            {catMeta.label}
          </p>
          <h1 className="mt-0.5 truncate text-base font-bold text-neutral-900 sm:text-lg">
            {trip.title}
          </h1>
          <p className="mt-1 text-xs text-neutral-500 sm:text-sm">
            📅 {dateRange} · 📍 {trip.location}
          </p>
          <p className="mt-1 text-xs text-neutral-500 sm:text-sm">
            Organizer:{" "}
            <Link
              href={`/u/${trip.organizer.id}`}
              className="font-medium text-neutral-700 hover:text-primary-600"
            >
              {trip.organizer.name}
            </Link>
          </p>
        </div>
      </div>
    </section>
  );

  return (
    <div className="mx-auto max-w-2xl px-4 py-6 sm:py-10">
      <div className="mb-4 flex items-center gap-2 text-xs text-neutral-500 sm:text-sm">
        <Link href={`/trips/${trip.id}`} className="hover:text-primary-600">
          ← Kembali ke trip
        </Link>
      </div>

      <h2 className="mb-1 text-xl font-bold text-neutral-900 sm:text-2xl">
        Detail Pembayaran
      </h2>
      <p className="mb-5 text-sm text-neutral-500">
        {tripIsFree
          ? "Trip ini gratis — kamu tidak perlu transfer apa-apa."
          : "Transfer manual ke rekening organizer di bawah, lalu tandai sebagai sudah bayar."}
      </p>

      {tripHeader}

      {tripIsFree ? (
        <FreeTripSection
          tripId={trip.id}
          bookingStatus={booking.status}
        />
      ) : (
        <PaidTripSection
          tripId={trip.id}
          organizerId={trip.organizerId}
          organizerName={trip.organizer.name}
          price={trip.price}
          bookingStatus={booking.status}
          paymentMarkedAt={
            latestManualPayment?.status === "AWAITING"
              ? latestManualPayment.updatedAt
              : null
          }
          paymentPaidAt={latestManualPayment?.paidAt ?? null}
        />
      )}
    </div>
  );
}

function NotJoinedNotice({ tripId, title }: { tripId: string; title: string }) {
  return (
    <div className="mx-auto max-w-2xl px-4 py-12 text-center">
      <h1 className="mb-2 text-xl font-bold text-neutral-900 sm:text-2xl">
        Kamu belum terdaftar di trip ini
      </h1>
      <p className="mb-5 text-sm text-neutral-500">
        Halaman pembayaran hanya tersedia untuk peserta trip{" "}
        <span className="font-semibold text-neutral-700">{title}</span>.
      </p>
      <Link
        href={`/trips/${tripId}`}
        className="inline-block rounded-xl bg-primary-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-primary-700"
      >
        Lihat detail trip
      </Link>
    </div>
  );
}

function FreeTripSection({
  tripId,
  bookingStatus,
}: {
  tripId: string;
  bookingStatus: "PENDING" | "AWAITING_PAY" | "PAID" | "CANCELLED" | "REFUNDED" | "EXPIRED";
}) {
  return (
    <section className="rounded-2xl border border-emerald-200 bg-emerald-50/60 p-6 text-center shadow-sm sm:p-8">
      <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-100 text-2xl">
        🎉
      </div>
      <h2 className="mb-1 text-lg font-bold text-emerald-900 sm:text-xl">
        Trip ini gratis
      </h2>
      <p className="mb-5 text-sm text-emerald-900/80">
        Tidak ada biaya yang perlu kamu transfer.
      </p>

      <div className="mx-auto inline-flex flex-col gap-1 rounded-xl border border-emerald-200 bg-white px-5 py-3 text-left">
        <p className="text-[11px] font-semibold uppercase tracking-wide text-emerald-700">
          Status keikutsertaan
        </p>
        <p className="text-sm font-bold text-neutral-800">
          {bookingStatus === "PAID"
            ? "✅ Terkonfirmasi sebagai peserta"
            : "⏳ Menunggu persetujuan organizer"}
        </p>
      </div>

      <div className="mt-6">
        <Link
          href={`/trips/${tripId}`}
          className="inline-block rounded-xl bg-emerald-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-emerald-700"
        >
          Kembali ke detail trip
        </Link>
      </div>
    </section>
  );
}

async function PaidTripSection({
  tripId,
  organizerId,
  organizerName,
  price,
  bookingStatus,
  paymentMarkedAt,
  paymentPaidAt,
}: {
  tripId: string;
  organizerId: string;
  organizerName: string;
  price: number;
  bookingStatus: "PENDING" | "AWAITING_PAY" | "PAID" | "CANCELLED" | "REFUNDED" | "EXPIRED";
  paymentMarkedAt: Date | null;
  paymentPaidAt: Date | null;
}) {
  const verification = await organizerService.getStatusForUser(organizerId);
  const bankAvailable = verification?.status === "APPROVED";

  const isApproved = bookingStatus === "AWAITING_PAY" || bookingStatus === "PAID";
  const isPendingApproval = bookingStatus === "PENDING";
  const hasMarkedPaid = !!paymentMarkedAt || !!paymentPaidAt;
  const isFullyPaid = bookingStatus === "PAID";
  const canMarkPaid = bookingStatus === "AWAITING_PAY" && !paymentMarkedAt;

  return (
    <div className="space-y-5">
      <PaymentTimeline
        approved={isApproved}
        markedPaid={hasMarkedPaid}
        confirmedPaid={isFullyPaid}
      />

      {!bankAvailable && (
        <div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
          <p className="font-semibold">Rekening organizer belum tersedia</p>
          <p className="mt-1 text-amber-800/90">
            Organizer trip ini belum melengkapi data verifikasi (bank). Hubungi
            organizer langsung lewat profilnya untuk koordinasi pembayaran.
          </p>
        </div>
      )}

      {bankAvailable && (
        <section className="rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
          <h3 className="mb-1 text-sm font-bold text-neutral-900 sm:text-base">
            Transfer ke rekening organizer
          </h3>
          <p className="mb-4 text-xs text-neutral-500 sm:text-sm">
            Pastikan nominal persis seperti tercantum supaya organizer mudah
            mencocokkan.
          </p>

          <div className="space-y-3 rounded-xl bg-neutral-50 p-4 sm:p-5">
            <BankRow
              label="Bank"
              value={verification.bankName}
              copyable
            />
            <BankRow
              label="Nomor rekening"
              value={verification.bankAccountNumber}
              copyable
              mono
            />
            <BankRow
              label="Atas nama"
              value={verification.bankAccountName}
            />
            <div className="mt-2 border-t border-neutral-200 pt-3">
              <BankRow
                label="Nominal transfer"
                value={formatRupiah(price)}
                strong
                copyable
                copyValue={String(price)}
              />
            </div>
          </div>

          <ul className="mt-4 space-y-1.5 text-[11px] text-neutral-500 sm:text-xs">
            <li>• Transfer dengan nominal pas, jangan dibulatkan.</li>
            <li>• Simpan bukti transfer untuk jaga-jaga jika ada konfirmasi.</li>
            <li>
              • Setelah transfer, tekan tombol <em>Saya sudah bayar</em> di bawah
              supaya organizer tahu dan bisa konfirmasi.
            </li>
          </ul>
        </section>
      )}

      {isPendingApproval && (
        <div className="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
          Kamu belum disetujui organizer untuk ikut trip ini. Tunggu persetujuan
          dulu sebelum transfer — supaya tidak perlu refund kalau ditolak.
        </div>
      )}

      {canMarkPaid && bankAvailable && (
        <MarkPaidButton tripId={tripId} />
      )}

      {hasMarkedPaid && (
        <div className="rounded-2xl border border-neutral-200 bg-white p-4 text-sm text-neutral-600 shadow-sm sm:p-5">
          {isFullyPaid ? (
            <p>
              ✅ Pembayaran kamu sudah dikonfirmasi oleh{" "}
              <span className="font-semibold text-neutral-800">
                {organizerName}
              </span>
              . Sampai jumpa di trip!
            </p>
          ) : (
            <p>
              ⏳ Kamu sudah menandai sudah bayar. Menunggu organizer mengecek
              dan mengonfirmasi.
            </p>
          )}
        </div>
      )}

      <div className="text-center">
        <Link
          href={`/trips/${tripId}`}
          className="text-sm text-neutral-500 hover:text-primary-600"
        >
          ← Kembali ke detail trip
        </Link>
      </div>
    </div>
  );
}

function PaymentTimeline({
  approved,
  markedPaid,
  confirmedPaid,
}: {
  approved: boolean;
  markedPaid: boolean;
  confirmedPaid: boolean;
}) {
  const steps = [
    { label: "Disetujui organizer", done: approved },
    { label: "Kamu menandai sudah bayar", done: markedPaid },
    { label: "Organizer konfirmasi pembayaran", done: confirmedPaid },
  ];

  return (
    <section className="rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
      <h3 className="mb-3 text-xs font-bold text-neutral-700 sm:text-sm">
        Status pembayaran
      </h3>
      <ol className="space-y-2.5">
        {steps.map((s, i) => (
          <li key={i} className="flex items-start gap-3">
            <span
              className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[11px] font-bold ${
                s.done
                  ? "bg-emerald-500 text-white"
                  : "bg-neutral-200 text-neutral-500"
              }`}
            >
              {s.done ? "✓" : i + 1}
            </span>
            <span
              className={`text-sm ${
                s.done
                  ? "font-semibold text-neutral-800"
                  : "text-neutral-500"
              }`}
            >
              {s.label}
            </span>
          </li>
        ))}
      </ol>
    </section>
  );
}

function BankRow({
  label,
  value,
  mono,
  strong,
  copyable,
  copyValue,
}: {
  label: string;
  value: string;
  mono?: boolean;
  strong?: boolean;
  copyable?: boolean;
  copyValue?: string;
}) {
  return (
    <div className="flex items-center justify-between gap-3">
      <div className="min-w-0">
        <p className="text-[11px] font-semibold uppercase tracking-wide text-neutral-500">
          {label}
        </p>
        <p
          className={`mt-0.5 truncate text-sm text-neutral-800 ${
            mono ? "font-mono" : ""
          } ${strong ? "text-base font-bold text-primary-700" : ""}`}
        >
          {value}
        </p>
      </div>
      {copyable && <CopyButton value={copyValue ?? value} />}
    </div>
  );
}