mega-plant/app/sites/[id]/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getAssets, getInvoices, getInvoiceLines, getSites, joinBookedLines, MONTH_NAMES } from "@/lib/data";
import { buildSiteSummaries } from "@/lib/sites";
import { ZAR2 } from "@/lib/utils";
import { ScrollFade } from "@/components/ScrollFade";
import { ArrowLeft, MapPin, FileText } from "lucide-react";
import { Sparkline } from "@/components/Sparkline";
import { SiteCoordinateEditor } from "@/components/SiteCoordinateEditor";
import { SiteContainerEditor } from "@/components/SiteContainerEditor";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  const sites = await getSites();
  const site = sites.find((s) => s.id === id);
  return { title: `${site?.name ?? "Site"} — Mega Plant` };
}

export default async function SiteDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const [sites, invoices, lines, assets] = await Promise.all([
    getSites(),
    getInvoices(),
    getInvoiceLines(),
    getAssets(),
  ]);

  const site = sites.find((s) => s.id === id);
  if (!site) notFound();

  const joined = joinBookedLines(lines, assets);
  const summary = buildSiteSummaries(sites, invoices, joined, assets).find((s) => s.id === id);
  if (!summary) notFound();

  const invById = new Map(invoices.map((i) => [i.id, i]));
  const assetById = new Map(assets.map((a) => [a.id, a]));
  const siteLines = joined
    .filter((l) => invById.get(l.invoice)?.site === site.name)
    .sort((a, b) => (invById.get(b.invoice)!.invoice_date).localeCompare(invById.get(a.invoice)!.invoice_date) || a.line_no - b.line_no);

  return (
    <div className="p-4 sm:p-8 max-w-[1400px]">
      <Link
        href="/sites"
        className="inline-flex items-center gap-1.5 min-h-[44px] text-sm text-gray-500 dark:text-gray-400 hover:text-[#00798C] transition"
      >
        <ArrowLeft className="w-4 h-4" />
        All sites
      </Link>

      <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
        <div>
          <div className="flex items-center gap-3 mb-1">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#EDAE49]/20 to-[#00798C]/15 grid place-items-center text-[#00798C]">
              <MapPin className="w-5 h-5" />
            </div>
            <h1 className="text-2xl font-semibold text-[#003D5B] dark:text-white">{site.name}</h1>
          </div>
          <p className="text-gray-500 dark:text-gray-400 text-sm">
            {summary.invoices.length} invoice{summary.invoices.length === 1 ? "" : "s"} ·{" "}
            {summary.machineCount} machine{summary.machineCount === 1 ? "" : "s"} ·{" "}
            {summary.lineCount} line{summary.lineCount === 1 ? "" : "s"}
          </p>
        </div>
        <div className="flex flex-wrap items-stretch gap-3">
          <div className="px-5 py-3 rounded-2xl bg-white dark:bg-surface border border-gray-100 dark:border-white/5">
            <div className="text-xs text-gray-500 dark:text-gray-400">Revenue (ex VAT)</div>
            <div className="text-2xl font-semibold tabular-nums text-[#003D5B] dark:text-white">
              {ZAR2(summary.revenueExcl)}
            </div>
            <div className="text-xs text-gray-500 dark:text-gray-400 tabular-nums">
              + {ZAR2(summary.vat)} VAT
            </div>
          </div>
          <div className="bg-gradient-to-br from-[#00798C] to-[#003D5B] rounded-2xl px-5 py-3 text-white shadow-lg shadow-teal-500/20">
            <div className="text-xs text-white/80">Billed (incl VAT)</div>
            <div className="text-2xl font-semibold tabular-nums">{ZAR2(summary.revenueIncl)}</div>
          </div>
          {/* The same monthly series the site list plots, so the detail page and the
              list can never disagree about what a month was worth. */}
          <div className="px-5 py-3 rounded-2xl bg-white dark:bg-surface border border-gray-100 dark:border-white/5">
            <div className="text-xs text-gray-500 dark:text-gray-400">
              Billed per month · {summary.year}
            </div>
            <div className="mt-1">
              <Sparkline data={summary.months} color="#00798C" />
            </div>
          </div>
        </div>
      </div>

      <div className="grid lg:grid-cols-3 gap-5">
        <div className="lg:col-span-2">
          <div className="relative bg-white dark:bg-surface rounded-2xl border border-gray-100 dark:border-white/5 shadow-sm overflow-hidden">
            <div className="px-5 py-4 border-b border-gray-100 dark:border-white/5">
              <h2 className="text-sm font-semibold text-[#003D5B] dark:text-white">Line items</h2>
            </div>
            <div className="overflow-x-auto" style={{ WebkitOverflowScrolling: "touch" }}>
              <table className="w-full text-sm sm:min-w-[640px]">
                <thead>
                  <tr className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider border-b border-gray-100 dark:border-white/5 bg-gray-50/50 dark:bg-white/[0.02]">
                    <th className="text-left py-3 px-4 font-medium sticky left-0 z-10 bg-gray-50/95 dark:bg-surface-muted/95 backdrop-blur">Machine</th>
                    <th className="text-left py-3 px-3 font-medium hidden sm:table-cell">Invoice</th>
                    <th className="text-right py-3 px-3 font-medium whitespace-nowrap hidden sm:table-cell">Qty</th>
                    <th className="text-right py-3 px-3 font-medium whitespace-nowrap">Ex VAT</th>
                    <th className="text-right py-3 px-3 font-medium whitespace-nowrap hidden sm:table-cell">VAT</th>
                    <th className="text-right py-3 px-4 font-medium whitespace-nowrap">Total</th>
                  </tr>
                </thead>
                <tbody>
                  {siteLines.map((l) => {
                    const inv = invById.get(l.invoice)!;
                    const asset = l.booked_asset ? assetById.get(l.booked_asset) : null;
                    return (
                      <tr key={l.id} className="border-b border-gray-50 dark:border-white/5">
                        <td className="py-3 px-4 sticky left-0 z-10 bg-white dark:bg-surface">
                          <div className="font-mono text-xs font-semibold text-[#00798C]">{l.machine_code}</div>
                          <div className="text-xs text-gray-500 dark:text-gray-400">
                            {asset ? `${asset.code} ${asset.name}` : l.description}
                          </div>
                        </td>
                        <td className="hidden sm:table-cell py-3 px-3 font-mono text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
                          {inv.invoice_no}
                        </td>
                        <td className="hidden sm:table-cell py-3 px-3 text-right tabular-nums text-gray-600 dark:text-gray-300 whitespace-nowrap">
                          {l.qty} {l.unit}
                        </td>
                        <td className="py-3 px-3 text-right tabular-nums text-gray-600 dark:text-gray-300 whitespace-nowrap">{ZAR2(l.amount_excl)}</td>
                        <td className="hidden sm:table-cell py-3 px-3 text-right tabular-nums text-gray-500 dark:text-gray-400 whitespace-nowrap">{ZAR2(l.vat)}</td>
                        <td className="py-3 px-4 text-right tabular-nums font-semibold text-[#003D5B] dark:text-white whitespace-nowrap">
                          {ZAR2(l.total_incl)}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            <ScrollFade />
          </div>
        </div>

        <div className="space-y-5">
          <div className="bg-white dark:bg-surface rounded-2xl border border-gray-100 dark:border-white/5 shadow-sm overflow-hidden">
            <div className="px-5 py-4 border-b border-gray-100 dark:border-white/5">
              <h2 className="text-sm font-semibold text-[#003D5B] dark:text-white">Location</h2>
            </div>
            <div className="px-5 py-4">
              <SiteCoordinateEditor
                siteId={site.id}
                name={site.name}
                latitude={site.latitude}
                longitude={site.longitude}
              />
            </div>
          </div>

          <div className="bg-white dark:bg-surface rounded-2xl border border-gray-100 dark:border-white/5 shadow-sm overflow-hidden">
            <div className="px-5 py-4 border-b border-gray-100 dark:border-white/5">
              <h2 className="text-sm font-semibold text-[#003D5B] dark:text-white">Container</h2>
            </div>
            <div className="px-5 py-4">
              <SiteContainerEditor
                siteId={site.id}
                siteName={site.name}
                code={site.container_code}
                assetId={site.container_asset}
                assets={assets
                  .filter((a) => a.is_active !== false)
                  .map((a) => ({ id: a.id, label: `${a.code || "—"} · ${a.name}` }))}
              />
            </div>
          </div>

          <div className="bg-white dark:bg-surface rounded-2xl border border-gray-100 dark:border-white/5 shadow-sm overflow-hidden">
            <div className="px-5 py-4 border-b border-gray-100 dark:border-white/5">
              <h2 className="text-sm font-semibold text-[#003D5B] dark:text-white">Invoices</h2>
            </div>
            {/* Grouped by billing month rather than one flat list, so the page reads the
                same way as the list: a month, then the invoices that made it up. */}
            <div className="divide-y divide-gray-100 dark:border-white/5">
              {summary.monthly.map((m) => (
                <div key={m.key} className="px-5 py-3">
                  <div className="flex items-baseline justify-between gap-3">
                    <span className="text-sm font-semibold text-[#003D5B] dark:text-white">
                      {MONTH_NAMES[m.month - 1]} {m.year}
                    </span>
                    <span className="text-sm font-semibold tabular-nums text-[#003D5B] dark:text-white whitespace-nowrap">
                      {ZAR2(m.totalIncl)}
                    </span>
                  </div>
                  <div className="text-xs text-gray-400 dark:text-text-soft tabular-nums">
                    ex {ZAR2(m.totalExcl)} + {ZAR2(m.vat)} VAT · {m.invoices.length} invoice
                    {m.invoices.length === 1 ? "" : "s"}
                  </div>
                  <ul className="mt-2 space-y-1">
                    {m.invoices.map((inv) => (
                      <li key={inv.id} className="flex items-center justify-between gap-2">
                        <span className="inline-flex items-center gap-2 min-w-0">
                          <FileText className="w-4 h-4 text-[#00798C] shrink-0" />
                          <span className="min-w-0">
                            <span className="block font-mono text-xs font-semibold text-[#003D5B] dark:text-white">
                              {inv.invoiceNo}
                            </span>
                            <span className="block text-xs text-gray-500 dark:text-gray-400">
                              {fmtDate(inv.invoiceDate)} · {fmtRange(inv.periodFrom, inv.periodTo)}
                            </span>
                          </span>
                        </span>
                        {inv.hasPdf ? (
                          <a
                            href={`/api/invoices/${inv.id}/document`}
                            target="_blank"
                            rel="noreferrer"
                            className="inline-flex items-center min-h-[44px] px-2 -mr-2 rounded-lg text-xs font-medium text-[#00798C] hover:bg-[#00798C]/10 transition shrink-0"
                          >
                            PDF
                          </a>
                        ) : (
                          <span className="text-xs tabular-nums text-gray-500 dark:text-gray-400 whitespace-nowrap">
                            {ZAR2(inv.totalIncl)}
                          </span>
                        )}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>

          {summary.unbookedCount > 0 && (
            <div className="px-5 py-4 rounded-2xl bg-[#D1495B]/5 border border-[#D1495B]/15">
              <h2 className="text-sm font-semibold text-[#D1495B] mb-1">Unbooked</h2>
              <p className="text-sm text-[#D1495B]">
                {summary.unbookedCount} line{summary.unbookedCount === 1 ? "" : "s"} here still need a
                machine or a site — {ZAR2(summary.unbookedAmount)} incl VAT.
              </p>
              <Link
                href="/income/invoices"
                className="inline-flex items-center min-h-[44px] text-sm font-medium text-[#D1495B] hover:underline mt-1"
              >
                Go and assign them
              </Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// PocketBase dates arrive as "2026-09-18 00:00:00.000Z". The date part is parsed as
// UTC so a label can't slip a day backwards in a timezone behind the server.
function fmtDate(d: string): string {
  if (!d) return "—";
  const dt = new Date(d.length <= 10 ? `${d}T00:00:00Z` : d);
  if (Number.isNaN(dt.getTime())) return String(d).slice(0, 10);
  return `${dt.getUTCDate()} ${MONTH_NAMES[dt.getUTCMonth()]}`;
}

function fmtRange(from: string, to: string): string {
  if (!from || !to) return "—";
  return `${fmtDate(from)} → ${fmtDate(to)}`;
}