"use client";

import React, { useState, useCallback, useEffect } from "react";
import { use } from "react";
import { Button } from "@/components/ui/button";
import { ArrowLeft, Users, Menu as MenuIcon, Save, AlertCircle } from "lucide-react";
import { roleAPI, RoleGroup } from "@/lib/api/role";
import { useAuth } from "@/hooks/useAuth";
import { useRouter } from "next/navigation";
import { DualListBox } from "@/components/common/DualListBox";
import { MenuPermissionsTable } from "@/components/admin/MenuPermissionsTable";
import { useMenu } from "@/contexts/MenuContext";
import { ScrollToTop } from "@/components/common/ScrollToTop";

/**
 * 권한 그룹 상세 페이지
 * URL: /admin/userMng/rolesList/[id]
 *
 * 기능:
 * - 권한 그룹 멤버 관리 (Dual List Box)
 * - 메뉴 권한 설정 (CRUD 체크박스)
 */
export default function RoleDetailPage({ params }: { params: Promise<{ id: string }> }) {
  // Next.js 15: params는 Promise이므로 React.use()로 unwrap
  const { id: roleId } = use(params);
  const { user: currentUser } = useAuth();
  const router = useRouter();
  const { refreshMenus } = useMenu();

  const isSuperAdmin = currentUser?.companyCode === "*" && currentUser?.userType === "SUPER_ADMIN";

  // 상태 관리
  const [roleGroup, setRoleGroup] = useState<RoleGroup | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 탭 상태
  const [activeTab, setActiveTab] = useState<"members" | "permissions">("members");

  // 멤버 관리 상태
  const [availableUsers, setAvailableUsers] = useState<Array<{ id: string; name: string; dept?: string }>>([]);
  const [selectedUsers, setSelectedUsers] = useState<Array<{ id: string; name: string; dept?: string }>>([]);
  const [isSavingMembers, setIsSavingMembers] = useState(false);

  // 메뉴 권한 상태
  const [menuPermissions, setMenuPermissions] = useState<any[]>([]);
  const [isSavingPermissions, setIsSavingPermissions] = useState(false);

  // 데이터 로드
  const loadRoleGroup = useCallback(async () => {
    setIsLoading(true);
    setError(null);

    try {
      const response = await roleAPI.getById(parseInt(roleId, 10));

      if (response.success && response.data) {
        setRoleGroup(response.data);
      } else {
        setError(response.message || "권한 그룹 정보를 불러오는데 실패했습니다.");
      }
    } catch (err) {
      console.error("권한 그룹 정보 로드 오류:", err);
      setError("권한 그룹 정보를 불러오는 중 오류가 발생했습니다.");
    } finally {
      setIsLoading(false);
    }
  }, [roleId]);

  // 멤버 목록 로드
  const loadMembers = useCallback(async () => {
    if (!roleGroup) return;

    try {
      // 1. 권한 그룹 멤버 조회
      const membersResponse = await roleAPI.getMembers(roleGroup.objid);
      if (membersResponse.success && membersResponse.data) {
        setSelectedUsers(
          membersResponse.data.map((member: any) => ({
            id: member.userId,
            label: member.userName || member.userId,
            description: member.deptName,
          })),
        );
      }

      // 2. 전체 사용자 목록 조회 (같은 회사)
      const userAPI = await import("@/lib/api/user");

      console.log("🔍 사용자 목록 조회 요청:", {
        companyCode: roleGroup.companyCode,
        size: 1000,
      });

      const usersResponse = await userAPI.userAPI.getList({
        companyCode: roleGroup.companyCode,
        size: 1000, // 대량 조회
      });

      console.log("✅ 사용자 목록 응답:", {
        success: usersResponse.success,
        count: usersResponse.data?.length,
        total: usersResponse.total,
      });

      if (usersResponse.success && usersResponse.data) {
        setAvailableUsers(
          usersResponse.data.map((user: any) => ({
            id: user.userId,
            label: user.userName || user.userId,
            description: user.deptName,
          })),
        );
        console.log("📋 설정된 전체 사용자 수:", usersResponse.data.length);
      }
    } catch (err) {
      console.error("멤버 목록 로드 오류:", err);
    }
  }, [roleGroup]);

  // 메뉴 권한 로드
  const loadMenuPermissions = useCallback(async () => {
    if (!roleGroup) return;

    console.log("🔍 [loadMenuPermissions] 메뉴 권한 로드 시작", {
      roleGroupId: roleGroup.objid,
      roleGroupName: roleGroup.authName,
      companyCode: roleGroup.companyCode,
    });

    try {
      const response = await roleAPI.getMenuPermissions(roleGroup.objid);

      console.log("✅ [loadMenuPermissions] API 응답", {
        success: response.success,
        dataCount: response.data?.length,
        data: response.data,
      });

      if (response.success && response.data) {
        setMenuPermissions(response.data);
        console.log("✅ [loadMenuPermissions] 상태 업데이트 완료", {
          count: response.data.length,
        });
      } else {
        console.warn("⚠️ [loadMenuPermissions] 응답 실패", {
          message: response.message,
        });
      }
    } catch (err) {
      console.error("❌ [loadMenuPermissions] 메뉴 권한 로드 오류:", err);
    }
  }, [roleGroup]);

  useEffect(() => {
    loadRoleGroup();
  }, [loadRoleGroup]);

  useEffect(() => {
    if (roleGroup && activeTab === "members") {
      loadMembers();
    } else if (roleGroup && activeTab === "permissions") {
      loadMenuPermissions();
    }
  }, [roleGroup, activeTab, loadMembers, loadMenuPermissions]);

  // 멤버 저장 핸들러
  const handleSaveMembers = useCallback(async () => {
    if (!roleGroup) return;

    setIsSavingMembers(true);
    try {
      // 현재 선택된 사용자 ID 목록
      const selectedUserIds = selectedUsers.map((user) => user.id);

      // 멤버 업데이트 API 호출
      const response = await roleAPI.updateMembers(roleGroup.objid, selectedUserIds);

      if (response.success) {
        alert("멤버가 성공적으로 저장되었습니다.");
        loadMembers(); // 새로고침

        // 사이드바 메뉴 새로고침 (현재 사용자가 영향받을 수 있음)
        await refreshMenus();
      } else {
        alert(response.message || "멤버 저장에 실패했습니다.");
      }
    } catch (err) {
      console.error("멤버 저장 오류:", err);
      alert("멤버 저장 중 오류가 발생했습니다.");
    } finally {
      setIsSavingMembers(false);
    }
  }, [roleGroup, selectedUsers, loadMembers, refreshMenus]);

  // 메뉴 권한 저장 핸들러
  const handleSavePermissions = useCallback(async () => {
    if (!roleGroup) return;

    setIsSavingPermissions(true);
    try {
      const response = await roleAPI.setMenuPermissions(roleGroup.objid, menuPermissions);

      if (response.success) {
        alert("메뉴 권한이 성공적으로 저장되었습니다.");
        loadMenuPermissions(); // 새로고침

        // 사이드바 메뉴 새로고침 (권한 변경 즉시 반영)
        await refreshMenus();
      } else {
        alert(response.message || "메뉴 권한 저장에 실패했습니다.");
      }
    } catch (err) {
      console.error("메뉴 권한 저장 오류:", err);
      alert("메뉴 권한 저장 중 오류가 발생했습니다.");
    } finally {
      setIsSavingPermissions(false);
    }
  }, [roleGroup, menuPermissions, loadMenuPermissions, refreshMenus]);

  if (isLoading) {
    return (
      <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border p-12 shadow-sm">
        <div className="flex flex-col items-center gap-4">
          <div className="border-primary h-8 w-8 animate-spin rounded-full border-4 border-t-transparent"></div>
          <p className="text-muted-foreground text-sm">권한 그룹 정보를 불러오는 중...</p>
        </div>
      </div>
    );
  }

  if (error || !roleGroup) {
    return (
      <div className="bg-card flex h-64 flex-col items-center justify-center rounded-lg border p-6 shadow-sm">
        <AlertCircle className="text-destructive mb-4 h-12 w-12" />
        <h3 className="mb-2 text-lg font-semibold">오류 발생</h3>
        <p className="text-muted-foreground mb-4 text-center text-sm">{error || "권한 그룹을 찾을 수 없습니다."}</p>
        <Button variant="outline" onClick={() => router.push("/admin/userMng/rolesList")}>
          목록으로 돌아가기
        </Button>
      </div>
    );
  }

  return (
    <div className="bg-background flex min-h-screen flex-col">
      <div className="space-y-6 p-6">
        {/* 페이지 헤더 */}
        <div className="space-y-2 border-b pb-4">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" onClick={() => router.push("/admin/userMng/rolesList")} className="h-10 w-10">
              <ArrowLeft className="h-5 w-5" />
            </Button>
            <div className="flex-1">
              <h1 className="text-3xl font-bold tracking-tight">{roleGroup.authName}</h1>
              <p className="text-muted-foreground text-sm">
                {roleGroup.authCode} • {roleGroup.companyCode}
              </p>
            </div>
            <span
              className={`rounded-full px-3 py-1 text-sm font-medium ${
                roleGroup.status === "active" ? "bg-emerald-100 text-emerald-800" : "bg-muted text-foreground"
              }`}
            >
              {roleGroup.status === "active" ? "활성" : "비활성"}
            </span>
          </div>
        </div>

        {/* 탭 네비게이션 */}
        <div className="flex gap-4 border-b">
          <button
            onClick={() => setActiveTab("members")}
            className={`flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors ${
              activeTab === "members"
                ? "border-primary text-primary"
                : "text-muted-foreground hover:text-foreground border-transparent"
            }`}
          >
            <Users className="h-4 w-4" />
            멤버 관리 ({selectedUsers.length})
          </button>
          <button
            onClick={() => setActiveTab("permissions")}
            className={`flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors ${
              activeTab === "permissions"
                ? "border-primary text-primary"
                : "text-muted-foreground hover:text-foreground border-transparent"
            }`}
          >
            <MenuIcon className="h-4 w-4" />
            메뉴 권한 ({menuPermissions.length})
          </button>
        </div>

        {/* 탭 컨텐츠 */}
        <div className="space-y-6">
          {activeTab === "members" && (
            <>
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-xl font-semibold">멤버 관리</h2>
                  <p className="text-muted-foreground text-sm">이 권한 그룹에 속한 사용자를 관리합니다</p>
                </div>
                <Button onClick={handleSaveMembers} disabled={isSavingMembers} className="gap-2">
                  <Save className="h-4 w-4" />
                  {isSavingMembers ? "저장 중..." : "멤버 저장"}
                </Button>
              </div>

              <DualListBox
                availableItems={availableUsers}
                selectedItems={selectedUsers}
                onSelectionChange={setSelectedUsers}
                availableLabel="전체 사용자"
                selectedLabel="그룹 멤버"
                enableSearch
              />
            </>
          )}

          {activeTab === "permissions" && (
            <>
              <div className="flex items-center justify-between">
                <div>
                  <h2 className="text-xl font-semibold">메뉴 권한 설정</h2>
                  <p className="text-muted-foreground text-sm">이 권한 그룹에서 접근 가능한 메뉴와 권한을 설정합니다</p>
                </div>
                <Button onClick={handleSavePermissions} disabled={isSavingPermissions} className="gap-2">
                  <Save className="h-4 w-4" />
                  {isSavingPermissions ? "저장 중..." : "권한 저장"}
                </Button>
              </div>

              <MenuPermissionsTable
                permissions={menuPermissions}
                onPermissionsChange={setMenuPermissions}
                roleGroup={roleGroup}
              />
            </>
          )}
        </div>
      </div>

      {/* Scroll to Top 버튼 (모바일/태블릿 전용) */}
      <ScrollToTop />
    </div>
  );
}
