"use client"

/**
 * Admin overview — is this workspace set up, and did the data land?
 *
 * A card stack on `PrimaryPageTemplate` rather than a hub, because there is no
 * list here to sort or filter; it is a status read that ends in a link to the
 * object that needs attention. Same shape as organization settings, which is
 * its neighbour in the user's head.
 *
 * The one thing it must not do is invent a health score. Counts and dates are
 * verifiable; a green tick that means nothing is worse than no tick.
 */

import * as React from "react"
import { Link, useNavigate, useSearchParams } from "react-router"

import { PageHeader } from "@/components/page-header"
import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { LocalBanner } from "@/components/ui/banner"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useProduct } from "@/contexts/product-context"
import {
  adminImportsForObjects,
  adminObjectsForApp,
  adminObjectSummaries,
  type AdminObjectSummary,
} from "@/lib/mock/admin-directory"
import {
  ADMIN_APP_PARAM,
  buildProductHomeInventory,
  type ProductHomeCard,
} from "@/lib/product-home"

function formatDay(iso: string) {
  return new Date(`${iso}T00:00:00`).toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  })
}

/**
 * What a section says when the app filter leaves it with nothing.
 *
 * A dashed box rather than a hidden section: a heading with nothing under it
 * reads as a page that failed to load, and dropping the heading would make the
 * console change shape depending on which app it is pointed at.
 */
function EmptyLine({ children }: { children: React.ReactNode }) {
  return (
    <p className="mt-3 rounded-2 border border-dashed border-border px-4 py-6 text-center text-sm text-muted-foreground">
      {children}
    </p>
  )
}

function ObjectCard({ summary }: { summary: AdminObjectSummary }) {
  return (
    <Card className="h-full">
      <CardHeader className="flex flex-row items-start justify-between gap-3">
        <div className="flex min-w-0 items-center gap-3">
          <span className="flex size-9 shrink-0 items-center justify-center rounded-2 bg-brand-tint text-brand">
            <i className={`fa-light ${summary.icon}`} aria-hidden="true" />
          </span>
          <div className="min-w-0">
            <CardTitle className="text-base">{summary.label}</CardTitle>
            <p className="truncate text-sm text-muted-foreground">{summary.scope}</p>
          </div>
        </div>
        <Badge variant="secondary">{summary.total}</Badge>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <dl className="flex flex-wrap gap-x-6 gap-y-2 text-sm">
          <div>
            <dt className="text-muted-foreground">Active</dt>
            <dd className="font-medium tabular-nums text-foreground">{summary.active}</dd>
          </div>
          <div>
            <dt className="text-muted-foreground">Needs attention</dt>
            <dd className="font-medium tabular-nums text-foreground">
              {summary.needsAttention}
              {summary.needsAttention > 0 ? (
                <span className="ms-1.5 font-normal text-muted-foreground">
                  {summary.needsAttentionLabel}
                </span>
              ) : null}
            </dd>
          </div>
          <div>
            <dt className="text-muted-foreground">Last updated</dt>
            <dd className="font-medium tabular-nums text-foreground">
              {formatDay(summary.lastUpdatedOn)}
            </dd>
          </div>
        </dl>
        <p className="text-sm text-muted-foreground">Kept current by {summary.source}.</p>
        <Button type="button" variant="outline" size="sm" className="self-start" asChild>
          <Link to={summary.href}>
            Open {summary.label.toLowerCase()}
            <i className="fa-light fa-arrow-right" aria-hidden="true" />
          </Link>
        </Button>
      </CardContent>
    </Card>
  )
}

/**
 * The app this console is pointed at, or null for the whole workspace.
 *
 * Resolved against the apps the workspace actually owns, so a stale or
 * hand-typed `?app=` falls back to the full console rather than showing an
 * empty page under the name of an app nobody has. The URL is the only source
 * here: the card on `/home` remembers a preference, but a link someone was
 * sent has to open on what it says.
 */
function useConsoleApp(): ProductHomeCard | null {
  const [params] = useSearchParams()
  const { customProducts, hiddenProducts } = useProduct()
  const slug = params.get(ADMIN_APP_PARAM)

  return React.useMemo(() => {
    if (!slug) return null
    const { owned } = buildProductHomeInventory(customProducts, hiddenProducts)
    return owned.find(card => !card.href && card.slug === slug) ?? null
  }, [slug, customProducts, hiddenProducts])
}

