import prisma from "@/lib/prisma";
import { auth } from "@/lib/auth";
import { redirect, notFound } from "next/navigation";
import Link from "next/link";
import { AgencyLinkEscortForm } from "./AgencyLinkEscortForm";

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

export default async function AdminAgencyDetailPage({ params }: Props) {
  const session = await auth();
  if (!session?.user || session.user.userType !== "admin") {
    redirect("/login");
  }

  const { id } = await params;
  const agencyId = parseInt(id);

  const agency = await prisma.user.findFirst({
    where: { id: agencyId, is_agency: true },
  });

  if (!agency) {
    notFound();
  }

  // Get escorts in the same city (placeholder for proper agency-escort linking)
  const escorts = agency.city_id
    ? await prisma.user.findMany({
        where: {
          city_id: agency.city_id,
          user_type: "escort",
          is_agency: false,
        },
        select: {
          id: true,
          username: true,
          email: true,
          active: true,
          is_verified: true,
          created_at: true,
        },
        orderBy: { created_at: "desc" },
        take: 100,
      })
    : [];

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <Link
          href="/admin/agencies"
          className="text-text-muted hover:text-white transition-colors"
        >
          &larr; Back
        </Link>
        <h1 className="text-2xl font-bold">
          Agency: {agency.username || agency.email}
        </h1>
      </div>

      {/* Agency info card */}
      <div className="bg-surface rounded-lg p-6 grid grid-cols-2 md:grid-cols-4 gap-4">
        <div>
          <p className="text-text-muted text-xs uppercase tracking-wider mb-1">
            ID
          </p>
          <p className="font-mono">{agency.id}</p>
        </div>
        <div>
          <p className="text-text-muted text-xs uppercase tracking-wider mb-1">
            Email
          </p>
          <p className="text-sm">{agency.email}</p>
        </div>
        <div>
          <p className="text-text-muted text-xs uppercase tracking-wider mb-1">
            City ID
          </p>
          <p>{agency.city_id ?? "—"}</p>
        </div>
        <div>
          <p className="text-text-muted text-xs uppercase tracking-wider mb-1">
            Status
          </p>
          <span
            className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${
              agency.active
                ? "bg-green-500/20 text-green-400"
                : "bg-red-500/20 text-red-400"
            }`}
          >
            {agency.active ? "Active" : "Inactive"}
          </span>
        </div>
      </div>

      {/* Link escort form */}
      <div className="bg-surface rounded-lg p-6">
        <h2 className="text-lg font-semibold mb-4">Link Escort to Agency</h2>
        <p className="text-text-muted text-sm mb-4">
          Note: A proper agency-escort join table is needed. Currently showing
          escorts in the same city as a placeholder.
        </p>
        <AgencyLinkEscortForm agencyId={agency.id} agencyCityId={agency.city_id} />
      </div>

      {/* Escorts table */}
      <div className="bg-surface rounded-lg overflow-hidden">
        <div className="p-4 border-b border-surface-light">
          <h2 className="text-lg font-semibold">
            Escorts in Same City ({escorts.length})
          </h2>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead>
              <tr className="border-b border-surface-light text-text-muted text-sm">
                <th className="p-4 font-medium">ID</th>
                <th className="p-4 font-medium">Username</th>
                <th className="p-4 font-medium">Email</th>
                <th className="p-4 font-medium">Verified</th>
                <th className="p-4 font-medium">Status</th>
                <th className="p-4 font-medium">Actions</th>
              </tr>
            </thead>
            <tbody>
              {escorts.length === 0 && (
                <tr>
                  <td
                    colSpan={6}
                    className="p-8 text-center text-text-muted"
                  >
                    No escorts found in this city
                  </td>
                </tr>
              )}
              {escorts.map((escort) => (
                <tr
                  key={escort.id}
                  className="border-b border-surface-light last:border-0 hover:bg-surface-light/50"
                >
                  <td className="p-4 text-text-muted font-mono text-sm">
                    {escort.id}
                  </td>
                  <td className="p-4 font-medium">
                    {escort.username || "—"}
                  </td>
                  <td className="p-4 text-text-muted text-sm">
                    {escort.email}
                  </td>
                  <td className="p-4">
                    <span
                      className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${
                        escort.is_verified
                          ? "bg-green-500/20 text-green-400"
                          : "bg-yellow-500/20 text-yellow-400"
                      }`}
                    >
                      {escort.is_verified ? "Yes" : "No"}
                    </span>
                  </td>
                  <td className="p-4">
                    <span
                      className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${
                        escort.active
                          ? "bg-green-500/20 text-green-400"
                          : "bg-red-500/20 text-red-400"
                      }`}
                    >
                      {escort.active ? "Active" : "Inactive"}
                    </span>
                  </td>
                  <td className="p-4">
                    <Link
                      href={`/admin/users?search=${escort.email}`}
                      className="text-primary hover:text-primary-dark text-sm transition-colors"
                    >
                      View User
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}