import { useMutation, useQuery } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import {
  ChevronLeft,
  ChevronRight,
  Download,
  Edit3,
  Filter,
  Save,
  Search,
  ShieldHalf,
  X,
} from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { PageHeader } from "../../../../common/core/components/page";
import {
  commonStickyTableHeaderClass,
  commonTableShellClass,
  commonTableViewportClass,
} from "../../../../common/ui/table";
import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import { Input } from "../../components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../components/ui/table";
import { Textarea } from "../../components/ui/textarea";
import {
  fetchClient,
  fetchConsents,
  fetchRPUserMetadata,
  revokeConsent,
  updateRPUserMetadata,
} from "../../lib/devApi";
import { t } from "../../lib/i18n";
import { cn } from "../../lib/utils";
import { ClientDetailTabs } from "./ClientDetailTabs";

type RPClaimValueType =
  | "text"
  | "number"
  | "float"
  | "boolean"
  | "array"
  | "object"
  | "date"
  | "datetime";
type CustomClaimPermission = "admin_only" | "user_and_admin";

type RPClaimSchema = {
  key: string;
  value: string;
  valueType: RPClaimValueType;
  readPermission: CustomClaimPermission;
  writePermission: CustomClaimPermission;
};

type MetadataDraftRow = {
  id: string;
  key: string;
  value: string;
  valueType: RPClaimValueType;
  readPermission: CustomClaimPermission;
  writePermission: CustomClaimPermission;
  schemaBacked: boolean;
};

function isCustomClaimPermission(
  value: unknown,
): value is CustomClaimPermission {
  return value === "admin_only" || value === "user_and_admin";
}

function readPermissionMetadata(
  metadata: Record<string, unknown> | undefined,
  key: string,
  fallback: CustomClaimPermission,
  field: "readPermission" | "writePermission",
) {
  const raw = metadata?.[`${key}_permissions`];
  if (!raw || typeof raw !== "object" || Array.isArray(raw)) {
    return fallback;
  }
  const value = (raw as Record<string, unknown>)[field];
  return isCustomClaimPermission(value) ? value : fallback;
}

function metadataToDraftRows(
  metadata: Record<string, unknown> | undefined,
  schemas: RPClaimSchema[],
): MetadataDraftRow[] {
  if (schemas.length > 0) {
    return schemas.map((schema) => ({
      id: `rp-claim-${schema.key}`,
      key: schema.key,
      value: metadataValueToInputString(
        metadata?.[schema.key],
        schema.value,
        schema.valueType,
      ),
      valueType: schema.valueType,
      readPermission: readPermissionMetadata(
        metadata,
        schema.key,
        schema.readPermission,
        "readPermission",
      ),
      writePermission: readPermissionMetadata(
        metadata,
        schema.key,
        schema.writePermission,
        "writePermission",
      ),
      schemaBacked: true,
    }));
  }

  return Object.entries(metadata ?? {})
    .filter(([key]) => !key.endsWith("_permissions"))
    .map(([key, value], index) => ({
      id: `${key}-${index}`,
      key,
      value: metadataValueToString(value, ""),
      valueType: "text",
      readPermission: readPermissionMetadata(
        metadata,
        key,
        "admin_only",
        "readPermission",
      ),
      writePermission: readPermissionMetadata(
        metadata,
        key,
        "admin_only",
        "writePermission",
      ),
      schemaBacked: false,
    }));
}

function draftRowsToMetadata(rows: MetadataDraftRow[]) {
  const metadata: Record<string, unknown> = {};
  for (const row of rows) {
    const key = row.key.trim();
    if (!key) continue;
    metadata[key] = draftRowValueToMetadataValue(row);
    metadata[`${key}_permissions`] = {
      readPermission: row.readPermission,
      writePermission: row.writePermission,
    };
  }
  return metadata;
}

