import { useMutation, useQuery } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { BookOpenText, Filter, Plus, Search, X } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { useAuth } from "react-oidc-context";
import { Link, useNavigate } from "react-router-dom";
import {
  SortableTableHead,
  sortableTableHeadBaseClassName,
  sortableTableHeaderClassName,
} from "../../../../common/core/components/sort";
import {
  type SortConfig,
  type SortResolverMap,
  sortItems,
  toggleSort,
} from "../../../../common/core/utils";
import {
  commonTableShellClass,
  commonTableViewportClass,
} from "../../../../common/ui/table";
import { ForbiddenMessage } from "../../components/common/ForbiddenMessage";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "../../components/ui/avatar";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import { Input } from "../../components/ui/input";
import { Label } from "../../components/ui/label";
import { Separator } from "../../components/ui/separator";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../components/ui/table";
import { Textarea } from "../../components/ui/textarea";
import {
  type ClientSummary,
  fetchClients,
  fetchDevStats,
  fetchDeveloperRequestStatus,
  fetchMyTenants,
  requestDeveloperAccess,
} from "../../lib/devApi";
import { t } from "../../lib/i18n";
import { resolveProfileRole } from "../../lib/role";
import { cn } from "../../lib/utils";
import { fetchMe } from "../auth/authApi";
import { ClientLogo } from "./components/ClientLogo";

type ClientSortKey = "application" | "id" | "type" | "status" | "createdAt";

