import {notFound} from "next/navigation";
import Link from "next/link";
import {prisma} from "@/lib/db/prisma";
import {TenantStatusToggle} from "./tenant-status-toggle";

type TenantDetailPageProps = {
  params: Promise<{tenantId: string}>;
};

export default async function TenantDetailPage({params}: TenantDetailPageProps) {
  const {tenantId} = await params;

  const tenant = await prisma.tenant.findUnique({
    where: {id: tenantId},
    include: {
      settings: true,
      _count: {
        select: {
          memberships: true,
          vehicles: true,
          bookings: true,
          invoices: true
        }
      }
    }
  });

  if (!tenant) notFound();

  const revenueResult = await prisma.paymentTransaction.aggregate({
    where: {tenantId, status: "PAID"},
    _sum: {amount: true}
  });
  const revenue = Number(revenueResult._sum.amount ?? 0);

  const fields: {label: string; value: string | null}[] = [
    {label: "Name", value: tenant.name},
    {label: "Slug", value: tenant.slug},
    {label: "Email", value: tenant.email},
    {label: "Phone", value: tenant.phone},
    {label: "Country", value: tenant.country},
    {label: "City", value: tenant.city},
    {label: "Currency", value: tenant.currency},
    {label: "Status", value: tenant.status},
    {label: "Created", value: new Date(tenant.createdAt).toLocaleString()},
    {label: "Trial Ends", value: tenant.trialEndsAt ? new Date(tenant.trialEndsAt).toLocaleDateString() : null}
  ];

  return (
    <div className="space-y-6 p-6">
      <div className="flex items-start justify-between">
        <div>
          <Link href="/super-admin/tenants" className="mb-2 inline-flex text-sm text-slate-500 hover:text-slate-700 transition">
            ← Back to Tenants
          </Link>
          <h1 className="text-2xl font-bold text-slate-900">{tenant.name}</h1>
          <p className="mt-1 font-mono text-sm text-slate-500">{tenant.slug}</p>
        </div>
        <div className="flex items-center gap-3">
          <TenantStatusToggle tenantId={tenant.id} currentStatus={tenant.status} />
          <Link
            href={`/super-admin/tenants/${tenant.id}/users`}
            className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 transition"
          >
            View Users
          </Link>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
        {[
          {label: "Members", value: tenant._count.memberships},
          {label: "Vehicles", value: tenant._count.vehicles},
          {label: "Bookings", value: tenant._count.bookings},
          {label: "Revenue", value: `${tenant.currency} ${revenue.toFixed(0)}`}
        ].map((stat) => (
          <div key={stat.label} className="rounded-2xl border border-slate-200 bg-white p-4 text-center shadow-sm">
            <p className="text-2xl font-bold text-slate-900">{stat.value}</p>
            <p className="mt-1 text-xs text-slate-500">{stat.label}</p>
          </div>
        ))}
      </div>

      {/* Fields */}
      <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 className="mb-4 font-semibold text-slate-900">Tenant Details</h2>
        <dl className="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-3">
          {fields.map((f) => (
            <div key={f.label}>
              <dt className="text-xs font-medium text-slate-500">{f.label}</dt>
              <dd className="mt-1 text-sm text-slate-900">{f.value ?? "—"}</dd>
            </div>
          ))}
        </dl>
      </div>

      {/* Quick links */}
      <div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 className="mb-4 font-semibold text-slate-900">Quick Actions</h2>
        <div className="flex flex-wrap gap-3">
          <Link
            href={`/company/${tenant.slug}`}
            target="_blank"
            className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 transition"
          >
            Open Dashboard ↗
          </Link>
          <Link
            href={`/super-admin/tenants/${tenant.id}/users`}
            className="rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 transition"
          >
            Manage Users
          </Link>
        </div>
      </div>
    </div>
  );
}