function draftRowValueToMetadataValue(row: MetadataDraftRow) {
  const value = row.value.trim();
  switch (row.valueType) {
    case "number":
      return /^-?\d+$/.test(value) ? Number.parseInt(value, 10) : value;
    case "float": {
      const parsed = Number(value);
      return Number.isFinite(parsed) ? parsed : value;
    }
    case "boolean":
      return value === "true";
    case "array":
      if (value === "") return [];
      try {
        const parsed = JSON.parse(value);
        return Array.isArray(parsed) ? parsed : value;
      } catch {
        return value;
      }
    case "object":
      if (value === "") return {};
      try {
        const parsed = JSON.parse(value);
        return parsed && typeof parsed === "object" && !Array.isArray(parsed)
          ? parsed
          : value;
      } catch {
        return value;
      }
    default:
      return value;
  }
}

function isRPClaimValueType(value: string): value is RPClaimValueType {
  return (
    value === "text" ||
    value === "number" ||
    value === "float" ||
    value === "boolean" ||
    value === "array" ||
    value === "object" ||
    value === "date" ||
    value === "datetime"
  );
}

function metadataValueToString(value: unknown, fallback: string) {
  if (typeof value === "string") return value;
  if (value == null) return fallback;
  if (typeof value === "number" || typeof value === "boolean") {
    return String(value);
  }
  return JSON.stringify(value);
}

function metadataValueToInputString(
  value: unknown,
  fallback: string,
  valueType: RPClaimValueType,
) {
  const text = metadataValueToString(value, fallback);
  if (valueType === "date") {
    return text.slice(0, 10);
  }
  if (valueType === "datetime") {
    return text.slice(0, 16);
  }
  return text;
}

function readRPClaimSchemas(
  metadata: Record<string, unknown> | undefined,
): RPClaimSchema[] {
  const rawClaims = metadata?.id_token_claims;
  if (!Array.isArray(rawClaims)) return [];

  return rawClaims
    .map((item) => {
      if (!item || typeof item !== "object") return null;
      const record = item as Record<string, unknown>;
      if (record.namespace !== "rp_claims") return null;
      const key = typeof record.key === "string" ? record.key.trim() : "";
      if (!key) return null;
      const rawValueType =
        typeof record.valueType === "string" ? record.valueType : "text";
      const valueType = isRPClaimValueType(rawValueType)
        ? rawValueType
        : "text";
      return {
        key,
        value: metadataValueToString(record.value, ""),
        valueType,
        readPermission: isCustomClaimPermission(record.readPermission)
          ? record.readPermission
          : "admin_only",
        writePermission: isCustomClaimPermission(record.writePermission)
          ? record.writePermission
          : "admin_only",
      };
    })
    .filter((item): item is RPClaimSchema => item !== null);
}

function rpClaimInputType(valueType: RPClaimValueType) {
  if (valueType === "date") return "date";
  if (valueType === "datetime") return "datetime-local";
  return "text";
}

function rpClaimInputMode(valueType: RPClaimValueType) {
  if (valueType === "number") return "numeric";
  if (valueType === "float") return "decimal";
  return undefined;
}

function rpClaimInputPattern(valueType: RPClaimValueType) {
  if (valueType === "number") return "-?[0-9]*";
  if (valueType === "float") return "-?(?:[0-9]+(?:\\.[0-9]+)?|\\.[0-9]+)";
  return undefined;
}

