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

export default async function AdminCountriesPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const session = await auth();
  if (!session?.user || session.user.userType !== "admin") {
    redirect("/login");
  }

  const params = await searchParams;
  const search = String(params.search ?? "");

  const countries = await prisma.country.findMany({
    where: search
      ? { name: { contains: search, mode: "insensitive" } }
      : undefined,
    orderBy: { name: "asc" },
    include: {
      continent: { select: { name: true } },
      _count: { select: { cities: true } },
    },
  });

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Country Management</h1>
        <Link
          href="/admin/countries/create"
          className="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg transition-colors text-sm"
        >
          Add Country
        </Link>
      </div>

      {/* Search */}
      <div className="bg-surface rounded-lg p-4">
        <form className="flex gap-4 items-end">
          <div className="flex-1 min-w-[200px]">
            <label className="block text-text-muted text-sm mb-1">
              Search
            </label>
            <input
              type="text"
              name="search"
              defaultValue={search}
              placeholder="Country name..."
              className="w-full bg-surface-light border border-surface-light rounded-lg px-4 py-2 text-text focus:outline-none focus:ring-1 focus:ring-primary"
            />
          </div>
          <button
            type="submit"
            className="bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-lg transition-colors"
          >
            Search
          </button>
        </form>
      </div>

      <p className="text-text-muted text-sm">
        {countries.length} countries found
      </p>

      {/* Table */}
      <div className="bg-surface rounded-lg overflow-hidden">
        <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">Name</th>
                <th className="p-4 font-medium">Slug</th>
                <th className="p-4 font-medium">A2</th>
                <th className="p-4 font-medium">Continent</th>
                <th className="p-4 font-medium">Cities</th>
                <th className="p-4 font-medium">Active</th>
                <th className="p-4 font-medium">Actions</th>
              </tr>
            </thead>
            <tbody>
              {countries.map((country) => (
                <tr
                  key={country.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">
                    {country.id}
                  </td>
                  <td className="p-4 font-medium">{country.name}</td>
                  <td className="p-4 text-text-muted text-sm">
                    {country.slug}
                  </td>
                  <td className="p-4 text-text-muted">{country.a2 || "-"}</td>
                  <td className="p-4 text-text-muted">
                    {country.continent?.name || "-"}
                  </td>
                  <td className="p-4 text-text-muted">
                    {country._count.cities}
                  </td>
                  <td className="p-4">
                    <CountryToggle
                      countryId={country.id}
                      active={country.active}
                    />
                  </td>
                  <td className="p-4">
                    <Link
                      href={`/admin/countries/edit/${country.slug}`}
                      className="text-primary hover:text-primary-dark text-sm transition-colors"
                    >
                      Edit
                    </Link>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}