import { useMutation, useQuery } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import { CornerDownRight, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
import * as React from "react";
import { Link, useNavigate } from "react-router-dom";
import { RoleGuard } from "../../../components/auth/RoleGuard";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../../components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../../components/ui/table";
import {
  type TenantSummary,
  deleteTenant,
  fetchMe,
  fetchTenants,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";

function TenantListPage() {
  const navigate = useNavigate();
  const { data: profile } = useQuery({
    queryKey: ["me"],
    queryFn: fetchMe,
  });

  // Redirect tenant_admin ONLY if they have one or fewer manageable tenants in the list
  React.useEffect(() => {
    if (profile?.role === "tenant_admin") {
      const manageableCount = profile.manageableTenants?.length ?? 0;
      // If only 1 in array, OR array is empty but we have a primary tenantId
      if (
        (manageableCount === 1 || manageableCount === 0) &&
        profile.tenantId
      ) {
        navigate(`/tenants/${profile.tenantId}`, { replace: true });
      }
    }
  }, [profile, navigate]);

  const query = useQuery({
    queryKey: ["tenants", { limit: 1000, offset: 0 }],
    queryFn: () => fetchTenants(1000, 0),
    enabled:
      profile?.role === "super_admin" ||
      (profile?.role === "tenant_admin" &&
        (profile.manageableTenants?.length ?? 0) > 1),
  });

  const deleteMutation = useMutation({
    mutationFn: (tenantId: string) => deleteTenant(tenantId),
    onSuccess: () => {
      query.refetch();
    },
  });

  if (
    profile &&
    profile.role !== "super_admin" &&
    profile.role !== "tenant_admin"
  ) {
    return (
      <div className="flex h-[50vh] flex-col items-center justify-center space-y-4">
        <h3 className="text-xl font-bold">
          {t("msg.admin.common.forbidden", "접근 권한이 없습니다.")}
        </h3>
        <Button onClick={() => navigate("/")}>
          {t("ui.common.go_home", "홈으로 이동")}
        </Button>
      </div>
    );
  }

  // While redirecting (only if exactly one manageable tenant)
  if (
    profile?.role === "tenant_admin" &&
    (profile.manageableTenants?.length ?? 0) <= 1
  ) {
    return null;
  }

  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
    ?.data?.error;
  const fallbackError =
    !errorMsg && query.isError
      ? t("msg.admin.tenants.fetch_error", "테넌트 목록 조회에 실패했습니다.")
      : null;

  const tenants = query.data?.items ?? [];

  const handleDelete = (tenantId: string, tenantName: string) => {
    if (
      !window.confirm(
        t(
          "msg.admin.tenants.delete_confirm",
          '테넌트 "{{name}}"를 삭제할까요?',
          { name: tenantName },
        ),
      )
    ) {
      return;
    }
    deleteMutation.mutate(tenantId);
  };

  return (
    <div className="space-y-8">
      <header className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-2">
          <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
            <span>{t("ui.admin.tenants.breadcrumb.section", "Tenants")}</span>
            <span>/</span>
            <span className="text-foreground">
              {t("ui.admin.tenants.breadcrumb.list", "List")}
            </span>
          </div>
          <h2 className="text-3xl font-semibold">
            {t("ui.admin.tenants.title", "테넌트 목록")}
          </h2>
          <p className="text-sm text-[var(--color-muted)]">
            {t(
              "msg.admin.tenants.subtitle",
              "시스템에 등록된 모든 테넌트를 평면 목록으로 확인하고 관리합니다.",
            )}
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            onClick={() => query.refetch()}
            disabled={query.isFetching}
          >
            <RefreshCw size={16} />
            {t("ui.common.refresh", "새로고침")}
          </Button>
          <RoleGuard roles={["super_admin"]}>
            <Button asChild>
              <Link to="/tenants/new">
                <Plus size={16} />
                {t("ui.admin.tenants.add", "테넌트 추가")}
              </Link>
            </Button>
          </RoleGuard>
        </div>
      </header>

      <Card className="bg-[var(--color-panel)]">
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>
              {t("ui.admin.tenants.registry.title", "Tenant Registry")}
            </CardTitle>
            <CardDescription>
              {t("msg.admin.tenants.registry.count", "총 {{count}}개 테넌트", {
                count: query.data?.total ?? 0,
              })}
            </CardDescription>
          </div>
          <Badge variant="muted">
            {t("ui.common.badge.admin_only", "Admin only")}
          </Badge>
        </CardHeader>
        <CardContent>
          {(errorMsg || fallbackError) && (
            <div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
              {errorMsg ?? fallbackError}
            </div>
          )}

          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>
                  {t("ui.admin.tenants.table.name", "NAME")}
                </TableHead>
                <TableHead>
                  {t("ui.admin.tenants.table.type", "TYPE")}
                </TableHead>
                <TableHead>
                  {t("ui.admin.tenants.table.slug", "SLUG")}
                </TableHead>
                <TableHead>
                  {t("ui.admin.tenants.table.status", "STATUS")}
                </TableHead>
                <TableHead>
                  {t("ui.admin.tenants.table.members", "MEMBERS")}
                </TableHead>
                <TableHead>
                  {t("ui.admin.tenants.table.updated", "UPDATED")}
                </TableHead>
                <TableHead className="text-right">
                  {t("ui.admin.tenants.table.actions", "ACTIONS")}
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {query.isLoading && (
                <TableRow>
                  <TableCell colSpan={7}>
                    {t("msg.common.loading", "로딩 중...")}
                  </TableCell>
                </TableRow>
              )}
              {!query.isLoading && tenants.length === 0 && (
                <TableRow>
                  <TableCell
                    colSpan={7}
                    className="text-center py-8 text-muted-foreground"
                  >
                    {t(
                      "msg.admin.tenants.empty",
                      "아직 등록된 테넌트가 없습니다.",
                    )}
                  </TableCell>
                </TableRow>
              )}
              {tenants.map((tenant) => (
                <TableRow key={tenant.id}>
                  <TableCell className="font-semibold">{tenant.name}</TableCell>
                  <TableCell>
                    <Badge variant="outline" className="text-[10px] font-mono">
                      {t(
                        `domain.tenant_type.${tenant.type?.toLowerCase()}`,
                        tenant.type,
                      )}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-mono text-xs">
                    {tenant.slug}
                  </TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        tenant.status === "active"
                          ? "default"
                          : tenant.status === "pending"
                            ? "secondary"
                            : "muted"
                      }
                    >
                      {t(`ui.common.status.${tenant.status}`, tenant.status)}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-medium">
                    {tenant.memberCount}
                  </TableCell>
                  <TableCell className="text-xs">
                    {tenant.updatedAt
                      ? new Date(tenant.updatedAt).toLocaleString("ko-KR")
                      : "-"}
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => navigate(`/tenants/${tenant.id}`)}
                      >
                        <Pencil size={14} />
                        {t("ui.common.edit", "편집")}
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleDelete(tenant.id, tenant.name)}
                        disabled={deleteMutation.isPending}
                      >
                        <Trash2 size={14} />
                        {t("ui.common.delete", "삭제")}
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  );
}

export default TenantListPage;