"use client";

import { Alert } from "@/components/ui/alert";
import { PageHeader } from "@/components/shared/page-header";
import { DispatchKpis } from "@/features/dispatch/dispatch-kpis";
import { useCan } from "@/features/auth/use-can";
import { useT } from "@/i18n";

/**
 * How dispatch is performing.
 *
 * What exists today is the *algorithm's* record — latency, batching, failed attempts, map spend —
 * because that is what the backend counts. Per-captain reliability and ratings are still absent
 * from the API, and the note at the bottom says so rather than leaving a screen that looks
 * complete and quietly answers a different question.
 */
export default function PerformancePage() {
  const t = useT();
  const { can } = useCan();

  return (
    <div>
      <PageHeader title={t("performance.title")} subtitle={t("performance.subtitle")} />

      {can("dispatch.view") ? (
        <DispatchKpis />
      ) : (
        <Alert variant="info" title={t("performance.noPermissionTitle")}>
          {t("performance.noPermissionBody")}
        </Alert>
      )}

      <Alert variant="info" title={t("performance.gapTitle")} className="mt-6">
        {t("performance.gapBody")}
        <span className="mt-1 block text-xs opacity-80">{t("performance.gapDetail")}</span>
      </Alert>
    </div>
  );
}