"use client";

import * as React from "react";

import { ErrorBanner } from "@/components/shared/error-banner";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { AuditLogTable } from "@/components/admins/rbac/audit-log-table";
import type { AuditDomain, AuditEntry, PrincipalType } from "@/components/admins/rbac/types";
import { requestDashboardApi } from "@/lib/dashboard-api-client";

type AuditLogPageClientProps = {
  initialEntries: AuditEntry[];
  initialErrorMessage: string | null;
  auditAvailable?: boolean;
};

type AuditCatalogResponse = {
  entries: AuditEntry[];
  total: number;
  errorMessage: string | null;
  available?: boolean;
};

export function AuditLogPageClient({
  initialEntries,
  initialErrorMessage,
  auditAvailable = true,
}: AuditLogPageClientProps) {
  const [entries, setEntries] = React.useState(initialEntries);
  const [errorMessage, setErrorMessage] = React.useState(initialErrorMessage);
  const [available, setAvailable] = React.useState(auditAvailable);
  const [principalType, setPrincipalType] = React.useState<PrincipalType | "all">("all");
  const [domain, setDomain] = React.useState<AuditDomain | "all">("all");
  const [loading, setLoading] = React.useState(false);

  const refresh = React.useCallback(async () => {
    setLoading(true);
    setErrorMessage(null);

    try {
      const params = new URLSearchParams({ pageSize: "100" });
      if (principalType !== "all") params.set("principalType", principalType);
      if (domain !== "all") params.set("domain", domain);

      const data = await requestDashboardApi<AuditCatalogResponse>({
        url: `/dashboard/admins/access/audit/catalog?${params.toString()}`,
        method: "GET",
        fallbackError: "Could not load audit log.",
      });

      setEntries(data.entries ?? []);
      setErrorMessage(data.errorMessage);
      setAvailable(data.available !== false);
    } catch (error) {
      const message = error instanceof Error ? error.message : "Could not load audit log.";
      setErrorMessage(message);
    } finally {
      setLoading(false);
    }
  }, [domain, principalType]);

  React.useEffect(() => {
    void refresh();
  }, [refresh]);

  return (
    <div className="space-y-4">
      <ErrorBanner message={errorMessage} />

      {!available ? (
        <p className="text-muted-foreground text-sm">
          The audit log API is not available yet. Deploy the Yii <span className="font-mono">/api/rbac/audit-log</span>{" "}
          endpoint to start recording RBAC and portal access changes.
        </p>
      ) : (
        <>
      <div className="flex flex-wrap items-end gap-3">
        <div className="space-y-1">
          <Label className="text-xs">Principal type</Label>
          <Select
            value={principalType}
            onValueChange={(value) => setPrincipalType(value as PrincipalType | "all")}
          >
            <SelectTrigger className="h-9 w-[160px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All</SelectItem>
              <SelectItem value="backend">Staff</SelectItem>
              <SelectItem value="customer">Portal</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-1">
          <Label className="text-xs">Domain</Label>
          <Select value={domain} onValueChange={(value) => setDomain(value as AuditDomain | "all")}>
            <SelectTrigger className="h-9 w-[180px]">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All</SelectItem>
              <SelectItem value="rbac">RBAC</SelectItem>
              <SelectItem value="entitlements">Entitlements</SelectItem>
              <SelectItem value="groups">Groups</SelectItem>
              <SelectItem value="users">Users</SelectItem>
            </SelectContent>
          </Select>
        </div>
        {loading ? <p className="text-muted-foreground text-sm">Refreshing…</p> : null}
      </div>

      <AuditLogTable data={entries} />
        </>
      )}
    </div>
  );
}