import Link from "next/link";
import {notFound, redirect} from "next/navigation";
import {auth} from "@/auth";
import {prisma} from "@/lib/db/prisma";
import {getTenantDb} from "@/lib/db/tenant";

export default async function CustomersPage({params}: {params: Promise<{tenantSlug: string; locale: string}>}) {
  const {tenantSlug, locale} = await params;
  const session = await auth();
  if (!session?.user?.id) redirect(`/${locale}/auth/sign-in`);

  const tenant = await prisma.tenant.findUnique({where: {slug: tenantSlug}});
  if (!tenant) notFound();

  const db = getTenantDb(tenant.id);
  const profiles = await db.customerProfile.findMany({
    include: {
      user: {select: {firstName: true, lastName: true, email: true, phone: true}},
      _count: {select: {bookings: true}}
    },
    orderBy: {createdAt: "desc"}
  });

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Customers</h1>
        <p className="mt-1 text-slate-500">{profiles.length} customers</p>
      </div>
      <div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm overflow-x-auto">
        <table className="min-w-full text-sm">
          <thead>
            <tr className="border-b border-slate-200">
              <th className="px-3 py-3 text-left font-semibold">Name</th>
              <th className="px-3 py-3 text-left font-semibold">Email</th>
              <th className="px-3 py-3 text-left font-semibold">Phone</th>
              <th className="px-3 py-3 text-left font-semibold">Bookings</th>
              <th className="px-3 py-3 text-left font-semibold">Status</th>
              <th className="px-3 py-3 text-left font-semibold">Actions</th>
            </tr>
          </thead>
          <tbody>
            {profiles.map((p) => {
              const name = p.user.firstName ? `${p.user.firstName} ${p.user.lastName ?? ""}` : p.user.email;
              return (
                <tr key={p.id} className="border-b border-slate-100 hover:bg-slate-50">
                  <td className="px-3 py-3">
                    <Link href={`/${locale}/company/${tenantSlug}/customers/${p.id}`} className="font-medium text-blue-600 hover:underline">
                      {name}
                    </Link>
                  </td>
                  <td className="px-3 py-3">{p.user.email}</td>
                  <td className="px-3 py-3">{p.user.phone || "—"}</td>
                  <td className="px-3 py-3 font-semibold">{p._count.bookings}</td>
                  <td className="px-3 py-3">
                    <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${p.blacklisted ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}>
                      {p.blacklisted ? "Blacklisted" : "Active"}
                    </span>
                  </td>
                  <td className="px-3 py-3">
                    <Link href={`/${locale}/company/${tenantSlug}/customers/${p.id}`}>
                      <button className="rounded-lg border border-slate-200 px-2.5 py-1 text-xs font-medium hover:bg-slate-50">View</button>
                    </Link>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}