function ClientsPage() {
  const navigate = useNavigate();
  const auth = useAuth();
  const hasAccessToken = Boolean(auth.user?.access_token);
  const userProfile = auth.user?.profile as Record<string, unknown> | undefined;
  const role = resolveProfileRole(userProfile);
  const tenantId = userProfile?.tenant_id as string | undefined;
  const companyCode = userProfile?.companyCode as string | undefined;

  const {
    data,
    isLoading: isLoadingClients,
    error: clientError,
  } = useQuery({
    queryKey: ["clients"],
    queryFn: fetchClients,
    enabled: hasAccessToken,
  });

  const { data: statsData, isLoading: isLoadingStats } = useQuery({
    queryKey: ["dev-stats"],
    queryFn: fetchDevStats,
    enabled: hasAccessToken,
  });

  const {
    data: requestStatus,
    isLoading: isLoadingRequest,
    refetch: refetchRequest,
  } = useQuery({
    queryKey: ["developer-request", tenantId],
    queryFn: () => fetchDeveloperRequestStatus(tenantId),
    enabled: hasAccessToken && role === "user",
  });
  const { data: tenants } = useQuery({
    queryKey: ["myTenants"],
    queryFn: fetchMyTenants,
    enabled: hasAccessToken,
  });
  const { data: me } = useQuery({
    queryKey: ["userMe"],
    queryFn: fetchMe,
    enabled: hasAccessToken,
  });

  const canCreateClient =
    (role !== "user" && role !== "tenant_member") ||
    requestStatus?.status === "approved";
  const isDeveloperRequestPending = requestStatus?.status === "pending";
  const canRequestDeveloperAccess =
    role === "user" &&
    !isLoadingRequest &&
    !canCreateClient &&
    !isDeveloperRequestPending;

  const [searchQuery, setSearchQuery] = useState("");
  const [typeFilter, setTypeFilter] = useState("all");
  const [statusFilter, setStatusFilter] = useState("all");
  const [isAdvancedFilterOpen, setIsAdvancedFilterOpen] = useState(false);
  const [isRequestModalOpen, setIsRequestModalOpen] = useState(false);
  const [sortConfig, setSortConfig] =
    useState<SortConfig<ClientSortKey> | null>({
      key: "createdAt",
      direction: "desc",
    });

  const clients = data?.items || [];
  const clientSortResolvers = useMemo<
    SortResolverMap<ClientSummary, ClientSortKey>
  >(
    () => ({
      application: (client) => client.name || client.id,
      id: (client) => client.id,
      type: (client) =>
        client.metadata?.headless_login_enabled
          ? "private-headless"
          : client.type,
      status: (client) => client.status,
      createdAt: (client) =>
        client.createdAt ? new Date(client.createdAt) : null,
    }),
    [],
  );

  const filteredClients = useMemo(() => {
    const nextClients = clients.filter((client) => {
      const matchesSearch =
        !searchQuery ||
        client.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        client.id.toLowerCase().includes(searchQuery.toLowerCase());
      const matchesType = typeFilter === "all" || client.type === typeFilter;
      const matchesStatus =
        statusFilter === "all" || client.status === statusFilter;
      return matchesSearch && matchesType && matchesStatus;
    });

    return sortItems(nextClients, sortConfig, clientSortResolvers);
  }, [
    clientSortResolvers,
    clients,
    searchQuery,
    sortConfig,
    statusFilter,
    typeFilter,
  ]);

  const totalClients = statsData?.total_clients ?? clients.length;
  const activeSessions = statsData?.active_sessions ?? 0;
  const authFailures = statsData?.auth_failures_24h ?? 0;
  const hasFilterResult = filteredClients.length > 0;
  const isFilteredOut = clients.length > 0 && !hasFilterResult;
  const currentTenant = tenants?.find(
    (tenant) => tenant.id === tenantId || tenant.slug === companyCode,
  );
  const organizationName = currentTenant?.name || companyCode || "";
  const profileName = me?.name || (userProfile?.name as string) || "";
  const profileEmail = me?.email || (userProfile?.email as string) || "";
  const profilePhone =
    me?.phone ||
    (userProfile?.phone as string | undefined) ||
    (userProfile?.phone_number as string | undefined) ||
    "";
  const profileRole = me?.role || role;
  const profileRoleLabel = t(`ui.admin.role.${profileRole}`, profileRole);

  type StatTone = "up" | "down" | "stable";
  type StatItem = {
    labelKey: string;
    labelFallback: string;
    value: string;
    deltaKey: string;
    deltaFallback: string;
    tone: StatTone;
  };

  const stats: StatItem[] = [
    {
      labelKey: "ui.dev.clients.stats.total",
      labelFallback: "Total Applications",
      value: totalClients.toString(),
      deltaKey: "ui.dev.clients.stats.realtime",
      deltaFallback: "Realtime",
      tone: "up" as const,
    },
    {
      labelKey: "ui.dev.clients.stats.active_sessions",
      labelFallback: "Active Sessions",
      value: activeSessions.toString(),
      deltaKey: "ui.dev.clients.stats.realtime",
      deltaFallback: "Realtime",
      tone: "up" as const,
    },
    {
      labelKey: "ui.dev.clients.stats.auth_failures",
      labelFallback: "Auth Failures (24h)",
      value: authFailures.toString(),
      deltaKey:
        authFailures > 0
          ? "ui.dev.clients.stats.alert"
          : "ui.dev.clients.stats.stable",
      deltaFallback: authFailures > 0 ? "Check Logs" : "Stable",
      tone: authFailures > 0 ? ("down" as const) : ("stable" as const),
    },
  ];

  const isLoading = isLoadingClients || isLoadingStats || isLoadingRequest;

  const requestSort = (key: ClientSortKey) => {
    setSortConfig((current) => toggleSort(current, key));
  };

  if (auth.isLoading || !hasAccessToken || isLoading) {
    return (
      <div className="p-8 text-center">
        {t("msg.dev.clients.loading", "Loading clients...")}
      </div>
    );
  }

  if (clientError) {
    const axiosError = clientError as AxiosError<{ error?: string }>;
    if (axiosError.response?.status === 403) {
      return <ForbiddenMessage resourceToken="clients" />;
    }
    const errMsg =
      axiosError.response?.data?.error ?? (clientError as Error).message;
    return (
      <div className="p-8 text-center text-red-500">
        {t("msg.dev.clients.load_error", "Error loading clients: {{error}}", {
          error: errMsg,
        })}
      </div>
    );
  }

  return (
    <div className="space-y-8">
      <Card className="glass-panel">
        <CardHeader className="pb-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                {t("ui.dev.clients.registry.title", "RP registry")}
              </p>
              <CardTitle className="text-3xl font-black tracking-tight">
                {t("ui.dev.clients.registry.subtitle", "연동 앱")}
              </CardTitle>
              <CardDescription>
                {t(
                  "msg.dev.clients.registry.description",
                  "OIDC 클라이언트, 인증 방식, 리다이렉트 URI, 비밀키 재발행을 감사 로그와 함께 관리합니다.",
                )}
              </CardDescription>
            </div>
            {canCreateClient && (
              <div className="hidden items-center gap-2 md:flex">
                <Button
                  size="sm"
                  className="shadow-lg shadow-primary/30"
                  onClick={() => navigate("/clients/new")}
                >
                  <Plus className="h-4 w-4" />
                  {t("ui.dev.clients.new", "새 클라이언트")}
                </Button>
              </div>
            )}
          </div>
          <div className="mt-4 flex flex-col gap-3">
            <div className="flex flex-col gap-3 md:flex-row md:items-center">
              <div className="relative flex-1">
                <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.search_placeholder",
                    "클라이언트 이름/ID로 검색...",
                  )}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <div className="flex items-center gap-2">
                <Button
                  variant="ghost"
                  size="sm"
                  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>
                <div className="hidden items-center gap-2 md:flex">
                  <Badge variant="muted">
                    {t(
                      "ui.dev.clients.badge.tenant_selected",
                      "테넌트: 선택됨",
                    )}
                  </Badge>
                  <Badge variant="success">
                    {t("ui.dev.clients.badge.dev_session", "DevFront 세션")}
                  </Badge>
                </div>
              </div>
            </div>

            {isAdvancedFilterOpen && (
              <div className="flex flex-wrap items-center gap-6 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 items-center gap-2">
                  <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
                    {t("ui.dev.clients.filter.type_label", "Type:")}
                  </span>
                  <select
                    className="h-9 rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30 min-w-[140px]"
                    value={typeFilter}
                    onChange={(e) => setTypeFilter(e.target.value)}
                  >
                    <option value="all">
                      {t("ui.dev.clients.filter.type_all", "모든 유형")}
                    </option>
                    <option value="private">
                      {t("ui.dev.clients.type.private", "Server side App")}
                    </option>
                    <option value="pkce">
                      {t("ui.dev.clients.type.pkce", "PKCE")}
                    </option>
                  </select>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-xs font-bold uppercase tracking-wider text-muted-foreground whitespace-nowrap">
                    {t("ui.dev.clients.consents.status_label", "Status:")}
                  </span>
                  <select
                    className="h-9 rounded-md border border-input bg-background px-3 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30 min-w-[140px]"
                    value={statusFilter}
                    onChange={(e) => setStatusFilter(e.target.value)}
                  >
                    <option value="all">
                      {t("ui.dev.clients.filter.status_all", "모든 상태")}
                    </option>
                    <option value="active">
                      {t("ui.common.status.active", "Active")}
                    </option>
                    <option value="inactive">
                      {t("ui.common.status.inactive", "Inactive")}
                    </option>
                  </select>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-xs text-muted-foreground ml-auto"
                  onClick={() => {
                    setTypeFilter("all");
                    setStatusFilter("all");
                  }}
                >
                  {t("ui.common.reset", "초기화")}
                </Button>
              </div>
            )}
          </div>
        </CardHeader>
        <CardContent className="pt-0">
          <div className="grid gap-4 md:grid-cols-3">
            {stats.map((item) => (
              <Card key={item.labelKey} className="border border-border/60">
                <CardHeader className="pb-2">
                  <CardDescription>
                    {t(item.labelKey, item.labelFallback)}
                  </CardDescription>
                  <div className="mt-1 flex items-baseline gap-2">
                    <span className="text-3xl font-bold">{item.value}</span>
                    <Badge
                      variant={
                        item.tone === "up"
                          ? "success"
                          : item.tone === "down"
                            ? "warning"
                            : "muted"
                      }
                      className={cn(
                        "px-2",
                        item.tone === "stable" && "bg-muted/40 text-foreground",
                      )}
                    >
                      {t(item.deltaKey, item.deltaFallback)}
                    </Badge>
                  </div>
                </CardHeader>
              </Card>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card className="glass-panel">
        <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
          <div>
            <CardTitle className="text-xl font-semibold">
              {t("ui.dev.clients.list.title", "클라이언트 목록")}
            </CardTitle>
            <CardDescription>
              {t(
                "msg.dev.clients.showing",
                "총 {{shown}}개의 애플리케이션이 등록되어 있습니다.",
                { shown: totalClients },
              )}
            </CardDescription>
          </div>
          {canCreateClient && (
            <div className="flex items-center gap-2 md:hidden">
              <Button size="sm" onClick={() => navigate("/clients/new")}>
                <Plus className="h-4 w-4" />
                {t("ui.dev.clients.new", "새 클라이언트")}
              </Button>
            </div>
          )}
        </CardHeader>
        <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
          <div className={commonTableShellClass}>
            <div className={commonTableViewportClass}>
              <Table className="min-w-[1180px]">
                <TableHeader className={sortableTableHeaderClassName}>
                  <TableRow>
                    <SortableTableHead
                      label={t(
                        "ui.dev.clients.table.application",
                        "애플리케이션",
                      )}
                      onSort={requestSort}
                      sortConfig={sortConfig}
                      sortKey="application"
                    />
                    <SortableTableHead
                      label={t("ui.dev.clients.table.client_id", "Client ID")}
                      onSort={requestSort}
                      sortConfig={sortConfig}
                      sortKey="id"
                    />
                    <SortableTableHead
                      label={t("ui.dev.clients.table.type", "유형")}
                      onSort={requestSort}
                      sortConfig={sortConfig}
                      sortKey="type"
                    />
                    <SortableTableHead
                      label={t("ui.dev.clients.table.status", "상태")}
                      onSort={requestSort}
                      sortConfig={sortConfig}
                      sortKey="status"
                    />
                    <SortableTableHead
                      label={t("ui.dev.clients.table.created_at", "생성일")}
                      onSort={requestSort}
                      sortConfig={sortConfig}
                      sortKey="createdAt"
                    />
                    <TableHead
                      className={`${sortableTableHeadBaseClassName} text-right`}
                    >
                      {t("ui.dev.clients.table.actions", "액션")}
                    </TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {!hasFilterResult && (
                    <TableRow>
                      <TableCell
                        colSpan={6}
                        className="h-32 text-center text-muted-foreground"
                      >
                        <div className="space-y-1">
                          <p className="font-medium text-foreground">
                            {isFilteredOut
                              ? t(
                                  "msg.dev.clients.empty_filtered",
                                  "조건에 맞는 연동 앱이 없습니다.",
                                )
                              : canCreateClient
                                ? t(
                                    "msg.dev.clients.empty_can_create",
                                    "아직 등록된 연동 앱이 없습니다.",
                                  )
                                : isDeveloperRequestPending
                                  ? t(
                                      "msg.dev.clients.empty_pending",
                                      "개발자 권한 신청을 검토 중입니다.",
                                    )
                                  : t(
                                      "msg.dev.clients.empty",
                                      "조회 가능한 RP가 없습니다.",
                                    )}
                          </p>
                          <div className="text-sm space-y-2">
                            <p className="text-muted-foreground">
                              {isFilteredOut
                                ? t(
                                    "msg.dev.clients.empty_filtered_detail",
                                    "검색어나 필터 조건을 변경해 보세요.",
                                  )
                                : canCreateClient
                                  ? t(
                                      "msg.dev.clients.empty_can_create_detail",
                                      "연동 앱 추가 버튼으로 새 RP를 생성하면 이 목록에 표시됩니다.",
                                    )
                                  : isDeveloperRequestPending
                                    ? t(
                                        "msg.dev.clients.empty_pending_detail",
                                        "super admin이 승인하면 연동 앱을 추가할 수 있습니다.",
                                      )
                                    : t(
                                        "msg.dev.clients.empty_detail",
                                        "RP 관계가 부여되면 이 목록에 해당 RP가 표시됩니다.",
                                      )}
                            </p>
                            {!isFilteredOut && canCreateClient && (
                              <button
                                type="button"
                                className="text-primary font-bold hover:underline"
                                onClick={() => navigate("/clients/new")}
                              >
                                {t("ui.dev.clients.new", "연동 앱 추가")}
                              </button>
                            )}
                            {!isFilteredOut && canRequestDeveloperAccess && (
                              <button
                                type="button"
                                className="text-primary font-bold hover:underline"
                                onClick={() => navigate("/developer-requests")}
                              >
                                {t(
                                  "ui.dev.welcome.btn_request",
                                  "개발자 등록 신청하기",
                                )}
                              </button>
                            )}
                          </div>
                        </div>
                      </TableCell>
                    </TableRow>
                  )}
                  {filteredClients.map((client) => (
                    <TableRow key={client.id}>
                      <TableCell>
                        <Link
                          to={`/clients/${client.id}`}
                          className="flex items-center gap-3 transition-colors hover:text-primary"
                        >
                          <ClientLogo client={client} />
                          <div>
                            <p className="font-semibold">
                              {client.name ||
                                t("ui.dev.clients.untitled", "Untitled")}
                            </p>
                            <p className="text-xs text-muted-foreground">
                              {t(
                                "ui.dev.clients.tenant_scoped",
                                "Tenant-scoped",
                              )}
                            </p>
                          </div>
                        </Link>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <code className="rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground">
                            {client.id}
                          </code>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-wrap items-center gap-2">
                          <Badge
                            variant={
                              client.type === "private" ||
                              client.metadata?.headless_login_enabled
                                ? "success"
                                : "muted"
                            }
                          >
                            {client.metadata?.headless_login_enabled
                              ? t(
                                  "ui.dev.clients.type.private_headless",
                                  "Server side App (Headless Login)",
                                )
                              : client.type === "private"
                                ? t(
                                    "ui.dev.clients.type.private",
                                    "Server side App",
                                  )
                                : t("ui.dev.clients.type.pkce", "PKCE")}
                          </Badge>
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            client.status === "active" ? "info" : "muted"
                          }
                          className="px-3 py-1 text-xs uppercase"
                        >
                          {client.status === "active"
                            ? t("ui.common.status.active", "Active")
                            : t("ui.common.status.inactive", "Inactive")}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-muted-foreground">
                        {client.createdAt
                          ? new Date(client.createdAt).toLocaleDateString()
                          : "-"}
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-2">
                          <Button variant="ghost" size="sm" asChild>
                            <Link to={`/clients/${client.id}`}>
                              {t("ui.common.view", "View")}
                            </Link>
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-6 lg:grid-cols-[2fr,1fr]">
        <Card className="glass-panel">
          <CardHeader className="pb-2">
            <CardTitle className="text-lg font-bold">
              {t(
                "ui.dev.clients.help.title",
                "Need help with OIDC configuration?",
              )}
            </CardTitle>
            <CardDescription>
              {t(
                "msg.dev.clients.help.subtitle",
                "Developer guides for Confidential/Public clients, redirect URIs, and auth methods.",
              )}
            </CardDescription>
          </CardHeader>
          <CardContent className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/15 text-primary">
                <BookOpenText className="h-6 w-6" />
              </div>
              <div>
                <p className="font-semibold">
                  {t("ui.dev.clients.help.docs_title", "Docs & Examples")}
                </p>
                <p className="text-sm text-muted-foreground">
                  {t(
                    "msg.dev.clients.help.docs_body",
                    "Includes PKCE, client_secret_basic, redirect URI validation tips.",
                  )}
                </p>
              </div>
            </div>
            <Button variant="secondary">
              {t("ui.dev.clients.help.view_guides", "View guides")}
            </Button>
          </CardContent>
        </Card>

        <Card className="glass-panel">
          <CardHeader className="pb-2">
            <CardTitle className="text-lg font-semibold">
              {t("ui.dev.clients.owner.title", "Owner")}
            </CardTitle>
            <CardDescription>
              {t("ui.dev.clients.owner.subtitle", "Tenant admin on-call")}
            </CardDescription>
          </CardHeader>
          <CardContent className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Avatar>
                <AvatarImage
                  src="https://gitea.hmac.kr/avatars/11ed71f61227be4a9ab6c61885371d92304a4c36a5f71036890625c55daa8c41?size=512"
                  alt={t("ui.dev.clients.owner.avatar_alt", "ops user")}
                />
                <AvatarFallback>AR</AvatarFallback>
              </Avatar>
              <div>
                <p className="font-semibold">
                  {t("ui.dev.clients.owner.name", "AI Admin Bot")}
                </p>
                <p className="text-xs text-muted-foreground">
                  {t("ui.dev.clients.owner.email", "admin@brsw.kr")}
                </p>
              </div>
            </div>
            <Separator className="mx-4 hidden h-10 w-px md:block" />
            <div className="hidden flex-col items-end text-sm text-muted-foreground md:flex">
              <span>
                {t("ui.dev.clients.owner.role", "Role: Tenant Admin")}
              </span>
              <span>{t("ui.dev.clients.owner.scope", "Scope: TENANT-12")}</span>
            </div>
          </CardContent>
        </Card>
      </div>

      <RequestAccessModal
        isOpen={isRequestModalOpen}
        onClose={() => setIsRequestModalOpen(false)}
        onSuccess={() => {
          refetchRequest();
          setIsRequestModalOpen(false);
        }}
        tenantId={tenantId || ""}
        initialName={profileName}
        initialOrg={organizationName}
        initialEmail={profileEmail}
        initialPhone={profilePhone}
        initialRole={profileRoleLabel}
      />
    </div>
  );
}

interface RequestAccessModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess: () => void;
  tenantId: string;
  initialName: string;
  initialOrg: string;
  initialEmail: string;
  initialPhone: string;
  initialRole: string;
}

function RequestAccessModal({
  isOpen,
  onClose,
  onSuccess,
  tenantId,
  initialName,
  initialOrg,
  initialEmail,
  initialPhone,
  initialRole,
}: RequestAccessModalProps) {
  const [name, setName] = useState(initialName);
  const [organization, setOrganization] = useState(initialOrg);
  const [reason, setReason] = useState("");

  useEffect(() => {
    if (!isOpen) return;
    setName(initialName);
    setOrganization(initialOrg);
  }, [initialName, initialOrg, isOpen]);

  const mutation = useMutation({
    mutationFn: requestDeveloperAccess,
    onSuccess: () => {
      onSuccess();
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    mutation.mutate({
      name,
      organization,
      reason,
      tenantId,
    });
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="relative w-full max-w-lg bg-card border border-border shadow-2xl rounded-2xl overflow-hidden animate-in zoom-in-95 duration-200">
        <div className="flex items-center justify-between p-6 border-b border-border/40">
          <div>
            <h2 className="text-xl font-bold tracking-tight">
              {t("ui.dev.request.modal.title", "개발자 등록 신청")}
            </h2>
            <p className="text-sm text-muted-foreground mt-1">
              {t(
                "msg.dev.request.modal.desc",
                "신청 사유를 입력해 주세요. 관리자 확인 후 승인됩니다.",
              )}
            </p>
          </div>
          <Button
            variant="ghost"
            size="icon"
            className="rounded-full"
            onClick={onClose}
          >
            <X className="h-4 w-4" />
          </Button>
        </div>

        <form onSubmit={handleSubmit} className="p-6 space-y-6">
          <div className="grid gap-4">
            <div className="grid gap-2">
              <Label htmlFor="name">
                {t("ui.dev.request.modal.name", "성함")}
              </Label>
              <Input
                id="name"
                value={name}
                readOnly
                className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
                required
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="org">
                {t("ui.dev.request.modal.org", "소속")}
              </Label>
              <Input
                id="org"
                value={organization}
                readOnly
                className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
                required
              />
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <div className="grid gap-2">
                <Label htmlFor="email">
                  {t("ui.dev.request.modal.email", "이메일")}
                </Label>
                <Input
                  id="email"
                  value={initialEmail}
                  readOnly
                  className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="phone">
                  {t("ui.dev.request.modal.phone", "전화번호")}
                </Label>
                <Input
                  id="phone"
                  value={initialPhone}
                  readOnly
                  className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
                />
              </div>
            </div>
            <div className="grid gap-2">
              <Label htmlFor="role">
                {t("ui.dev.request.modal.role", "역할")}
              </Label>
              <Input
                id="role"
                value={initialRole}
                readOnly
                className="focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input"
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="reason">
                {t("ui.dev.request.modal.reason", "신청 사유")}{" "}
                <span className="text-destructive">*</span>
              </Label>
              <Textarea
                id="reason"
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                placeholder={t(
                  "ui.dev.request.modal.reason_placeholder",
                  "예: 자체 서비스 연동 및 테스트용 OIDC 클라이언트 생성이 필요합니다.",
                )}
                className="min-h-[120px] resize-none border-primary/50 bg-background focus-visible:ring-primary/40"
                required
              />
            </div>
          </div>

          <div className="flex items-center justify-end gap-3 pt-2">
            <Button type="button" variant="outline" onClick={onClose}>
              {t("ui.common.cancel", "취소")}
            </Button>
            <Button
              type="submit"
              disabled={mutation.isPending}
              className="px-8 font-bold"
            >
              {mutation.isPending
                ? t("ui.common.submitting", "제출 중...")
                : t("ui.common.submit", "신청하기")}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default ClientsPage;