import { useState, useEffect, useCallback } from 'react';
import { Shield, Plus, Save, Trash2, Search, AlertCircle, RefreshCw } from 'lucide-react';
import { comms } from '@/communication';
import { AuthItem, AuthFieldInfo, GroupUser } from '@/types';
import { UserSearchDialog } from '@/components/user';

interface AuthFormData {
  idx: number;
  user: string;
  account: number;
  purchase: number;
  purchaseEB: number;
  holyday: number;
  project: number;
  jobreport: number;
  scheapp: number;
  equipment: number;
  otconfirm: number;
  holyreq: number;
  kuntae: number;
}

const initialFormData: AuthFormData = {
  idx: 0,
  user: '',
  account: 0,
  purchase: 0,
  purchaseEB: 0,
  holyday: 0,
  project: 0,
  jobreport: 0,
  scheapp: 0,
  equipment: 0,
  otconfirm: 0,
  holyreq: 0,
  kuntae: 0,
};

// 권한 필드 정보 (하드코딩 - API와 동일)
const authFields: AuthFieldInfo[] = [
  { field: 'user', label: '사용자 ID', description: '권한을 설정할 사용자 ID' },
  { field: 'account', label: '계정', description: '계정 관리 권한' },
  { field: 'purchase', label: '구매', description: '구매 관리 권한' },
  { field: 'purchaseEB', label: '구매(전자실)', description: '전자실 구매 권한' },
  { field: 'holyday', label: '출근부', description: '출근부 관리 권한' },
  { field: 'project', label: '프로젝트', description: '프로젝트 관리 권한' },
  { field: 'jobreport', label: '업무일지', description: '업무일지 관리 권한' },
  { field: 'scheapp', label: '스케쥴', description: '스케쥴 관리 권한' },
  { field: 'equipment', label: '장비목록', description: '장비 목록 관리 권한' },
  { field: 'otconfirm', label: 'OT승인', description: '초과근무 승인 권한' },
  { field: 'holyreq', label: '휴가요청', description: '휴가 요청 관리 권한' },
  { field: 'kuntae', label: '근태', description: '근태 관리 권한' },
];

