import Link from "next/link";
import { prisma } from "@/lib/prisma";
import { requireUser } from "@/lib/auth";
import { acceptTransfer, cancelTransfer, declineTransfer } from "@/app/transfers/actions";

function horseName(h: { registeredName: string | null; barnName: string | null } | null | undefined) {
  if (!h) return "Unknown Horse";
  return h.registeredName || h.barnName || "Unnamed Horse";
}

function fmt(d: Date | null): string {
  return d ? new Date(d).toLocaleDateString() : "—";
}

const STATUS_COLORS: Record<string, { bg: string; border: string; text: string }> = {
  PENDING: { bg: "bg-amber-100 dark:bg-amber-900", border: "border-amber-300 dark:border-amber-700", text: "text-amber-800 dark:text-amber-300" },
  ACCEPTED: { bg: "bg-emerald-100 dark:bg-emerald-900", border: "border-emerald-300 dark:border-emerald-700", text: "text-emerald-800 dark:text-emerald-300" },
  DECLINED: { bg: "bg-red-100 dark:bg-red-900", border: "border-red-300 dark:border-red-700", text: "text-red-800 dark:text-red-300" },
  CANCELLED: { bg: "bg-neutral-100 dark:bg-neutral-900", border: "border-neutral-300 dark:border-neutral-700", text: "text-neutral-600 dark:text-neutral-400" },
};

export default async function TransfersPage() {
  const user = await requireUser();

  const [incoming, outgoing, history] = await Promise.all([
    prisma.horseTransfer.findMany({
      where: { toUserId: user.id, status: "PENDING" },
      include: { horse: true, fromUser: true },
      orderBy: { requestedAt: "desc" },
    }),
    prisma.horseTransfer.findMany({
      where: { fromUserId: user.id, status: "PENDING" },
      include: { horse: true, toUser: true },
      orderBy: { requestedAt: "desc" },
    }),
    prisma.horseTransfer.findMany({
      where: { OR: [{ fromUserId: user.id }, { toUserId: user.id }], status: { not: "PENDING" } },
      include: { horse: true, fromUser: true, toUser: true },
      orderBy: { respondedAt: "desc" },
      take: 15,
    }),
  ]);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold">Transfers</h1>

      <section className="space-y-4 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
        <h2 className="text-base font-semibold">Incoming ({incoming.length})</h2>
        {incoming.length === 0 ? (
          <p className="text-sm text-neutral-700 dark:text-neutral-300">No pending transfers to you.</p>
        ) : (
          <ul className="space-y-3">
            {incoming.map((t) => (
              <li key={t.id} className="flex items-center justify-between gap-3 rounded-md border border-neutral-100 dark:border-neutral-800 p-3">
                <div className="text-sm">
                  <Link href={`/horses/${t.horseId}`} className="font-medium hover:underline">
                    {horseName(t.horse)}
                  </Link>
                  <p className="text-neutral-600 dark:text-neutral-400">
                    from <span className="font-medium text-neutral-900 dark:text-neutral-200">{t.fromUser.name}</span> ({t.fromUser.email})
                    {t.fromUser.farmName ? ` · ${t.fromUser.farmName}` : ""} · requested {fmt(t.requestedAt)}
                    {t.notes ? ` — "${t.notes}"` : ""}
                  </p>
                </div>
                <div className="flex shrink-0 gap-2">
                  <form action={acceptTransfer.bind(null, t.id)}>
                    <button type="submit" className="rounded-md bg-neutral-900 dark:bg-neutral-100 dark:text-neutral-900 px-3 py-1.5 text-xs font-medium text-white hover:bg-neutral-800 dark:hover:bg-neutral-200">
                      Accept
                    </button>
                  </form>
                  <form action={declineTransfer.bind(null, t.id)}>
                    <button type="submit" className="rounded-md border border-neutral-300 dark:border-neutral-700 px-3 py-1.5 text-xs font-medium hover:bg-neutral-50 hover:dark:bg-neutral-950">
                      Decline
                    </button>
                  </form>
                </div>
              </li>
            ))}
          </ul>
        )}
      </section>

      <section className="space-y-4 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
        <h2 className="text-base font-semibold">Outgoing ({outgoing.length})</h2>
        {outgoing.length === 0 ? (
          <p className="text-sm text-neutral-700 dark:text-neutral-300">No pending transfers sent by you.</p>
        ) : (
          <ul className="space-y-3">
            {outgoing.map((t) => (
              <li key={t.id} className="flex items-center justify-between gap-3 rounded-md border border-neutral-100 dark:border-neutral-800 p-3">
                <div className="text-sm">
                  <Link href={`/horses/${t.horseId}`} className="font-medium hover:underline">
                    {horseName(t.horse)}
                  </Link>
                  <p className="text-neutral-600 dark:text-neutral-400">
                    to {t.toUser.name} · requested {fmt(t.requestedAt)} · awaiting their acceptance
                  </p>
                </div>
                <form action={cancelTransfer.bind(null, t.id)}>
                  <button type="submit" className="rounded-md border border-neutral-300 dark:border-neutral-700 px-3 py-1.5 text-xs font-medium hover:bg-neutral-50 hover:dark:bg-neutral-950">
                    Cancel
                  </button>
                </form>
              </li>
            ))}
          </ul>
        )}
      </section>

      {history.length > 0 && (
        <section className="space-y-3 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-6">
          <h2 className="text-base font-semibold">Recent History</h2>
          <ul className="space-y-1.5 text-sm">
            {history.map((t) => {
              const c = STATUS_COLORS[t.status];
              return (
                <li key={t.id} className="flex items-center justify-between gap-2">
                  <span>
                    <Link href={`/horses/${t.horseId}`} className="font-medium hover:underline">
                      {horseName(t.horse)}
                    </Link>
                    <span className="text-neutral-600 dark:text-neutral-400"> — {t.fromUser.name} → {t.toUser.name}</span>
                  </span>
                  <span className={`shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium ${c.bg} ${c.border} ${c.text}`}>
                    {t.status} {fmt(t.respondedAt)}
                  </span>
                </li>
              );
            })}
          </ul>
        </section>
      )}
    </div>
  );
}