import { Suspense } from "react";
import { StaffReportView } from "@/components/StaffReportView";
import { SiteHeader, SiteFooter } from "@/components/SiteChrome";
import { isStaffKeyValid } from "@/lib/staff-auth";

interface PageProps {
  searchParams: Promise<{ org?: string; key?: string }>;
}

export const metadata = {
  title: "Staff report — Food Co-op Initiative",
  robots: { index: false, follow: false },
};

export default async function StaffReportPage({ searchParams }: PageProps) {
  const { org, key } = await searchParams;

  // Generic "not found" if the key is missing or wrong — don't confirm
  // route existence.
  if (!isStaffKeyValid(key)) {
    return <NotFound />;
  }

  const orgId = Number(org);
  const orgValid = !!org && Number.isFinite(orgId) && orgId > 0;

  return (
    <>
      <a
        href="#main"
        className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded focus:bg-paper focus:px-3 focus:py-2 focus:text-ink focus:shadow"
      >
        Skip to content
      </a>
      <SiteHeader />
      <main id="main" className="flex-1">
        <div className="mx-auto max-w-5xl px-4 py-10 sm:px-6 sm:py-14">
          {orgValid ? (
            <Suspense fallback={null}>
              <StaffReportView org={orgId} authKey={key!} />
            </Suspense>
          ) : (
            <MissingOrg />
          )}
        </div>
      </main>
      <SiteFooter />
    </>
  );
}

function NotFound() {
  return (
    <>
      <SiteHeader />
      <main className="flex-1">
        <div className="mx-auto max-w-2xl px-4 py-20 text-center">
          <h1 className="font-display text-3xl text-ink">Not found</h1>
          <p className="mt-3 text-ink-soft">
            The page you requested doesn&apos;t exist.
          </p>
        </div>
      </main>
      <SiteFooter />
    </>
  );
}

function MissingOrg() {
  return (
    <div role="alert" className="rounded-lg border-2 border-clay-200 bg-clay-100/30 px-6 py-7">
      <h2 className="font-display text-xl font-medium text-clay-700">
        Missing or invalid org id.
      </h2>
      <p className="mt-3 leading-relaxed text-ink-soft">
        Add <code className="font-mono">?org=&lt;civi-org-id&gt;</code> to the URL. The org
        id is the Civi Contact id of the organization (visible in the URL when
        viewing the org in CiviCRM).
      </p>
    </div>
  );
}