import { useQuery } from "@tanstack/react-query";
import { ArrowLeft } from "lucide-react";
import { Link, Outlet, useLocation, useParams } from "react-router-dom";
import { Badge } from "../../../components/ui/badge";
import { fetchMe, fetchTenant } from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";

function TenantDetailPage() {
  const params = useParams<{ tenantId: string }>();
  const tenantId = params.tenantId ?? "";
  const location = useLocation();

  const tenantQuery = useQuery({
    queryKey: ["tenant", tenantId],
    queryFn: () => fetchTenant(tenantId),
    enabled: tenantId.length > 0,
  });

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

  const canAccessSchema =
    profile?.role === "super_admin" || profile?.role === "tenant_admin";

  const isPermissionsTab = location.pathname.includes("/permissions");
  const isOrganizationTab = location.pathname.includes("/organization");

  return (
    <div className="space-y-8">
      <header className="flex flex-wrap items-start justify-between gap-4">
        <div className="space-y-2">
          <h2 className="text-3xl font-semibold">
            {tenantQuery.data?.name ??
              t("ui.admin.tenants.detail.loading", "불러오는 중...")}
          </h2>
          <p className="text-sm text-[var(--color-muted)]">
            {t(
              "ui.admin.tenants.detail.header_subtitle",
              "테넌트 정보를 수정하거나 연동 설정을 관리합니다.",
            )}
          </p>
        </div>
      </header>

      {/* Tabs */}
      <div className="flex border-b border-border">
        <Link
          to={`/tenants/${tenantId}`}
          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
            !isPermissionsTab &&
            !location.pathname.includes("/schema") &&
            !isOrganizationTab
              ? "text-primary border-b-2 border-primary"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          {t("ui.admin.tenants.detail.tab_profile", "프로필")}
        </Link>
        <Link
          to={`/tenants/${tenantId}/permissions`}
          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
            isPermissionsTab
              ? "text-primary border-b-2 border-primary"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          {t("ui.admin.tenants.detail.tab_permissions", "권한")}
        </Link>
        <Link
          to={`/tenants/${tenantId}/organization`}
          className={`px-6 py-3 text-sm font-medium transition-colors relative ${
            isOrganizationTab
              ? "text-primary border-b-2 border-primary"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          {t("ui.admin.tenants.detail.tab_organization", "조직 관리")}
        </Link>
        {canAccessSchema && (
          <Link
            to={`/tenants/${tenantId}/schema`}
            className={`px-6 py-3 text-sm font-medium transition-colors relative ${
              location.pathname.includes("/schema")
                ? "text-primary border-b-2 border-primary"
                : "text-muted-foreground hover:text-foreground"
            }`}
          >
            {t("ui.admin.tenants.detail.tab_schema", "사용자 스키마")}
          </Link>
        )}
      </div>

      {/* Outlet for nested routes */}
      <div className="animate-in fade-in duration-500">
        <Outlet />
      </div>
    </div>
  );
}

export default TenantDetailPage;