import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { authOptions } from "@/lib/auth";
import { isAdminEmail } from "@/lib/admin";
import { tripService } from "@/server/services/trip.service";
import { formatRupiah } from "@/lib/utils";
import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
import { categoryMeta } from "@/lib/activity-category";
import { groupItineraryByDay } from "@/lib/itinerary";
import { AdminCancelTripButton } from "@/features/trip/components/admin-cancel-trip-button";

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

export default async function AdminTripDetailPage({ params }: PageProps) {
  const session = await getServerSession(authOptions);
  if (!session?.user) {
    redirect("/login?callbackUrl=/admin/trips");
  }
  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;
  let trip;
  try {
    trip = await tripService.getTripById(id);
  } catch {
    notFound();
  }

  const cat = categoryMeta(trip.category);

  const activeParticipants = trip.participants.filter(
    (p) => p.status !== "CANCELLED"
  );
  const confirmedCount = activeParticipants.filter(
    (p) => p.status === "CONFIRMED"
  ).length;
  const pendingCount = activeParticipants.filter(
    (p) => p.status === "PENDING"
  ).length;
  const cancelledCount = trip.participants.length - activeParticipants.length;

  const grouped = trip.itineraryItems.length
    ? groupItineraryByDay(
        trip.itineraryItems.map((i) => ({
          day: i.day,
          startTime: i.startTime,
          endTime: i.endTime,
          activity: i.activity,
          order: i.order,
        }))
      )
    : null;

  const canCancel = trip.status === "OPEN" || trip.status === "FULL";

  return (
    <div className="mx-auto max-w-5xl px-4 py-8 sm:py-12">
      <div className="mb-4 text-xs text-neutral-500">
        <Link href="/admin/trips" className="hover:text-primary-600">
          ← Kembali ke list trips
        </Link>
      </div>

      <header className="mb-6 rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm sm:p-6">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div className="min-w-0 flex-1">
            <div className="mb-2 flex flex-wrap items-center gap-2 text-[11px]">
              <span className="inline-flex items-center gap-1 rounded-full bg-neutral-100 px-2 py-0.5 font-semibold text-neutral-600">
                <span aria-hidden>{cat.icon}</span> {cat.label}
              </span>
              <StatusBadge status={trip.status} />
            </div>
            <h1 className="text-xl font-bold text-neutral-900 sm:text-2xl">
              {trip.title}
            </h1>
            <p className="mt-1 text-sm text-neutral-500">
              📅 {formatTripCalendarDateRangeLong(trip.date, trip.endDate)} ·
              📍 {trip.destination}, {trip.location}
            </p>
            <p className="mt-1 text-xs text-neutral-500">
              Organizer:{" "}
              <Link
                href={`/u/${trip.organizer.id}`}
                className="font-semibold text-neutral-700 hover:text-primary-600"
                target="_blank"
              >
                {trip.organizer.name}
              </Link>{" "}
              <span className="text-neutral-400">({trip.organizer.email})</span>
            </p>
            <p className="mt-1 text-xs text-neutral-500">
              Trip ID:{" "}
              <code className="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[11px] text-neutral-700">
                {trip.id}
              </code>
            </p>
          </div>
          <div className="shrink-0 text-right">
            <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
              Harga
            </p>
            <p className="text-xl font-bold text-primary-700 sm:text-2xl">
              {formatRupiah(trip.price)}
            </p>
            <p className="text-[11px] text-neutral-500">per orang</p>
          </div>
        </div>
      </header>

      <section className="mb-6 grid gap-3 sm:grid-cols-4">
        <StatCard label="Kapasitas" value={String(trip.maxParticipants)} />
        <StatCard
          label="Confirmed"
          value={String(confirmedCount)}
          accent="emerald"
        />
        <StatCard
          label="Pending"
          value={String(pendingCount)}
          accent="amber"
        />
        <StatCard
          label="Cancelled"
          value={String(cancelledCount)}
          accent="neutral"
        />
      </section>

      {canCancel && (
        <section className="mb-6 rounded-2xl border border-red-200 bg-red-50/60 p-4 sm:p-5">
          <h2 className="text-sm font-bold text-red-900">
            Intervensi Admin — Cancel Trip
          </h2>
          <p className="mt-1 text-xs text-red-900/80">
            Pakai hanya saat organizer unreachable, safety issue, atau dispute
            tidak terselesaikan. Semua booking PAID akan auto-refund (full
            amount). Booking PENDING/AWAITING_PAY langsung CANCELLED.
          </p>
          <div className="mt-3">
            <AdminCancelTripButton tripId={trip.id} />
          </div>
        </section>
      )}

      {trip.description && (
        <section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
          <h2 className="mb-2 text-xs font-bold uppercase tracking-wide text-neutral-500">
            Deskripsi
          </h2>
          <p className="whitespace-pre-wrap text-sm text-neutral-700">
            {trip.description}
          </p>
        </section>
      )}

      {grouped && (
        <section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
          <h2 className="mb-3 text-xs font-bold uppercase tracking-wide text-neutral-500">
            Itinerary
          </h2>
          <div className="space-y-3">
            {[...grouped.entries()].map(([day, items]) => (
              <div
                key={day}
                className="rounded-lg border border-primary-100 bg-primary-50/40 p-3"
              >
                <p className="mb-1.5 text-xs font-bold text-primary-800">
                  Hari {day}
                </p>
                <ol className="space-y-1">
                  {items.map((item) => (
                    <li
                      key={item.order}
                      className="flex gap-3 text-xs text-neutral-700"
                    >
                      <span className="shrink-0 font-mono text-[11px] font-semibold text-primary-700">
                        {item.startTime}
                        {item.endTime ? `–${item.endTime}` : ""}
                      </span>
                      <span>{item.activity}</span>
                    </li>
                  ))}
                </ol>
              </div>
            ))}
          </div>
        </section>
      )}

      <section className="mb-6 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-5">
        <h2 className="mb-3 text-xs font-bold uppercase tracking-wide text-neutral-500">
          Peserta ({activeParticipants.length})
        </h2>
        {trip.participants.length === 0 ? (
          <p className="text-xs text-neutral-500">Belum ada peserta.</p>
        ) : (
          <ul className="divide-y divide-neutral-100">
            {trip.participants.map((p) => (
              <li
                key={p.id}
                className="flex flex-wrap items-center justify-between gap-2 py-2.5"
              >
                <div className="min-w-0 flex-1">
                  <Link
                    href={`/u/${p.user.id}`}
                    target="_blank"
                    className="text-sm font-semibold text-neutral-800 hover:text-primary-600"
                  >
                    {p.user.name}
                  </Link>
                  {p.user.profile?.city && (
                    <span className="ml-2 text-[11px] text-neutral-500">
                      📍 {p.user.profile.city}
                    </span>
                  )}
                </div>
                <ParticipantStatusBadge status={p.status} />
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}

function StatusBadge({ status }: { status: string }) {
  const cls =
    status === "OPEN"
      ? "bg-emerald-100 text-emerald-800"
      : status === "FULL"
        ? "bg-amber-100 text-amber-800"
        : status === "CLOSED"
          ? "bg-red-100 text-red-800"
          : "bg-neutral-200 text-neutral-700";
  return (
    <span
      className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${cls}`}
    >
      {status}
    </span>
  );
}

function ParticipantStatusBadge({ status }: { status: string }) {
  const cls =
    status === "CONFIRMED"
      ? "bg-emerald-100 text-emerald-800"
      : status === "PENDING"
        ? "bg-amber-100 text-amber-800"
        : "bg-neutral-200 text-neutral-600 line-through";
  return (
    <span
      className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${cls}`}
    >
      {status}
    </span>
  );
}

function StatCard({
  label,
  value,
  accent = "primary",
}: {
  label: string;
  value: string;
  accent?: "primary" | "emerald" | "amber" | "neutral";
}) {
  const map = {
    primary: "text-primary-700",
    emerald: "text-emerald-700",
    amber: "text-amber-700",
    neutral: "text-neutral-700",
  };
  return (
    <div className="rounded-xl border border-neutral-200 bg-white p-3 sm:p-4">
      <p className="text-[10px] font-semibold uppercase tracking-wide text-neutral-500">
        {label}
      </p>
      <p className={`mt-0.5 text-xl font-bold sm:text-2xl ${map[accent]}`}>
        {value}
      </p>
    </div>
  );
}