"use client";

import Link from "next/link";
import AdminShell from "@/shared/AdminShell";
import { useAppSelector } from "@/core/hook";
import {
  useReservationStatsQuery,
  type ReservationStatus,
} from "@/services/reservation-service";
import { getApiErrorMessage } from "@/utils/apiError";

const STAT_CARDS: Array<{ key: ReservationStatus; label: string }> = [
  { key: "new", label: "New" },
  { key: "confirmed", label: "Confirmed" },
  { key: "completed", label: "Completed" },
  { key: "cancelled", label: "Cancelled" },
];

export default function AdminDashboardPage() {
  const admin = useAppSelector((s) => s.auth.admin);
  const { data: stats, error } = useReservationStatsQuery();
  const errorMsg = error ? getApiErrorMessage(error, "Failed to load stats") : "";

  return (
    <AdminShell>
      <div className="mb-10">
        <p className="text-[10px] uppercase tracking-[0.3em] text-[#d6ac63]">
          Dashboard
        </p>
        <h1 className="mt-2 text-2xl lg:text-3xl font-light text-black">
          Welcome back, {admin?.fullname.split(" ")[0]}
        </h1>
        <p className="mt-2 text-sm text-gray-600 font-light">
          Here&apos;s a quick look at your reservations.
        </p>
      </div>

      {errorMsg ? <p className="text-sm text-red-500 mb-6">{errorMsg}</p> : null}

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-10">
        <StatCard label="Total" value={stats?.total ?? 0} highlight />
        {STAT_CARDS.map((card) => (
          <StatCard
            key={card.key}
            label={card.label}
            value={stats?.byStatus[card.key] ?? 0}
          />
        ))}
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Link
          href="/admin/reservations"
          className="block border border-[#d6ac63]/20 bg-white px-6 py-5 hover:border-[#d6ac63] transition-colors"
        >
          <p className="text-[10px] uppercase tracking-[0.25em] text-[#d6ac63]">
            Manage
          </p>
          <h3 className="mt-1 text-base font-light text-black">All reservations</h3>
          <p className="mt-1 text-xs text-gray-500 font-light">
            Review, confirm and update guest reservations.
          </p>
        </Link>
        <Link
          href="/admin/users"
          className="block border border-[#d6ac63]/20 bg-white px-6 py-5 hover:border-[#d6ac63] transition-colors"
        >
          <p className="text-[10px] uppercase tracking-[0.25em] text-[#d6ac63]">
            Manage
          </p>
          <h3 className="mt-1 text-base font-light text-black">Admin users</h3>
          <p className="mt-1 text-xs text-gray-500 font-light">
            Invite, deactivate and manage admin roles.
          </p>
        </Link>
      </div>
    </AdminShell>
  );
}

function StatCard({
  label,
  value,
  highlight,
}: {
  label: string;
  value: number;
  highlight?: boolean;
}) {
  return (
    <div
      className={`border bg-white px-6 py-5 ${
        highlight ? "border-[#d6ac63]" : "border-[#d6ac63]/20"
      }`}
    >
      <p className="text-[10px] uppercase tracking-[0.25em] text-gray-500">
        {label}
      </p>
      <p className="mt-2 text-3xl font-light text-black">{value}</p>
    </div>
  );
}