import { auth } from "@/auth";
import { db } from "@/lib/db";
import { hasPermission } from "@/lib/permissions";
import { redirect } from "next/navigation";
import Link from "next/link";
import { AddSiteButton, EditSiteButton } from "./site-form";
import { ConfirmDeleteButton } from "@/components/ui/confirm-delete-button";
import { deleteSite } from "./actions";
import type { Metadata } from "next";

export const metadata: Metadata = { title: "Sites" };

export default async function SitesPage() {
  const session = await auth();
  if (!session?.user) redirect("/login");
  if (!hasPermission(session.user.role, "manage_sites")) redirect("/dashboard");

  const sites = await db.site.findMany({
    orderBy: { name: "asc" },
    include: {
      _count: { select: { vessels: true, inventory: true } },
    },
  });

  const canEdit = session.user.role === "ADMIN";

  return (
    <div>
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold text-neutral-900">Sites</h1>
          <p className="text-sm text-neutral-500 mt-0.5">Ports, depots and offices with inventory</p>
        </div>
        {canEdit && <AddSiteButton />}
      </div>

      <div className="rounded-lg border border-neutral-200 bg-white overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-neutral-50 border-b border-neutral-200">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Name</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Code</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Address</th>
              <th className="px-4 py-3 text-right font-medium text-neutral-600">Cost Centres</th>
              <th className="px-4 py-3 text-right font-medium text-neutral-600">Items tracked</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Location</th>
              <th className="px-4 py-3 text-left font-medium text-neutral-600">Status</th>
              {canEdit && <th className="px-4 py-3"></th>}
            </tr>
          </thead>
          <tbody className="divide-y divide-neutral-100">
            {sites.length === 0 && (
              <tr>
                <td colSpan={canEdit ? 8 : 7} className="px-4 py-8 text-center text-neutral-400">
                  No sites yet. Add your first port, depot or office.
                </td>
              </tr>
            )}
            {sites.map((site) => (
              <tr key={site.id} className="hover:bg-neutral-50">
                <td className="px-4 py-3">
                  <Link href={`/admin/sites/${site.id}`} className="font-medium text-primary-600 hover:underline">
                    {site.name}
                  </Link>
                </td>
                <td className="px-4 py-3 font-mono text-xs text-neutral-500">{site.code}</td>
                <td className="px-4 py-3 text-neutral-500 max-w-xs truncate">{site.address ?? <span className="italic text-neutral-400">—</span>}</td>
                <td className="px-4 py-3 text-right text-neutral-600">{site._count.vessels || <span className="text-neutral-400">—</span>}</td>
                <td className="px-4 py-3 text-right text-neutral-600">{site._count.inventory || <span className="text-neutral-400">—</span>}</td>
                <td className="px-4 py-3 text-xs text-neutral-500">
                  {site.latitude && site.longitude
                    ? `${site.latitude.toFixed(4)}, ${site.longitude.toFixed(4)}`
                    : <span className="italic text-neutral-400">Not set</span>}
                </td>
                <td className="px-4 py-3">
                  <span className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${site.isActive ? "bg-success-100 text-success-700" : "bg-neutral-100 text-neutral-500"}`}>
                    {site.isActive ? "Active" : "Inactive"}
                  </span>
                </td>
                {canEdit && (
                  <td className="px-4 py-3">
                    <span className="flex items-center gap-3">
                      <EditSiteButton site={{ id: site.id, name: site.name, code: site.code, address: site.address, latitude: site.latitude, longitude: site.longitude, isActive: site.isActive }} />
                      <ConfirmDeleteButton onDelete={deleteSite.bind(null, site.id)} label={site.name} />
                    </span>
                  </td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}