import Link from "next/link";
import { notFound } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { requireCrmAdmin } from "@/lib/crm/admin-access";
import CustomerAdminShell from "../../CustomerAdminShell";
import {
  issueInvoice,
  updateInvoiceLifecycle,
} from "../actions";

export const dynamic = "force-dynamic";

export default async function InvoiceDetailsPage({
  params,
}: {
  params: Promise<{ invoiceNumber: string }>;
}) {
  await requireCrmAdmin();

  const { invoiceNumber } = await params;

  const invoice = await prisma.invoice.findUnique({
    where: { invoiceNumber },
    select: {
      invoiceNumber: true,
      status: true,
      subtotal: true,
      taxAmount: true,
      discountAmount: true,
      totalAmount: true,
      amountPaid: true,
      client: {
        select: { name: true, clientCode: true },
      },
      items: {
        orderBy: { sequence: "asc" },
        select: {
          description: true,
          quantity: true,
          unitPrice: true,
          taxRate: true,
        },
      },
      payments: {
        orderBy: { createdAt: "desc" },
        select: {
          paymentCode: true,
          amount: true,
          status: true,
          method: true,
        },
      },
    },
  });

  if (!invoice) {
    notFound();
  }

  const balance = invoice.totalAmount.sub(invoice.amountPaid);

  return (
    <CustomerAdminShell>
      <main className="mx-auto max-w-5xl space-y-7 px-5 py-8">
        <Link href="/admin/invoices" className="text-blue-600">
          ← All Invoices
        </Link>

        <h1 className="text-3xl font-bold">
          Invoice {invoice.invoiceNumber}
        </h1>

        <p>
          Customer: {invoice.client.name} ({invoice.client.clientCode})
        </p>

        <p>Status: {invoice.status}</p>

        {/* INVOICE_UI_LIFECYCLE_STEP174 */}
        {["ISSUED", "PARTIALLY_PAID"].includes(
          invoice.status,
        ) && (
          <form
            action={updateInvoiceLifecycle}
            className="mt-3"
          >
            <input
              type="hidden"
              name="invoiceNumber"
              value={invoice.invoiceNumber}
            />
            <input
              type="hidden"
              name="status"
              value="OVERDUE"
            />
            <button
              type="submit"
              className="rounded border px-3 py-2 text-sm font-semibold"
            >
              Mark Overdue
            </button>
          </form>
        )}

        {["DRAFT", "ISSUED", "OVERDUE"].includes(
          invoice.status,
        ) &&
          invoice.amountPaid.eq(0) && (
            <form
              action={updateInvoiceLifecycle}
              className="mt-3"
            >
              <input
                type="hidden"
                name="invoiceNumber"
                value={invoice.invoiceNumber}
              />
              <input
                type="hidden"
                name="status"
                value="CANCELLED"
              />
              <button
                type="submit"
                className="rounded border px-3 py-2 text-sm font-semibold"
              >
                Cancel Invoice
              </button>
            </form>
          )}

        {invoice.status === "DRAFT" && (
          <form action={issueInvoice} className="mt-4">
            <input
              type="hidden"
              name="invoiceNumber"
              value={invoice.invoiceNumber}
            />
            <button
              type="submit"
              className="rounded-xl bg-blue-600 px-5 py-3 font-bold text-white"
            >
              Issue Invoice
            </button>
          </form>
        )}

        <section className="rounded-2xl border bg-white p-6">
          <h2 className="mb-4 text-xl font-bold">Invoice Items</h2>

          {invoice.items.map((item, index) => (
            <div key={index} className="mb-4 rounded-xl border p-4">
              <strong>{item.description}</strong>
              <p className="text-sm">
                Quantity: {item.quantity.toString()} ·
                Price: ₹{item.unitPrice.toString()} ·
                Tax: {item.taxRate.toString()}%
              </p>
            </div>
          ))}

          <div className="space-y-2 border-t pt-4">
            <p>Subtotal: ₹{invoice.subtotal.toString()}</p>
            <p>Tax: ₹{invoice.taxAmount.toString()}</p>
            <p>Discount: ₹{invoice.discountAmount.toString()}</p>
            <p className="font-bold">
              Total: ₹{invoice.totalAmount.toString()}
            </p>
            <p>Verified Paid: ₹{invoice.amountPaid.toString()}</p>
            <p className="font-bold">
              Balance: ₹{balance.toString()}
            </p>
          </div>
        </section>

        <section className="rounded-2xl border bg-white p-6">
          <h2 className="mb-4 text-xl font-bold">Payments</h2>

          {invoice.payments.length === 0 ? (
            <p>No payments recorded.</p>
          ) : (
            invoice.payments.map((payment) => (
              <p key={payment.paymentCode} className="mb-3 text-sm">
                {payment.paymentCode} · ₹{payment.amount.toString()} ·
                {payment.method} · {payment.status}
              </p>
            ))
          )}
        </section>
      </main>
    </CustomerAdminShell>
  );
}