import { useState, useEffect, useCallback, useRef } from 'react';
import {
  fetchUsers,
  fetchRoles,
  fetchOrgs,
  updateUserApi,
  approveUserApi,
  rejectUserApi,
  assignRolesApi,
  type UserListItem,
  type RoleWithPermissions,
  type OrgItem,
} from '@common/services/authApi';
import { getRoleColor, statusLabels } from './adminConstants';
import { RegisterModal } from './contents/RegisterModal';
import { UserDetailModal } from './contents/UserDetailModal';
/* eslint-disable react-refresh/only-export-components */

const PAGE_SIZE = 15;

// ─── 포맷 헬퍼 ─────────────────────────────────────────────────
export function formatDate(dateStr: string | null) {
  if (!dateStr) return '-';
  return new Date(dateStr).toLocaleString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
}


function UsersPanel() {
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('');
  const [orgFilter, setOrgFilter] = useState<string>('');
  const [users, setUsers] = useState<UserListItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [allRoles, setAllRoles] = useState<RoleWithPermissions[]>([]);
  const [allOrgs, setAllOrgs] = useState<OrgItem[]>([]);
  const [roleEditUserId, setRoleEditUserId] = useState<string | null>(null);
  const [selectedRoleSns, setSelectedRoleSns] = useState<number[]>([]);
  const [showRegisterModal, setShowRegisterModal] = useState(false);
  const [detailUser, setDetailUser] = useState<UserListItem | null>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const roleDropdownRef = useRef<HTMLDivElement>(null);

  const loadUsers = useCallback(async () => {
    setLoading(true);
    try {
      const data = await fetchUsers(searchTerm || undefined, statusFilter || undefined);
      setUsers(data);
      setCurrentPage(1);
    } catch (err) {
      console.error('사용자 목록 조회 실패:', err);
    } finally {
      setLoading(false);
    }
  }, [searchTerm, statusFilter]);

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

  useEffect(() => {
    fetchRoles().then(setAllRoles).catch(console.error);
    fetchOrgs().then(setAllOrgs).catch(console.error);
  }, []);

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (roleDropdownRef.current && !roleDropdownRef.current.contains(e.target as Node)) {
        setRoleEditUserId(null);
      }
    };
    if (roleEditUserId) {
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [roleEditUserId]);

  // ─── 필터링 (org 클라이언트 사이드) ───────────────────────────
  const filteredUsers = orgFilter ? users.filter((u) => String(u.orgSn) === orgFilter) : users;

  // ─── 페이지네이션 ──────────────────────────────────────────────
  const totalCount = filteredUsers.length;
  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
  const pagedUsers = filteredUsers.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);

  // ─── 액션 핸들러 ──────────────────────────────────────────────
  const handleUnlock = async (userId: string) => {
    try {
      await updateUserApi(userId, { status: 'ACTIVE' });
      await loadUsers();
    } catch (err) {
      console.error('계정 잠금 해제 실패:', err);
    }
  };

  const handleApprove = async (userId: string) => {
    try {
      await approveUserApi(userId);
      await loadUsers();
    } catch (err) {
      console.error('사용자 승인 실패:', err);
    }
  };

  const handleReject = async (userId: string) => {
    try {
      await rejectUserApi(userId);
      await loadUsers();
    } catch (err) {
      console.error('사용자 거절 실패:', err);
    }
  };

  const handleDeactivate = async (userId: string) => {
    try {
      await updateUserApi(userId, { status: 'INACTIVE' });
      await loadUsers();
    } catch (err) {
      console.error('사용자 비활성화 실패:', err);
    }
  };

  const handleActivate = async (userId: string) => {
    try {
      await updateUserApi(userId, { status: 'ACTIVE' });
      await loadUsers();
    } catch (err) {
      console.error('사용자 활성화 실패:', err);
    }
  };

  const handleOpenRoleEdit = (user: UserListItem) => {
    setRoleEditUserId(user.id);
    setSelectedRoleSns(user.roleSns || []);
  };

  const toggleRoleSelection = (roleSn: number) => {
    setSelectedRoleSns((prev) =>
      prev.includes(roleSn) ? prev.filter((s) => s !== roleSn) : [...prev, roleSn],
    );
  };

  const handleSaveRoles = async (userId: string) => {
    try {
      await assignRolesApi(userId, selectedRoleSns);
      await loadUsers();
      setRoleEditUserId(null);
    } catch (err) {
      console.error('역할 할당 실패:', err);
    }
  };

  const pendingCount = users.filter((u) => u.status === 'PENDING').length;

  return (
    <>
      <div className="flex flex-col h-full">
        {/* 헤더 */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
          <div className="flex items-center gap-3">
            <div>
              <h1 className="text-title-1 font-bold text-fg font-korean">사용자 관리</h1>
              <p className="text-caption text-fg-disabled mt-1 font-korean">
                총 {filteredUsers.length}명
              </p>
            </div>
            {pendingCount > 0 && (
              <span className="px-2.5 py-1 text-caption font-bold rounded-full bg-[rgba(234,179,8,0.15)] text-color-caution border border-[rgba(234,179,8,0.3)] animate-pulse font-korean">
                승인대기 {pendingCount}명
              </span>
            )}
          </div>
          <div className="flex items-center gap-3">
            {/* 소속 필터 */}
            <select
              value={orgFilter}
              onChange={(e) => {
                setOrgFilter(e.target.value);
                setCurrentPage(1);
              }}
              className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
            >
              <option value="">전체 소속</option>
              {allOrgs.map((org) => (
                <option key={org.orgSn} value={String(org.orgSn)}>
                  {org.orgAbbrNm || org.orgNm}
                </option>
              ))}
            </select>
            {/* 상태 필터 */}
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
            >
              <option value="">전체 상태</option>
              <option value="PENDING">승인대기</option>
              <option value="ACTIVE">활성</option>
              <option value="LOCKED">잠김</option>
              <option value="INACTIVE">비활성</option>
              <option value="REJECTED">거절됨</option>
            </select>
            {/* 텍스트 검색 */}
            <input
              type="text"
              placeholder="이름, 계정 검색..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-56 px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
            />
            <button
              onClick={() => setShowRegisterModal(true)}
              className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean"
            >
              + 사용자 등록
            </button>
          </div>
        </div>

        {/* 테이블 */}
        <div className="flex-1 overflow-auto">
          {loading ? (
            <div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
              불러오는 중...
            </div>
          ) : (
            <table className="w-full">
              <thead>
                <tr className="border-b border-stroke bg-bg-surface">
                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean w-10">
                    번호
                  </th>
                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-mono">
                    ID
                  </th>
                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
                    사용자명
                  </th>
                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
                    직급
                  </th>
                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
                    소속
                  </th>
                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
                    이메일
                  </th>
                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
                    역할
                  </th>
                  <th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
                    승인상태
                  </th>
                  <th className="px-4 py-3 text-right text-caption font-semibold text-fg-disabled font-korean">
                    관리
                  </th>
                </tr>
              </thead>
              <tbody>
                {pagedUsers.length === 0 ? (
                  <tr>
                    <td
                      colSpan={9}
                      className="px-6 py-10 text-center text-caption text-fg-disabled font-korean"
                    >
                      조회된 사용자가 없습니다.
                    </td>
                  </tr>
                ) : (
                  pagedUsers.map((user, idx) => {
                    const statusInfo = statusLabels[user.status] || statusLabels.INACTIVE;
                    const rowNum = (currentPage - 1) * PAGE_SIZE + idx + 1;
                    return (
                      <tr
                        key={user.id}
                        className="border-b border-stroke hover:bg-[rgba(6,182,212,0.04)] transition-colors"
                      >
                        {/* 번호 */}
                        <td className="px-4 py-3 text-caption text-fg-disabled font-mono text-center">
                          {rowNum}
                        </td>

                        {/* ID(account) */}
                        <td className="px-4 py-3 text-caption text-fg-sub font-mono">
                          {user.account}
                        </td>

                        {/* 사용자명 */}
                        <td className="px-4 py-3">
                          <button
                            onClick={() => setDetailUser(user)}
                            className="text-caption text-color-accent font-semibold font-korean hover:underline"
                          >
                            {user.name}
                          </button>
                        </td>

                        {/* 직급 */}
                        <td className="px-4 py-3 text-caption text-fg-sub font-korean">
                          {user.rank || '-'}
                        </td>

                        {/* 소속 */}
                        <td className="px-4 py-3 text-caption text-fg-sub font-korean">
                          {user.orgAbbr || user.orgName || '-'}
                        </td>

                        {/* 이메일 */}
                        <td className="px-4 py-3 text-caption text-fg-disabled font-mono">
                          {user.email || '-'}
                        </td>

                        {/* 역할 (인라인 편집) */}
                        <td className="px-4 py-3">
                          <div className="relative">
                            <div
                              className="flex flex-wrap gap-1 cursor-pointer"
                              onClick={() => handleOpenRoleEdit(user)}
                              title="클릭하여 역할 변경"
                            >
                              {user.roles.length > 0 ? (
                                user.roles.map((roleCode) => {
                                  const roleName =
                                    allRoles.find((r) => r.code === roleCode)?.name || roleCode;
                                  return (
                                    <span
                                      key={roleCode}
                                      className="px-2 py-0.5 text-caption font-semibold rounded-md font-korean text-fg-sub bg-bg-elevated border border-stroke-light"
                                    >
                                      {roleName}
                                    </span>
                                  );
                                })
                              ) : (
                                <span className="text-caption text-fg-disabled font-korean">
                                  역할 없음
                                </span>
                              )}
                              <span className="text-caption text-fg-disabled ml-0.5">
                                <svg
                                  width="10"
                                  height="10"
                                  viewBox="0 0 24 24"
                                  fill="none"
                                  stroke="currentColor"
                                  strokeWidth="2.5"
                                >
                                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                                </svg>
                              </span>
                            </div>
                            {roleEditUserId === user.id && (
                              <div
                                ref={roleDropdownRef}
                                className="absolute z-20 top-full left-0 mt-1 p-2 bg-bg-surface border border-stroke rounded-lg shadow-lg min-w-[200px]"
                              >
                                <div className="text-caption text-fg-disabled font-korean font-semibold mb-1.5 px-1">
                                  역할 선택
                                </div>
                                {allRoles.map((role, roleIdx) => {
                                  const color = getRoleColor(role.code, roleIdx);
                                  return (
                                    <label
                                      key={role.sn}
                                      className="flex items-center gap-2 px-2 py-1.5 hover:bg-[rgba(6,182,212,0.08)] rounded cursor-pointer"
                                    >
                                      <input
                                        type="checkbox"
                                        checked={selectedRoleSns.includes(role.sn)}
                                        onChange={() => toggleRoleSelection(role.sn)}
                                        style={{ accentColor: color }}
                                      />
                                      <span className="text-caption font-korean" style={{ color }}>
                                        {role.name}
                                      </span>
                                      <span className="text-caption text-fg-disabled font-mono">
                                        {role.code}
                                      </span>
                                    </label>
                                  );
                                })}
                                <div className="flex justify-end gap-2 mt-2 pt-2 border-t border-stroke">
                                  <button
                                    onClick={() => setRoleEditUserId(null)}
                                    className="px-3 py-1 text-caption text-fg-disabled border border-stroke rounded hover:bg-bg-surface-hover font-korean"
                                  >
                                    취소
                                  </button>
                                  <button
                                    onClick={() => handleSaveRoles(user.id)}
                                    disabled={selectedRoleSns.length === 0}
                                    className="px-3 py-1 text-caption font-semibold rounded bg-color-accent text-bg-0 hover:shadow-[0_0_8px_rgba(6,182,212,0.3)] disabled:opacity-50 font-korean"
                                  >
                                    저장
                                  </button>
                                </div>
                              </div>
                            )}
                          </div>
                        </td>

                        {/* 승인상태 */}
                        <td className="px-4 py-3">
                          <span
                            className={`inline-flex items-center gap-1.5 text-caption font-semibold font-korean ${statusInfo.color}`}
                          >
                            <span className={`w-1.5 h-1.5 rounded-full ${statusInfo.dot}`} />
                            {statusInfo.label}
                          </span>
                        </td>

                        {/* 관리 */}
                        <td className="px-4 py-3 text-right">
                          <div className="flex items-center justify-end gap-2">
                            {user.status === 'PENDING' && (
                              <>
                                <button
                                  onClick={() => handleApprove(user.id)}
                                  className="px-2 py-1 text-caption font-semibold text-color-success border border-color-success rounded hover:bg-[rgba(34,197,94,0.12)] transition-all font-korean"
                                >
                                  승인
                                </button>
                                <button
                                  onClick={() => handleReject(user.id)}
                                  className="px-2 py-1 text-caption font-semibold text-color-danger border border-color-danger rounded hover:bg-[rgba(239,68,68,0.12)] transition-all font-korean"
                                >
                                  거절
                                </button>
                              </>
                            )}
                            {user.status === 'LOCKED' && (
                              <button
                                onClick={() => handleUnlock(user.id)}
                                className="px-2 py-1 text-caption font-semibold text-color-caution border border-color-caution rounded hover:bg-[rgba(234,179,8,0.12)] transition-all font-korean"
                              >
                                잠금해제
                              </button>
                            )}
                            {user.status === 'ACTIVE' && (
                              <button
                                onClick={() => handleDeactivate(user.id)}
                                className="px-2 py-1 text-caption font-semibold text-fg-disabled border border-stroke rounded hover:bg-[rgba(6,182,212,0.08)] transition-all font-korean"
                              >
                                비활성화
                              </button>
                            )}
                            {(user.status === 'INACTIVE' || user.status === 'REJECTED') && (
                              <button
                                onClick={() => handleActivate(user.id)}
                                className="px-2 py-1 text-caption font-semibold text-color-success border border-color-success rounded hover:bg-[rgba(34,197,94,0.12)] transition-all font-korean"
                              >
                                활성화
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })
                )}
              </tbody>
            </table>
          )}
        </div>

        {/* 페이지네이션 */}
        {!loading && totalPages > 1 && (
          <div className="flex items-center justify-between px-6 py-3 border-t border-stroke bg-bg-surface">
            <span className="text-label-2 text-fg-disabled font-korean">
              {(currentPage - 1) * PAGE_SIZE + 1}–{Math.min(currentPage * PAGE_SIZE, totalCount)} /{' '}
              {totalCount}명
            </span>
            <div className="flex items-center gap-1">
              <button
                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                disabled={currentPage === 1}
                className="px-2.5 py-1 text-label-2 border border-stroke text-fg-disabled rounded hover:bg-[rgba(6,182,212,0.08)] disabled:opacity-40 transition-all font-korean"
              >
                이전
              </button>
              {Array.from({ length: totalPages }, (_, i) => i + 1)
                .filter((p) => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2)
                .reduce<(number | '...')[]>((acc, p, i, arr) => {
                  if (
                    i > 0 &&
                    typeof arr[i - 1] === 'number' &&
                    (p as number) - (arr[i - 1] as number) > 1
                  ) {
                    acc.push('...');
                  }
                  acc.push(p);
                  return acc;
                }, [])
                .map((item, i) =>
                  item === '...' ? (
                    <span key={`ellipsis-${i}`} className="px-2 text-label-2 text-fg-disabled">
                      …
                    </span>
                  ) : (
                    <button
                      key={item}
                      onClick={() => setCurrentPage(item as number)}
                      className="px-2.5 py-1 text-label-2 border rounded transition-all font-mono"
                      style={
                        currentPage === item
                          ? {
                              borderColor: 'var(--color-accent)',
                              color: 'var(--color-accent)',
                              background: 'rgba(6,182,212,0.1)',
                            }
                          : { borderColor: 'var(--border)', color: 'var(--fg-disabled)' }
                      }
                    >
                      {item}
                    </button>
                  ),
                )}
              <button
                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                disabled={currentPage === totalPages}
                className="px-2.5 py-1 text-label-2 border border-stroke text-fg-disabled rounded hover:bg-[rgba(6,182,212,0.08)] disabled:opacity-40 transition-all font-korean"
              >
                다음
              </button>
            </div>
          </div>
        )}
      </div>

      {/* 사용자 등록 모달 */}
      {showRegisterModal && (
        <RegisterModal
          allRoles={allRoles}
          allOrgs={allOrgs}
          onClose={() => setShowRegisterModal(false)}
          onSuccess={loadUsers}
        />
      )}

      {/* 사용자 상세/수정 모달 */}
      {detailUser && (
        <UserDetailModal
          user={detailUser}
          allRoles={allRoles}
          allOrgs={allOrgs}
          onClose={() => setDetailUser(null)}
          onUpdated={() => {
            loadUsers();
            // 최신 정보로 모달 갱신을 위해 닫지 않음
          }}
        />
      )}
    </>
  );
}

export default UsersPanel;
