import type { Metadata } from "next";
import Link from "next/link";
import { TicketList } from "@/components/features";
import { Card, CardHeader, EmptyState, PageHeader, StatCard, StatusBadge, Table, Td, Th, Unavailable } from "@/components/ui";
import { requireDashboard } from "@/lib/authz/guard";
import { getMaintenanceDashboard } from "@/lib/data/maintenance";
import { formatDateTime } from "@/lib/utils";

export const metadata: Metadata = { title: "Maintenance dashboard" };
export const dynamic = "force-dynamic";

export default async function MaintenanceDashboard() {
  const ctx = await requireDashboard("maintenance");
  const d = await getMaintenanceDashboard(ctx);

  return (
    <>
      <PageHeader title="Maintenance dashboard" description="Tickets and sites you are responsible for." />

      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        <StatCard label="Open tickets" value={d.openCount} />
        <StatCard label="Assigned to me" value={d.mine.length} />
        <StatCard label="High priority" value={d.highPriority.length} tone={d.highPriority.length > 0 ? "danger" : "default"} />
        <StatCard label="Overdue" value={d.overdue} tone={d.overdue > 0 ? "danger" : "default"} />
        <StatCard label="Waiting for customer" value={d.waiting} />
        <StatCard label="Resolved this week" value={d.recentlyResolved.length} />
        <StatCard label="Assigned websites" value={d.sites.length} />
        <StatCard label="Failed jobs" value={d.failedJobs.length} tone={d.failedJobs.length > 0 ? "warning" : "default"} />
      </div>

      <div className="mt-6 grid gap-4 lg:grid-cols-2">
        <Card className="lg:col-span-2">
          <CardHeader title="Assigned to me" action={<Link className="text-xs text-primary hover:underline" href="/dashboard/tickets">Ticket queue</Link>} />
          <TicketList hrefBase="/dashboard/tickets" tickets={d.mine} emptyTitle="Nothing assigned to you" />
        </Card>
        <Card>
          <CardHeader title="High-priority incidents" />
          <TicketList hrefBase="/dashboard/tickets" tickets={d.highPriority} emptyTitle="No high-priority incidents" />
        </Card>
        <Card>
          <CardHeader title="Recently resolved" />
          <TicketList hrefBase="/dashboard/tickets" tickets={d.recentlyResolved} emptyTitle="Nothing resolved this week" />
        </Card>
        <Card>
          <CardHeader title="Assigned websites" />
          {d.sites.length === 0 ? (
            <EmptyState title="No websites assigned" />
          ) : (
            <Table>
              <thead><tr><Th>Website</Th><Th>Organization</Th><Th>Status</Th></tr></thead>
              <tbody>
                {d.sites.map((s) => (
                  <tr key={s.id}><Td className="font-medium">{s.name}</Td><Td>{s.organization.name}</Td><Td><StatusBadge value={s.status} /></Td></tr>
                ))}
              </tbody>
            </Table>
          )}
          <Unavailable>Live availability checks appear once a monitoring integration is configured.</Unavailable>
        </Card>
        <Card>
          <CardHeader title="Recent job and integration errors" />
          {d.failedJobs.length === 0 ? (
            <EmptyState title="No recent errors" />
          ) : (
            <ul className="divide-y divide-border">
              {d.failedJobs.map((j) => (
                <li key={j.id} className="px-4 py-2.5 text-sm">
                  <p className="font-medium">{j.type} <span className="font-normal text-muted-foreground">· {j.site?.name ?? "platform"}</span></p>
                  <p className="text-xs text-muted-foreground">{j.lastError ?? "No error message"} · {formatDateTime(j.updatedAt)}</p>
                </li>
              ))}
            </ul>
          )}
        </Card>
      </div>
    </>
  );
}