export default function UserAuth() {
  const [loading, setLoading] = useState(true);
  const [canAccess, setCanAccess] = useState(false);
  const [accessMessage, setAccessMessage] = useState('');
  const [authList, setAuthList] = useState<AuthItem[]>([]);
  const [filteredList, setFilteredList] = useState<AuthItem[]>([]);
  const [searchKey, setSearchKey] = useState('');
  const [selectedItem, setSelectedItem] = useState<AuthItem | null>(null);
  const [formData, setFormData] = useState<AuthFormData>(initialFormData);
  const [processing, setProcessing] = useState(false);
  const [hasChanges, setHasChanges] = useState(false);
  const [userNameMap, setUserNameMap] = useState<Record<string, string>>({});
  const [showUserSearch, setShowUserSearch] = useState(false);

  // 접근 권한 확인
  const checkAccess = useCallback(async () => {
    try {
      const response = await comms.userAuthCanAccess();
      if (response.Success) {
        setCanAccess(response.CanAccess ?? false);
        if (!response.CanAccess) {
          setAccessMessage(response.Message || '(관리자/계정담당자) 전용 메뉴 입니다');
        }
      } else {
        setCanAccess(false);
        setAccessMessage(response.Message || '접근 권한 확인 실패');
      }
    } catch (error) {
      console.error('접근 권한 확인 오류:', error);
      setCanAccess(false);
      setAccessMessage('접근 권한 확인 중 오류가 발생했습니다');
    }
  }, []);

  // 사용자 이름 목록 로드
  const loadUserNames = useCallback(async () => {
    try {
      const result = await comms.getUserList('%');
      if (Array.isArray(result)) {
        const nameMap: Record<string, string> = {};
        result.forEach((user: GroupUser) => {
          nameMap[user.id] = user.name;
        });
        setUserNameMap(nameMap);
      }
    } catch (error) {
      console.error('사용자 이름 목록 로드 오류:', error);
    }
  }, []);

  // 목록 로드
  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const response = await comms.getUserAuthList();
      if (response.Success && response.Data) {
        setAuthList(response.Data);
        setFilteredList(response.Data);
      }
    } catch (error) {
      console.error('권한 목록 로드 오류:', error);
    } finally {
      setLoading(false);
    }
  }, []);

  // 초기 로드
  useEffect(() => {
    const init = async () => {
      await checkAccess();
      await loadUserNames();
      await loadData();
    };
    init();
  }, [checkAccess, loadUserNames, loadData]);

  // 검색 필터링 (사번 또는 이름으로 검색)
  useEffect(() => {
    if (!searchKey.trim()) {
      setFilteredList(authList);
    } else {
      const key = searchKey.toLowerCase();
      setFilteredList(authList.filter(item =>
        item.user.toLowerCase().includes(key) ||
        (userNameMap[item.user] || '').toLowerCase().includes(key)
      ));
    }
  }, [searchKey, authList, userNameMap]);

  // 항목 선택
  const handleSelectItem = (item: AuthItem) => {
    if (hasChanges) {
      if (!confirm('변경사항이 있습니다. 저장하지 않고 다른 항목을 선택하시겠습니까?')) {
        return;
      }
    }
    setSelectedItem(item);
    setFormData({
      idx: item.idx,
      user: item.user,
      account: item.account || 0,
      purchase: item.purchase || 0,
      purchaseEB: item.purchaseEB || 0,
      holyday: item.holyday || 0,
      project: item.project || 0,
      jobreport: item.jobreport || 0,
      scheapp: item.scheapp || 0,
      equipment: item.equipment || 0,
      otconfirm: item.otconfirm || 0,
      holyreq: item.holyreq || 0,
      kuntae: item.kuntae || 0,
    });
    setHasChanges(false);
  };

  // 새 항목 추가 - 사용자 검색 다이얼로그 열기
  const handleAddNew = () => {
    if (hasChanges) {
      if (!confirm('변경사항이 있습니다. 저장하지 않고 새 항목을 추가하시겠습니까?')) {
        return;
      }
    }
    setShowUserSearch(true);
  };

  // 사용자 검색에서 선택 시
  const handleUserSelected = async (user: GroupUser) => {
    // 이미 등록된 사용자인지 확인
    const existingItem = authList.find(item => item.user === user.id);
    if (existingItem) {
      // 이미 등록되어 있으면 해당 항목 선택
      handleSelectItem(existingItem);
      return;
    }

    // 새 사용자 권한 추가
    setProcessing(true);
    try {
      const response = await comms.saveUserAuth(
        0, // 새 항목
        user.id,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 // 모든 권한 0으로 초기화
      );

      if (response.Success) {
        // 목록 새로고침
        await loadData();
        // 새로 추가된 항목 선택
        const data = response.Data as { idx?: number } | undefined;
        const newIdx = data?.idx;
        if (newIdx) {
          // 잠시 후 새 항목 선택 (loadData가 완료된 후)
          setTimeout(() => {
            const newItem = authList.find(item => item.user === user.id);
            if (newItem) {
              handleSelectItem(newItem);
            } else {
              // authList가 아직 업데이트되지 않았을 수 있으므로 폼 데이터 직접 설정
              setSelectedItem(null);
              setFormData({
                idx: newIdx,
                user: user.id,
                account: 0, purchase: 0, purchaseEB: 0, holyday: 0,
                project: 0, jobreport: 0, scheapp: 0, equipment: 0,
                otconfirm: 0, holyreq: 0, kuntae: 0,
              });
              setHasChanges(false);
            }
          }, 100);
        }
      } else {
        alert(response.Message || '사용자 추가에 실패했습니다.');
      }
    } catch (error) {
      console.error('사용자 추가 오류:', error);
      alert('사용자 추가 중 오류가 발생했습니다.');
    } finally {
      setProcessing(false);
    }
  };

  // 필드 변경
  const handleFieldChange = (field: keyof AuthFormData, value: string | number) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    setHasChanges(true);
  };

  // 저장
  const handleSave = async () => {
    if (!formData.user.trim()) {
      alert('사용자 ID를 입력하세요.');
      return;
    }

    setProcessing(true);
    try {
      const response = await comms.saveUserAuth(
        formData.idx,
        formData.user,
        formData.account,
        formData.purchase,
        formData.purchaseEB,
        formData.holyday,
        formData.project,
        formData.jobreport,
        formData.scheapp,
        formData.equipment,
        formData.otconfirm,
        formData.holyreq,
        formData.kuntae
      );

      if (response.Success) {
        setHasChanges(false);
        await loadData();
        // 새로 추가한 경우 해당 항목 선택
        const data = response.Data as { idx?: number } | undefined;
        if (formData.idx === 0 && data?.idx) {
          const newIdx = data.idx;
          const newItem = authList.find(item => item.idx === newIdx);
          if (newItem) {
            setSelectedItem(newItem);
            setFormData(prev => ({ ...prev, idx: newIdx }));
          }
        }
      } else {
        alert(response.Message || '저장에 실패했습니다.');
      }
    } catch (error) {
      console.error('저장 오류:', error);
      alert('저장 중 오류가 발생했습니다.');
    } finally {
      setProcessing(false);
    }
  };

  // 삭제
  const handleDelete = async () => {
    if (!selectedItem) return;

    if (!confirm(`"${selectedItem.user}" 사용자의 권한 설정을 삭제하시겠습니까?`)) {
      return;
    }

    setProcessing(true);
    try {
      const response = await comms.deleteUserAuth(selectedItem.idx);
      if (response.Success) {
        setSelectedItem(null);
        setFormData(initialFormData);
        setHasChanges(false);
        await loadData();
      } else {
        alert(response.Message || '삭제에 실패했습니다.');
      }
    } catch (error) {
      console.error('삭제 오류:', error);
      alert('삭제 중 오류가 발생했습니다.');
    } finally {
      setProcessing(false);
    }
  };

  // 접근 불가 화면
  if (!canAccess && !loading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="glass-effect rounded-2xl p-8 text-center max-w-md">
          <AlertCircle className="w-16 h-16 text-danger-400 mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-white mb-2">접근 권한 없음</h2>
          <p className="text-white/70">{accessMessage}</p>
        </div>
      </div>
    );
  }

  return (
    <>
      <div className="space-y-6 animate-fade-in h-full flex flex-col">
        {/* 헤더 */}
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <div className="p-2 bg-primary-500/20 rounded-xl">
              <Shield className="w-6 h-6 text-primary-400" />
            </div>
            <div>
              <h1 className="text-2xl font-bold text-white">사용자 권한</h1>
              <p className="text-white/60 text-sm">사용자별 기능 접근 권한 설정</p>
            </div>
          </div>
          <div className="flex items-center space-x-2">
            <button
              onClick={loadData}
              disabled={loading}
              className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
              title="새로고침"
            >
              <RefreshCw className={`w-5 h-5 text-white/70 ${loading ? 'animate-spin' : ''}`} />
            </button>
          </div>
        </div>

        {/* 메인 컨텐츠 */}
        <div className="flex-1 flex gap-6 min-h-0">
          {/* 좌측: 사용자 목록 */}
          <div className="w-80 glass-effect rounded-2xl p-4 flex flex-col">
            {/* 검색 */}
            <div className="relative mb-4">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/50" />
              <input
                type="text"
                value={searchKey}
                onChange={(e) => setSearchKey(e.target.value)}
                placeholder="사번/이름 검색..."
                className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400"
              />
            </div>

            {/* 추가 버튼 */}
            <button
              onClick={handleAddNew}
              className="w-full mb-4 flex items-center justify-center space-x-2 px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors"
            >
              <Plus className="w-4 h-4" />
              <span>새 사용자 추가</span>
            </button>

            {/* 목록 */}
            <div className="flex-1 overflow-y-auto space-y-2">
              {loading ? (
                <div className="text-center py-8">
                  <RefreshCw className="w-6 h-6 animate-spin text-primary-400 mx-auto mb-2" />
                  <p className="text-white/50">로딩 중...</p>
                </div>
              ) : filteredList.length === 0 ? (
                <div className="text-center py-8 text-white/50">
                  {searchKey ? '검색 결과가 없습니다' : '등록된 사용자가 없습니다'}
                </div>
              ) : (
                filteredList.map(item => (
                  <button
                    key={item.idx}
                    onClick={() => handleSelectItem(item)}
                    className={`w-full text-left px-4 py-3 rounded-lg transition-colors ${
                      selectedItem?.idx === item.idx
                        ? 'bg-primary-500/30 border border-primary-400/50'
                        : 'bg-white/5 hover:bg-white/10 border border-transparent'
                    }`}
                  >
                    <div className="font-medium text-white">
                      {item.user}
                      {userNameMap[item.user] && (
                        <span className="text-white/60 font-normal ml-2">({userNameMap[item.user]})</span>
                      )}
                    </div>
                    <div className="text-xs text-white/50 mt-1">
                      계정: {item.account || 0} | 구매: {item.purchase || 0} | 업무일지: {item.jobreport || 0}
                    </div>
                  </button>
                ))
              )}
            </div>

            {/* 항목 수 */}
            <div className="mt-4 pt-4 border-t border-white/10 text-center text-sm text-white/50">
              총 {filteredList.length}명
            </div>
          </div>

          {/* 우측: 상세 편집 */}
          <div className="flex-1 glass-effect rounded-2xl p-6 overflow-y-auto">
            {formData.idx === 0 && !formData.user ? (
              <div className="h-full flex items-center justify-center text-white/50">
                <div className="text-center">
                  <Shield className="w-12 h-12 mx-auto mb-4 opacity-50" />
                  <p>좌측에서 사용자를 선택하거나</p>
                  <p>새 사용자를 추가하세요</p>
                </div>
              </div>
            ) : (
              <div className="space-y-4">
                {/* 권한 설정 그리드 */}
                <div>
                  <p className="text-white/50 text-sm mb-4">0: 권한 없음, 1~9: 레벨 (숫자가 높을수록 높은 권한)</p>

                  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                    {authFields.filter(f => f.field !== 'user').map(field => (
                      <div key={field.field} className="bg-white/5 rounded-lg p-3">
                        <label className="block text-white/70 text-sm font-medium mb-2">
                          {field.label}
                        </label>
                        <input
                          type="number"
                          min="0"
                          max="10"
                          value={formData[field.field as keyof AuthFormData] || 0}
                          onChange={(e) => handleFieldChange(field.field as keyof AuthFormData, parseInt(e.target.value) || 0)}
                          className="w-full bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-center focus:outline-none focus:ring-2 focus:ring-primary-400"
                        />
                        <p className="text-xs text-white/40 mt-1 truncate" title={field.description}>
                          {field.description}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>

                {/* 버튼 영역 */}
                <div className="flex justify-between pt-4 border-t border-white/10">
                  <div>
                    {selectedItem && (
                      <button
                        onClick={handleDelete}
                        disabled={processing}
                        className="flex items-center space-x-2 px-4 py-2 bg-danger-500 hover:bg-danger-600 text-white rounded-lg transition-colors disabled:opacity-50"
                      >
                        <Trash2 className="w-4 h-4" />
                        <span>삭제</span>
                      </button>
                    )}
                  </div>
                  <button
                    onClick={handleSave}
                    disabled={processing || !hasChanges}
                    className="flex items-center space-x-2 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors disabled:opacity-50"
                  >
                    <Save className="w-4 h-4" />
                    <span>{processing ? '저장 중...' : '저장'}</span>
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 사용자 검색 다이얼로그 */}
      <UserSearchDialog
        isOpen={showUserSearch}
        onClose={() => setShowUserSearch(false)}
        onSelect={handleUserSelected}
        title="사용자 선택"
        excludeUsers={authList.map(item => item.user)}
        initialSearchKey={searchKey}
      />
    </>
  );
}