export function AdminOverviewClient() {
  const navigate = useNavigate()
  const app = useConsoleApp()

  const summaries = React.useMemo(
    () => (app ? adminObjectsForApp(app.product) : adminObjectSummaries()),
    [app],
  )
  // Derived from the objects on screen rather than filtered again, so the list
  // of landings can never name a record type this console is not showing.
  const imports = React.useMemo(() => adminImportsForObjects(summaries), [summaries])
  const heldRows = React.useMemo(
    () => imports.reduce((sum, event) => sum + event.skipped, 0),
    [imports],
  )

  return (
    <PrimaryPageTemplate
      maxWidthClassName="max-w-5xl"
      contentClassName="pt-8 pb-24"
      siteHeader={{ title: "Administrator" }}
    >
      <PageHeader
        title="Administrator"
        // Meta, not a description: it names what the page is currently showing.
        subtitle={app?.label}
        actions={
          app ? (
            <Button type="button" variant="outline" size="sm" asChild>
              <Link to="/admin">Show all apps</Link>
            </Button>
          ) : undefined
        }
      />

      {heldRows > 0 ? (
        <LocalBanner
          variant="warning"
          title={`${heldRows} rows are waiting on you`}
          className="mx-4 mt-6 lg:mx-6"
          action={{ label: "Review held rows", onClick: () => navigate("/people") }}
        >
          The last two imports could not place these rows. They were held rather than skipped, so
          nothing was lost, but the people they describe cannot be placed or cleared until you
          resolve them.
        </LocalBanner>
      ) : null}

      <section className="mt-8 px-4 lg:px-6" aria-labelledby="admin-objects">
        <h2
          id="admin-objects"
          className="text-sm font-medium uppercase tracking-wide text-muted-foreground"
        >
          Foundational records
        </h2>
        {summaries.length === 0 ? (
          <EmptyLine>{`${app?.label ?? "This workspace"} reads no foundational records yet.`}</EmptyLine>
        ) : (
          <div className="mt-3 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {summaries.map(summary => (
              <ObjectCard key={summary.id} summary={summary} />
            ))}
          </div>
        )}
      </section>

      <section className="mt-10 px-4 lg:px-6" aria-labelledby="admin-imports">
        <h2
          id="admin-imports"
          className="text-sm font-medium uppercase tracking-wide text-muted-foreground"
        >
          Recent imports
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">
          Every landing, whether it came from a feed overnight or from someone uploading a file.
        </p>
        {imports.length === 0 ? (
          <EmptyLine>Nothing has landed in these records yet.</EmptyLine>
        ) : (
        <ul className="mt-3 divide-y divide-border rounded-2 border border-border">
          {imports.map(event => (
            <li
              key={event.id}
              className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 px-4 py-3"
            >
              <div className="min-w-0">
                <p className="text-sm font-medium text-foreground">
                  {event.object}
                  <span className="ms-2 font-normal text-muted-foreground">{event.source}</span>
                </p>
                <p className="text-sm text-muted-foreground">
                  {formatDay(event.landedOn)} by {event.actor}
                </p>
              </div>
              <div className="flex items-center gap-4 text-sm tabular-nums">
                <span className="text-muted-foreground">
                  <span className="font-medium text-foreground">{event.added}</span> added
                </span>
                <span className="text-muted-foreground">
                  <span className="font-medium text-foreground">{event.updated}</span> updated
                </span>
                {event.skipped > 0 ? (
                  <Badge variant="secondary">{event.skipped} held</Badge>
                ) : (
                  <span className="text-muted-foreground">0 held</span>
                )}
              </div>
            </li>
          ))}
        </ul>
        )}
      </section>

      <section className="mt-10 px-4 lg:px-6" aria-labelledby="admin-elsewhere">
        <h2
          id="admin-elsewhere"
          className="text-sm font-medium uppercase tracking-wide text-muted-foreground"
        >
          Configured elsewhere
        </h2>
        <p className="mt-1 text-sm text-muted-foreground">
          These already have a home. Administrator links to them rather than keeping a second copy
          of the controls.
        </p>
        <div className="mt-3 grid gap-4 sm:grid-cols-2">
          <Card>
            <CardHeader className="flex flex-row items-center gap-3">
              <span className="flex size-9 shrink-0 items-center justify-center rounded-2 bg-brand-tint text-brand">
                <i className="fa-light fa-grid-2" aria-hidden="true" />
              </span>
              <CardTitle className="text-base">Products and branding</CardTitle>
            </CardHeader>
            <CardContent className="flex flex-col gap-3">
              <p className="text-sm leading-6 text-muted-foreground">
                Which products this workspace uses, and the colour and wordmark for any product
                you have built yourself.
              </p>
              <Button type="button" variant="outline" size="sm" className="self-start" asChild>
                <Link to="/settings/organization">
                  Organization settings
                  <i className="fa-light fa-arrow-right" aria-hidden="true" />
                </Link>
              </Button>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center gap-3">
              <span className="flex size-9 shrink-0 items-center justify-center rounded-2 bg-brand-tint text-brand">
                <i className="fa-light fa-user-shield" aria-hidden="true" />
              </span>
              <CardTitle className="text-base">Roles and access</CardTitle>
            </CardHeader>
            <CardContent className="flex flex-col gap-3">
              <p className="text-sm leading-6 text-muted-foreground">
                Who can administer this workspace, and what a program admin sees compared with a
                tenant admin. Not built yet, so access still follows the defaults.
              </p>
              <Badge variant="secondary" className="self-start">
                Coming next
              </Badge>
            </CardContent>
          </Card>
        </div>
      </section>
    </PrimaryPageTemplate>
  )
}