function ClientConsentsPage() {
  const params = useParams();
  const clientId = params.id ?? "";
  const [subjectInput, setSubjectInput] = useState("");
  const [subject, setSubject] = useState("");
  const [statusFilter, setStatusFilter] = useState<string[]>([]);
  const [scopeFilter, setScopeFilter] = useState<string[]>([]);
  const [isAdvancedFilterOpen, setIsAdvancedFilterOpen] = useState(false);
  const [editingSubject, setEditingSubject] = useState("");
  const [metadataDraftRows, setMetadataDraftRows] = useState<
    MetadataDraftRow[]
  >([]);

  const { data: clientData } = useQuery({
    queryKey: ["client", clientId],
    queryFn: () => fetchClient(clientId),
    enabled: clientId.length > 0,
  });
  const rpClaimSchemas = useMemo(
    () => readRPClaimSchemas(clientData?.client.metadata),
    [clientData?.client.metadata],
  );
  const {
    data: consentsData,
    isLoading,
    error,
    refetch,
  } = useQuery({
    queryKey: ["consents", clientId, subject],
    queryFn: () => fetchConsents(subject, clientId, "all"),
    enabled: clientId.length > 0,
  });
  const rows = consentsData?.items ?? [];
  const revokeMutation = useMutation({
    mutationFn: (payload: { subject: string }) =>
      revokeConsent(payload.subject, clientId),
    onSuccess: () => {
      refetch();
    },
  });
  const selectedRow =
    rows.find((row) => row.subject === editingSubject) ?? undefined;
  const metadataQuery = useQuery({
    queryKey: ["rp-user-metadata", clientId, editingSubject],
    queryFn: () => fetchRPUserMetadata(clientId, editingSubject),
    enabled: clientId.length > 0 && editingSubject.length > 0,
  });
  const metadataMutation = useMutation({
    mutationFn: () =>
      updateRPUserMetadata(
        clientId,
        editingSubject,
        draftRowsToMetadata(metadataDraftRows),
      ),
    onSuccess: () => {
      setEditingSubject("");
      setMetadataDraftRows([]);
      refetch();
    },
  });

  useEffect(() => {
    if (metadataQuery.data) {
      setMetadataDraftRows(
        metadataToDraftRows(metadataQuery.data.metadata, rpClaimSchemas),
      );
    }
  }, [metadataQuery.data, rpClaimSchemas]);

  const handleRevoke = (sub: string) => {
    if (
      window.confirm(
        t(
          "msg.dev.clients.consents.revoke_confirm",
          "정말로 이 사용자의 권한을 철회하시겠습니까? 철회 시 사용자는 다음 접속 시 다시 동의해야 합니다.",
        ),
      )
    ) {
      revokeMutation.mutate({ subject: sub });
    }
  };

  const allScopes = Array.from(new Set(rows.flatMap((r) => r.grantedScopes)));
  const filteredRows = rows.filter((row) => {
    const matchStatus =
      statusFilter.length === 0 || statusFilter.includes(row.status);
    const matchScope =
      scopeFilter.length === 0 ||
      scopeFilter.some((s) => row.grantedScopes.includes(s));
    return matchStatus && matchScope;
  });

  const handleExportCSV = () => {
    if (filteredRows.length === 0) return;

    const headers = [
      t("ui.dev.clients.consents.table.user", "User"),
      t("ui.dev.clients.consents.table.tenant", "Tenant"),
      t("ui.dev.clients.table.status", "Status"),
      t("ui.dev.clients.consents.table.scopes", "Granted Scopes"),
      t("ui.dev.clients.consents.table.first_granted", "First Granted"),
      t(
        "ui.dev.clients.consents.table.last_auth",
        "Last Authenticated / Revoked",
      ),
    ];

    const csvContent = [
      headers.join(","),
      ...filteredRows.map((row) => {
        const lastAuthRevoked =
          row.status === "revoked" && row.deletedAt
            ? `${t("ui.dev.clients.consents.status_revoked", "Revoked")}: ${new Date(row.deletedAt).toLocaleString()}`
            : row.authenticatedAt
              ? new Date(row.authenticatedAt).toLocaleString()
              : "-";

        return [
          `"${row.subject} (${row.userName || ""})"`,
          `"${row.tenantName || row.tenantId || ""}"`,
          `"${row.status}"`,
          `"${row.grantedScopes.join(", ")}"`,
          `"${new Date(row.createdAt).toLocaleString()}"`,
          `"${lastAuthRevoked}"`,
        ].join(",");
      }),
    ].join("\n");

    const blob = new Blob([`\uFEFF${csvContent}`], {
      type: "text/csv;charset=utf-8;",
    });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    const date = new Date().toISOString().split("T")[0];
    link.setAttribute("href", url);
    link.setAttribute("download", `consents_${clientId}_${date}.csv`);
    link.style.visibility = "hidden";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleStatusFilterChange = (status: string, checked: boolean) => {
    if (checked) {
      setStatusFilter((prev) => [...prev, status]);
    } else {
      setStatusFilter((prev) => prev.filter((s) => s !== status));
    }
  };

  const handleScopeFilterChange = (scope: string, checked: boolean) => {
    if (checked) {
      setScopeFilter((prev) => [...prev, scope]);
    } else {
      setScopeFilter((prev) => prev.filter((s) => s !== scope));
    }
  };

  const handleAllScopesChange = (checked: boolean) => {
    if (checked) {
      setScopeFilter(allScopes);
    } else {
      setScopeFilter([]);
    }
  };

  const openMetadataEditor = (row: (typeof rows)[number]) => {
    setEditingSubject(row.subject);
    setMetadataDraftRows(metadataToDraftRows(row.rpMetadata, rpClaimSchemas));
  };

  const updateMetadataDraftRow = (
    id: string,
    patch: Partial<MetadataDraftRow>,
  ) => {
    setMetadataDraftRows((current) =>
      current.map((row) => (row.id === id ? { ...row, ...patch } : row)),
    );
  };

  if (error) {
    const axiosError = error as AxiosError<{ error?: string }>;
    if (axiosError.response?.status === 403) {
      return (
        <div className="space-y-8">
          <header className="space-y-4">
            <div className="flex flex-wrap justify-between gap-4">
              <div className="space-y-2">
                <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
                  <Link to="/" className="hover:text-primary">
                    {t("ui.dev.clients.consents.breadcrumb.home", "Home")}
                  </Link>
                  <span>/</span>
                  <Link to="/clients" className="hover:text-primary">
                    {t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
                  </Link>
                  <span>/</span>
                  <span>{clientData?.client?.name || clientId}</span>
                  <span>/</span>
                  <span className="text-foreground font-semibold">
                    {t(
                      "ui.dev.clients.consents.breadcrumb.current",
                      "User Consent Grants",
                    )}
                  </span>
                </nav>
                <PageHeader
                  icon={<ShieldHalf size={20} />}
                  title={t(
                    "ui.dev.clients.consents.title",
                    "User Consent Grants",
                  )}
                />
              </div>
            </div>
            <ClientDetailTabs activeTab="consents" clientId={clientId} />
          </header>
          <ForbiddenMessage resourceToken="consents" />
        </div>
      );
    }
  }

  return (
    <div className="space-y-8">
      <header className="space-y-4">
        <div className="flex flex-wrap justify-between gap-4">
          <div className="space-y-2">
            <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
              <Link to="/" className="hover:text-primary">
                {t("ui.dev.clients.consents.breadcrumb.home", "Home")}
              </Link>
              <span>/</span>
              <Link to="/clients" className="hover:text-primary">
                {t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
              </Link>
              <span>/</span>
              <span>{clientData?.client?.name || clientId}</span>
              <span>/</span>
              <span className="text-foreground font-semibold">
                {t(
                  "ui.dev.clients.consents.breadcrumb.current",
                  "User Consent Grants",
                )}
              </span>
            </nav>
            <PageHeader
              icon={<ShieldHalf size={20} />}
              title={t("ui.dev.clients.consents.title", "User Consent Grants")}
              description={t(
                "msg.dev.clients.consents.subtitle",
                "OIDC Relying Party 사용자 권한을 검토·관리합니다.",
              )}
            />
          </div>
          <div className="flex items-center gap-3">
            <Badge
              variant={
                clientData?.client?.status === "active" ? "info" : "muted"
              }
            >
              {clientData?.client?.status === "active"
                ? t("ui.common.status.active", "Active")
                : t("ui.common.status.inactive", "Inactive")}
            </Badge>
          </div>
        </div>
        <ClientDetailTabs activeTab="consents" clientId={clientId} />
      </header>

      <Card className="glass-panel">
        <CardContent className="space-y-4 pt-6">
          <div className="flex flex-wrap items-center justify-between gap-4">
            <div className="flex flex-wrap items-center gap-4 flex-1">
              <div className="relative w-full max-w-md">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  className="pl-10"
                  placeholder={t(
                    "ui.dev.clients.consents.search_placeholder",
                    "사용자 ID, 이름, 이메일로 검색",
                  )}
                  value={subjectInput}
                  onChange={(e) => setSubjectInput(e.target.value)}
                />
              </div>
            </div>
            <div className="flex items-center gap-3">
              <Button
                variant="ghost"
                className={cn(
                  "gap-1 text-muted-foreground",
                  isAdvancedFilterOpen && "text-primary bg-primary/10",
                )}
                onClick={() => setIsAdvancedFilterOpen(!isAdvancedFilterOpen)}
              >
                <Filter className="h-4 w-4" />
                {t(
                  "ui.dev.clients.consents.filters.advanced",
                  "Advanced Filters",
                )}
              </Button>
              <Button
                className="shadow-sm shadow-primary/30"
                onClick={() => setSubject(subjectInput.trim())}
              >
                {t("ui.common.search", "검색")}
              </Button>
              <Button
                className="shadow-sm shadow-primary/30"
                onClick={handleExportCSV}
                disabled={filteredRows.length === 0}
              >
                <Download className="h-4 w-4" />
                {t("ui.dev.clients.consents.export_csv", "Export CSV")}
              </Button>
            </div>
          </div>

          {isAdvancedFilterOpen && (
            <div className="flex flex-col gap-4 rounded-lg bg-secondary/30 p-4 border border-border/40 animate-in fade-in slide-in-from-top-2 duration-200">
              <div className="flex flex-col gap-2">
                <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
                  {t("ui.dev.clients.consents.status_label", "Status:")}
                </span>
                <div className="flex flex-wrap gap-4">
                  <label className="flex items-center gap-2 text-sm cursor-pointer hover:text-foreground">
                    <input
                      type="checkbox"
                      className="rounded border-input text-primary focus:ring-primary h-4 w-4"
                      checked={statusFilter.includes("active")}
                      onChange={(e) =>
                        handleStatusFilterChange("active", e.target.checked)
                      }
                    />
                    {t("ui.common.status.active", "Active")}
                  </label>
                  <label className="flex items-center gap-2 text-sm cursor-pointer hover:text-foreground">
                    <input
                      type="checkbox"
                      className="rounded border-input text-primary focus:ring-primary h-4 w-4"
                      checked={statusFilter.includes("revoked")}
                      onChange={(e) =>
                        handleStatusFilterChange("revoked", e.target.checked)
                      }
                    />
                    {t("ui.dev.clients.consents.status_revoked", "Revoked")}
                  </label>
                </div>
              </div>

              <div className="flex flex-col gap-2">
                <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
                  {t("ui.dev.clients.consents.scope_label", "Scope:")}
                </span>
                <div className="flex flex-wrap gap-4">
                  {allScopes.length > 0 && (
                    <label className="flex items-center gap-2 text-sm cursor-pointer font-bold text-primary hover:opacity-80">
                      <input
                        type="checkbox"
                        className="rounded border-input text-primary focus:ring-primary h-4 w-4"
                        checked={
                          scopeFilter.length === allScopes.length &&
                          allScopes.length > 0
                        }
                        onChange={(e) =>
                          handleAllScopesChange(e.target.checked)
                        }
                      />
                      ALL
                    </label>
                  )}
                  {allScopes.map((scope) => (
                    <label
                      key={scope}
                      className="flex items-center gap-2 text-sm cursor-pointer hover:text-foreground"
                    >
                      <input
                        type="checkbox"
                        className="rounded border-input text-primary focus:ring-primary h-4 w-4"
                        checked={scopeFilter.includes(scope)}
                        onChange={(e) =>
                          handleScopeFilterChange(scope, e.target.checked)
                        }
                      />
                      {scope}
                    </label>
                  ))}
                </div>
              </div>

              <div className="flex justify-end">
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs text-muted-foreground p-0 h-auto"
                  onClick={() => {
                    setStatusFilter([]);
                    setScopeFilter([]);
                  }}
                >
                  {t("ui.common.reset", "초기화")}
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      <Card className="glass-panel">
        {error && (
          <CardContent className="py-8 text-center text-sm text-destructive border-b border-border/50">
            {t(
              "msg.dev.clients.consents.load_error",
              "Error loading consents: {{error}}",
              {
                error:
                  (error as AxiosError<{ error?: string }>).response?.data
                    ?.error ?? (error as Error).message,
              },
            )}
          </CardContent>
        )}
        {isLoading && (
          <CardContent className="py-8 text-center text-sm text-muted-foreground border-b border-border/50">
            {t("msg.dev.clients.consents.loading", "Loading consents...")}
          </CardContent>
        )}

        <div className={commonTableShellClass}>
          <div className={commonTableViewportClass}>
            <Table>
              <TableHeader className={commonStickyTableHeaderClass}>
                <TableRow>
                  <TableHead>
                    {t("ui.dev.clients.consents.table.user", "User")}
                  </TableHead>
                  <TableHead>
                    {t("ui.dev.clients.consents.table.tenant", "Tenant")}
                  </TableHead>
                  <TableHead>
                    {t("ui.dev.clients.consents.table.status", "Status")}
                  </TableHead>
                  <TableHead>
                    {t(
                      "ui.dev.clients.consents.table.scopes",
                      "Granted Scopes",
                    )}
                  </TableHead>
                  <TableHead>
                    {t(
                      "ui.dev.clients.consents.table.first_granted",
                      "First Granted",
                    )}
                  </TableHead>
                  <TableHead>
                    {t(
                      "ui.dev.clients.consents.table.last_auth",
                      "Last Authenticated / Revoked",
                    )}
                  </TableHead>
                  <TableHead>
                    {t("ui.dev.clients.consents.table.rp_claims", "RP Claims")}
                  </TableHead>
                  <TableHead className="text-right">
                    {t("ui.dev.clients.consents.table.action", "Action")}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredRows.length === 0 && !isLoading && !error ? (
                  <TableRow>
                    <TableCell
                      colSpan={8}
                      className="h-32 text-center text-muted-foreground"
                    >
                      <div className="flex flex-col items-center gap-2">
                        <Search className="h-8 w-8 opacity-20" />
                        <p>
                          {t(
                            "msg.dev.clients.consents.empty",
                            "No consents found.",
                          )}
                        </p>
                      </div>
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredRows.map((row) => (
                    <TableRow
                      key={`${row.subject}-${row.clientId}`}
                      className={row.status === "revoked" ? "opacity-60" : ""}
                    >
                      <TableCell>
                        <div className="flex items-center gap-3">
                          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary">
                            {(row.userName || row.subject)
                              .slice(0, 2)
                              .toUpperCase()}
                          </div>
                          <div className="flex flex-col">
                            <span className="text-sm font-semibold">
                              {row.userName ||
                                t("ui.dev.clients.consents.subject", "Subject")}
                            </span>
                            <span className="text-xs text-muted-foreground">
                              {row.subject}
                            </span>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-col">
                          <span className="text-sm font-semibold">
                            {row.tenantName || t("ui.common.na", "N/A")}
                          </span>
                          <span className="text-xs text-muted-foreground">
                            {row.tenantId}
                          </span>
                        </div>
                      </TableCell>
                      <TableCell>
                        {row.status === "active" ? (
                          <Badge variant="success">
                            {t("ui.common.status.active", "Active")}
                          </Badge>
                        ) : (
                          <Badge variant="warning">
                            {t(
                              "ui.dev.clients.consents.status_revoked",
                              "Revoked",
                            )}
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-1">
                          {row.grantedScopes.map((scope) => (
                            <Badge
                              key={scope}
                              variant="muted"
                              className="border bg-muted/40 text-foreground"
                            >
                              {scope}
                            </Badge>
                          ))}
                        </div>
                      </TableCell>
                      <TableCell className="text-sm text-muted-foreground">
                        {new Date(row.createdAt).toLocaleString()}
                      </TableCell>
                      <TableCell className="text-sm text-muted-foreground">
                        {row.status === "revoked" && row.deletedAt ? (
                          <span className="text-destructive font-medium">
                            {t(
                              "ui.dev.clients.consents.revoked_at",
                              "Revoked: ",
                            )}
                            {new Date(row.deletedAt).toLocaleString()}
                          </span>
                        ) : row.authenticatedAt ? (
                          new Date(row.authenticatedAt).toLocaleString()
                        ) : (
                          "-"
                        )}
                      </TableCell>
                      <TableCell>
                        {row.rpMetadata &&
                        Object.keys(row.rpMetadata).some(
                          (key) => !key.endsWith("_permissions"),
                        ) ? (
                          <div className="flex flex-wrap gap-1">
                            {Object.entries(row.rpMetadata)
                              .filter(([key]) => !key.endsWith("_permissions"))
                              .map(([key, value]) => (
                                <Badge
                                  key={key}
                                  variant="muted"
                                  className="border bg-muted/40 font-mono text-[11px] text-foreground"
                                >
                                  {key}:{" "}
                                  {typeof value === "string"
                                    ? value
                                    : JSON.stringify(value)}
                                </Badge>
                              ))}
                          </div>
                        ) : (
                          <span className="text-xs text-muted-foreground">
                            {t("ui.common.na", "N/A")}
                          </span>
                        )}
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button
                            variant="ghost"
                            className="gap-2"
                            onClick={() => openMetadataEditor(row)}
                          >
                            <Edit3 className="h-4 w-4" />
                            {t(
                              "ui.dev.clients.consents.rp_claims.edit",
                              "사용자 Claim 설정",
                            )}
                          </Button>
                          {row.status === "active" && (
                            <Button
                              variant="ghost"
                              className="text-destructive hover:bg-destructive/10"
                              onClick={() => handleRevoke(row.subject)}
                              disabled={revokeMutation.isPending}
                            >
                              {t("ui.dev.clients.consents.revoke", "Revoke")}
                            </Button>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </div>
        <CardContent className="flex items-center justify-between border-t border-border bg-muted/10 px-6 py-4 text-sm text-muted-foreground">
          <p>
            {t(
              "msg.dev.clients.consents.showing",
              "Showing {{from}} to {{to}} of {{total}} users",
              {
                from: filteredRows.length > 0 ? 1 : 0,
                to: filteredRows.length,
                total: rows.length,
              },
            )}
          </p>
          <div className="flex gap-2">
            <Button variant="outline" size="icon" disabled>
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <Button size="sm" disabled={filteredRows.length === 0}>
              1
            </Button>
            <Button variant="outline" size="icon" disabled>
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </CardContent>
      </Card>

      {editingSubject && (
        <Card className="glass-panel">
          <CardHeader className="pb-4">
            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
              <div>
                <CardTitle className="text-lg">
                  {t(
                    "ui.dev.clients.consents.rp_claims.title",
                    "RP Custom Claims",
                  )}
                </CardTitle>
                <p className="mt-1 text-sm text-muted-foreground">
                  {selectedRow?.userName || editingSubject}
                </p>
              </div>
              <div className="flex gap-2">
                <Button
                  variant="ghost"
                  className="gap-2"
                  onClick={() => {
                    setEditingSubject("");
                    setMetadataDraftRows([]);
                  }}
                >
                  <X className="h-4 w-4" />
                  {t("ui.common.cancel", "취소")}
                </Button>
                <Button
                  className="gap-2"
                  disabled={metadataMutation.isPending}
                  onClick={() => metadataMutation.mutate()}
                >
                  <Save className="h-4 w-4" />
                  {t("ui.dev.clients.consents.rp_claims.save", "Claim 저장")}
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-3">
            {metadataQuery.isLoading ? (
              <p className="text-sm text-muted-foreground">
                {t("msg.common.loading", "불러오는 중...")}
              </p>
            ) : metadataDraftRows.length === 0 ? (
              <div className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
                {t(
                  "msg.dev.clients.consents.rp_claims.empty",
                  "등록된 RP custom claim 값이 없습니다.",
                )}
              </div>
            ) : (
              metadataDraftRows.map((row) => (
                <div
                  key={row.id}
                  className="grid gap-3 md:grid-cols-[minmax(180px,0.8fr)_minmax(220px,1fr)_150px_150px_auto]"
                >
                  <div className="flex h-10 items-center rounded-md border bg-muted/30 px-3 font-mono text-xs">
                    {row.key}
                  </div>
                  {row.valueType === "boolean" ? (
                    <select
                      value={row.value === "false" ? "false" : "true"}
                      onChange={(event) =>
                        updateMetadataDraftRow(row.id, {
                          value: event.target.value,
                        })
                      }
                      className="h-10 rounded-md border border-input bg-background px-3 font-mono text-xs shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                      aria-label={`${row.key} boolean`}
                    >
                      <option value="true">true</option>
                      <option value="false">false</option>
                    </select>
                  ) : row.valueType === "array" ||
                    row.valueType === "object" ? (
                    <Textarea
                      value={row.value}
                      onChange={(event) =>
                        updateMetadataDraftRow(row.id, {
                          value: event.target.value,
                        })
                      }
                      className="min-h-10 font-mono text-xs"
                      placeholder={
                        row.valueType === "array"
                          ? `["value"]`
                          : `{"key": "value"}`
                      }
                      aria-label={`${row.key} ${row.valueType}`}
                    />
                  ) : (
                    <Input
                      type={rpClaimInputType(row.valueType)}
                      inputMode={rpClaimInputMode(row.valueType)}
                      pattern={rpClaimInputPattern(row.valueType)}
                      value={row.value}
                      onChange={(event) =>
                        updateMetadataDraftRow(row.id, {
                          value: event.target.value,
                        })
                      }
                      className="font-mono text-xs"
                      placeholder={t(
                        "ui.dev.clients.consents.rp_claims.value_placeholder",
                        "claim value",
                      )}
                      aria-label={`${row.key} ${row.valueType}`}
                    />
                  )}
                  <select
                    value={row.readPermission}
                    onChange={(event) =>
                      updateMetadataDraftRow(row.id, {
                        readPermission: event.target
                          .value as CustomClaimPermission,
                      })
                    }
                    className="h-10 rounded-md border border-input bg-background px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                    aria-label={t(
                      "ui.dev.clients.consents.rp_claims.read_permission",
                      "읽기 권한",
                    )}
                  >
                    <option value="admin_only">
                      {t(
                        "ui.common.custom_claim_permission.admin_only",
                        "관리자만 가능",
                      )}
                    </option>
                    <option value="user_and_admin">
                      {t(
                        "ui.common.custom_claim_permission.user_and_admin",
                        "사용자 및 관리자 가능",
                      )}
                    </option>
                  </select>
                  <select
                    value={row.writePermission}
                    onChange={(event) =>
                      updateMetadataDraftRow(row.id, {
                        writePermission: event.target
                          .value as CustomClaimPermission,
                      })
                    }
                    className="h-10 rounded-md border border-input bg-background px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                    aria-label={t(
                      "ui.dev.clients.consents.rp_claims.write_permission",
                      "쓰기 권한",
                    )}
                  >
                    <option value="admin_only">
                      {t(
                        "ui.common.custom_claim_permission.admin_only",
                        "관리자만 가능",
                      )}
                    </option>
                    <option value="user_and_admin">
                      {t(
                        "ui.common.custom_claim_permission.user_and_admin",
                        "사용자 및 관리자 가능",
                      )}
                    </option>
                  </select>
                  <Badge
                    variant="muted"
                    className="h-10 justify-center rounded-md px-3 font-mono text-xs"
                  >
                    {row.valueType}
                  </Badge>
                </div>
              ))
            )}
          </CardContent>
        </Card>
      )}

      <div className="grid gap-6 md:grid-cols-3">
        <Card className="glass-panel">
          <CardHeader className="pb-2">
            <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
              {t(
                "ui.dev.clients.consents.stats.active_grants",
                "Active Grants",
              )}
            </p>
            <CardTitle className="text-xl font-semibold">
              {rows.filter((r) => r.status === "active").length}
            </CardTitle>
          </CardHeader>
        </Card>
        <Card className="glass-panel">
          <CardHeader className="pb-2">
            <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
              {t(
                "ui.dev.clients.consents.stats.total_scopes",
                "Total Scopes Issued",
              )}
            </p>
            <CardTitle className="text-xl font-semibold">
              {rows.reduce((acc, row) => acc + row.grantedScopes.length, 0)}
            </CardTitle>
          </CardHeader>
        </Card>
        <Card className="glass-panel">
          <CardHeader className="pb-2">
            <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
              {t(
                "ui.dev.clients.consents.stats.avg_scopes",
                "Avg. Scopes per User",
              )}
            </p>
            <CardTitle className="text-xl font-semibold">
              {rows.length > 0
                ? (
                    rows.reduce(
                      (acc, row) => acc + row.grantedScopes.length,
                      0,
                    ) / rows.length
                  ).toFixed(1)
                : "0.0"}
            </CardTitle>
          </CardHeader>
        </Card>
      </div>
    </div>
  );
}

export default ClientConsentsPage;