import { useState, useEffect, useCallback } from 'react';
import {
  Plus,
  Edit2,
  Trash2,
  Flag,
  Zap,
  CheckCircle,
  X,
  Loader2,
} from 'lucide-react';
import { comms } from '@/communication';
import { TodoModel, TodoStatus, TodoPriority } from '@/types';

// 상태/중요도 유틸리티 함수들
const getStatusText = (status: string): string => {
  switch (status) {
    case '0': return '대기';
    case '1': return '진행';
    case '2': return '취소';
    case '3': return '보류';
    case '5': return '완료';
    default: return '대기';
  }
};

const getStatusClass = (status: string): string => {
  switch (status) {
    case '0': return 'bg-gray-500/20 text-gray-300 border-gray-500/30';
    case '1': return 'bg-primary-500/20 text-primary-300 border-primary-500/30';
    case '2': return 'bg-danger-500/20 text-danger-300 border-danger-500/30';
    case '3': return 'bg-warning-500/20 text-warning-300 border-warning-500/30';
    case '5': return 'bg-success-500/20 text-success-300 border-success-500/30';
    default: return 'bg-white/10 text-white/50 border-white/20';
  }
};

const getPriorityText = (seqno: number): string => {
  switch (seqno) {
    case -1: return '낮음';
    case 1: return '중요';
    case 2: return '매우 중요';
    case 3: return '긴급';
    default: return '보통';
  }
};

const getPriorityClass = (seqno: number): string => {
  switch (seqno) {
    case -1: return 'bg-white/5 text-white/40';
    case 1: return 'bg-primary-500/20 text-primary-300';
    case 2: return 'bg-warning-500/20 text-warning-300';
    case 3: return 'bg-danger-500/20 text-danger-300';
    default: return 'bg-white/10 text-white/50';
  }
};

// 폼 데이터 타입
interface TodoFormData {
  title: string;
  remark: string;
  expire: string;
  seqno: TodoPriority;
  flag: boolean;
  request: string;
  status: TodoStatus;
}

const initialFormData: TodoFormData = {
  title: '',
  remark: '',
  expire: '',
  seqno: 0,
  flag: false,
  request: '',
  status: '0',
};

export function Todo() {
  const [todos, setTodos] = useState<TodoModel[]>([]);
  const [loading, setLoading] = useState(true);
  const [processing, setProcessing] = useState(false);
  const [activeTab, setActiveTab] = useState<'active' | 'hold' | 'completed' | 'cancelled'>('active');

  // 모달 상태
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [editingTodo, setEditingTodo] = useState<TodoModel | null>(null);
  const [formData, setFormData] = useState<TodoFormData>(initialFormData);

  // 할일 목록 로드
  const loadTodos = useCallback(async () => {
    try {
      const response = await comms.getTodos();
      if (response.Success && response.Data) {
        setTodos(response.Data);
      }
    } catch (error) {
      console.error('할일 목록 로드 오류:', error);
      alert('할일 목록을 불러오는 중 오류가 발생했습니다.');
    } finally {
      setLoading(false);
    }
  }, []);

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

  // 필터링된 할일 목록
  const activeTodos = todos.filter(todo => todo.status === '0' || todo.status === '1'); // 대기 + 진행
  const holdTodos = todos.filter(todo => todo.status === '3'); // 보류
  const completedTodos = todos.filter(todo => todo.status === '5'); // 완료
  const cancelledTodos = todos.filter(todo => todo.status === '2'); // 취소

  // 새 할일 추가
  const handleAdd = async () => {
    if (!formData.remark.trim()) {
      alert('할일 내용을 입력해주세요.');
      return;
    }

    setProcessing(true);
    try {
      const response = await comms.createTodo(
        formData.title,
        formData.remark,
        formData.expire || null,
        formData.seqno,
        formData.flag,
        formData.request || null,
        formData.status
      );

      if (response.Success) {
        setShowAddModal(false);
        setFormData(initialFormData);
        loadTodos();
      } else {
        alert(response.Message || '할일 추가에 실패했습니다.');
      }
    } catch (error) {
      console.error('할일 추가 오류:', error);
      alert('서버 연결에 실패했습니다.');
    } finally {
      setProcessing(false);
    }
  };

  // 할일 수정 모달 열기
  const openEditModal = async (todo: TodoModel) => {
    try {
      const response = await comms.getTodo(todo.idx);
      if (response.Success && response.Data) {
        const data = response.Data;
        setEditingTodo(data);
        setFormData({
          title: data.title || '',
          remark: data.remark || '',
          expire: data.expire ? data.expire.split('T')[0] : '',
          seqno: data.seqno as TodoPriority,
          flag: data.flag || false,
          request: data.request || '',
          status: data.status as TodoStatus,
        });
        setShowEditModal(true);
      }
    } catch (error) {
      console.error('할일 조회 오류:', error);
      alert('할일 정보를 불러오는 중 오류가 발생했습니다.');
    }
  };

  // 할일 수정
  const handleUpdate = async () => {
    if (!editingTodo || !formData.remark.trim()) {
      alert('할일 내용을 입력해주세요.');
      return;
    }

    setProcessing(true);
    try {
      const response = await comms.updateTodo(
        editingTodo.idx,
        formData.title,
        formData.remark,
        formData.expire || null,
        formData.seqno,
        formData.flag,
        formData.request || null,
        formData.status
      );

      if (response.Success) {
        setShowEditModal(false);
        setEditingTodo(null);
        setFormData(initialFormData);
        loadTodos();
      } else {
        alert(response.Message || '할일 수정에 실패했습니다.');
      }
    } catch (error) {
      console.error('할일 수정 오류:', error);
      alert('서버 연결에 실패했습니다.');
    } finally {
      setProcessing(false);
    }
  };

  // 할일 삭제
  const handleDelete = async (id: number) => {
    if (!confirm('정말로 이 할일을 삭제하시겠습니까?')) {
      return;
    }

    setProcessing(true);
    try {
      const response = await comms.deleteTodo(id);
      if (response.Success) {
        loadTodos();
      } else {
        alert(response.Message || '할일 삭제에 실패했습니다.');
      }
    } catch (error) {
      console.error('할일 삭제 오류:', error);
      alert('서버 연결에 실패했습니다.');
    } finally {
      setProcessing(false);
    }
  };

  // 상태 빠른 변경
  const handleQuickStatusChange = async (todo: TodoModel, newStatus: TodoStatus) => {
    setProcessing(true);
    try {
      const response = await comms.updateTodo(
        todo.idx,
        todo.title,
        todo.remark,
        todo.expire,
        todo.seqno,
        todo.flag,
        todo.request,
        newStatus
      );

      if (response.Success) {
        loadTodos();
      } else {
        alert(response.Message || '상태 변경에 실패했습니다.');
      }
    } catch (error) {
      console.error('상태 변경 오류:', error);
    } finally {
      setProcessing(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6 animate-fade-in">
      {/* 헤더 */}
      <div className="glass-effect rounded-2xl overflow-hidden">
        <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between">
          <h2 className="text-xl font-semibold text-white flex items-center">
            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
            내 할일 목록
          </h2>
          <button
            onClick={() => {
              setFormData(initialFormData);
              setShowAddModal(true);
            }}
            className="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center text-sm"
          >
            <Plus className="w-4 h-4 mr-1" />
            새 할일 추가
          </button>
        </div>

        {/* 탭 메뉴 */}
        <div className="px-6 py-2 border-b border-white/10">
          <div className="flex space-x-1 bg-white/5 rounded-lg p-1">
            <button
              onClick={() => setActiveTab('active')}
              className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
                activeTab === 'active'
                  ? 'text-white bg-white/20 shadow-sm'
                  : 'text-white/60 hover:text-white hover:bg-white/10'
              }`}
            >
              <div className="flex items-center justify-center space-x-2">
                <Zap className="w-4 h-4" />
                <span>진행중</span>
                <span className="px-2 py-0.5 text-xs bg-primary-500/30 text-primary-200 rounded-full">
                  {activeTodos.length}
                </span>
              </div>
            </button>
            <button
              onClick={() => setActiveTab('hold')}
              className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
                activeTab === 'hold'
                  ? 'text-white bg-white/20 shadow-sm'
                  : 'text-white/60 hover:text-white hover:bg-white/10'
              }`}
            >
              <div className="flex items-center justify-center space-x-2">
                <span>보류</span>
                <span className="px-2 py-0.5 text-xs bg-warning-500/30 text-warning-200 rounded-full">
                  {holdTodos.length}
                </span>
              </div>
            </button>
            <button
              onClick={() => setActiveTab('completed')}
              className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
                activeTab === 'completed'
                  ? 'text-white bg-white/20 shadow-sm'
                  : 'text-white/60 hover:text-white hover:bg-white/10'
              }`}
            >
              <div className="flex items-center justify-center space-x-2">
                <CheckCircle className="w-4 h-4" />
                <span>완료</span>
                <span className="px-2 py-0.5 text-xs bg-success-500/30 text-success-200 rounded-full">
                  {completedTodos.length}
                </span>
              </div>
            </button>
            <button
              onClick={() => setActiveTab('cancelled')}
              className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
                activeTab === 'cancelled'
                  ? 'text-white bg-white/20 shadow-sm'
                  : 'text-white/60 hover:text-white hover:bg-white/10'
              }`}
            >
              <div className="flex items-center justify-center space-x-2">
                <X className="w-4 h-4" />
                <span>취소</span>
                <span className="px-2 py-0.5 text-xs bg-danger-500/30 text-danger-200 rounded-full">
                  {cancelledTodos.length}
                </span>
              </div>
            </button>
          </div>
        </div>

        {/* 할일 테이블 */}
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-white/10">
              <tr>
                {activeTab === 'active' && (
                  <th className="px-2 py-4 text-center text-xs font-medium text-white/70 uppercase tracking-wider w-10 border-r border-white/10"></th>
                )}
                <th className="px-3 py-4 text-center text-xs font-medium text-white/70 uppercase tracking-wider w-16 border-r border-white/10">상태</th>
                <th className="px-3 py-4 text-center text-xs font-medium text-white/70 uppercase tracking-wider w-16 border-r border-white/10">플래그</th>
                <th className="px-4 py-4 text-center text-xs font-medium text-white/70 uppercase tracking-wider border-r border-white/10">제목</th>
                <th className="px-3 py-4 text-center text-xs font-medium text-white/70 uppercase tracking-wider w-24 border-r border-white/10">요청자</th>
                <th className="px-3 py-4 text-center text-xs font-medium text-white/70 uppercase tracking-wider w-20 border-r border-white/10">중요도</th>
                <th className="px-3 py-4 text-center text-xs font-medium text-white/70 uppercase tracking-wider w-24">
                  {activeTab === 'completed' ? '완료일' : '만료일'}
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-white/10">
              {(activeTab === 'active' ? activeTodos : activeTab === 'hold' ? holdTodos : activeTab === 'completed' ? completedTodos : cancelledTodos).map((todo) => (
                <TodoRow
                  key={todo.idx}
                  todo={todo}
                  showOkdate={activeTab === 'completed'}
                  showCompleteButton={activeTab === 'active'}
                  onEdit={() => openEditModal(todo)}
                  onComplete={() => handleQuickStatusChange(todo, '5')}
                />
              ))}
              {(activeTab === 'active' ? activeTodos : activeTab === 'hold' ? holdTodos : activeTab === 'completed' ? completedTodos : cancelledTodos).length === 0 && (
                <tr>
                  <td colSpan={activeTab === 'active' ? 7 : 6} className="px-6 py-8 text-center text-white/50">
                    {activeTab === 'active' ? '진행중인 할일이 없습니다' : activeTab === 'hold' ? '보류된 할일이 없습니다' : activeTab === 'completed' ? '완료된 할일이 없습니다' : '취소된 할일이 없습니다'}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* 로딩 인디케이터 */}
      {processing && (
        <div className="fixed top-4 right-4 bg-white/20 backdrop-blur-sm rounded-full px-4 py-2 text-white text-sm flex items-center">
          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
          처리 중...
        </div>
      )}

      {/* 추가 모달 */}
      {showAddModal && (
        <TodoModal
          title="새 할일 추가"
          formData={formData}
          setFormData={setFormData}
          onSubmit={handleAdd}
          onClose={() => setShowAddModal(false)}
          submitText="추가"
          processing={processing}
        />
      )}

      {/* 수정 모달 */}
      {showEditModal && editingTodo && (
        <TodoModal
          title="할일 수정"
          formData={formData}
          setFormData={setFormData}
          onSubmit={handleUpdate}
          onClose={() => {
            setShowEditModal(false);
            setEditingTodo(null);
          }}
          submitText="수정"
          processing={processing}
          isEdit={true}
          onComplete={() => {
            handleQuickStatusChange(editingTodo, '5');
            setShowEditModal(false);
            setEditingTodo(null);
          }}
          onDelete={() => {
            handleDelete(editingTodo.idx);
            setShowEditModal(false);
            setEditingTodo(null);
          }}
          currentStatus={editingTodo.status}
        />
      )}
    </div>
  );
}

// 할일 행 컴포넌트
interface TodoRowProps {
  todo: TodoModel;
  showOkdate: boolean;
  showCompleteButton?: boolean;
  onEdit: () => void;
  onComplete: () => void;
}

function TodoRow({ todo, showOkdate, showCompleteButton = true, onEdit, onComplete }: TodoRowProps) {
  const isExpired = todo.expire && new Date(todo.expire) < new Date();

  const handleComplete = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (confirm('이 할일을 완료 처리하시겠습니까?')) {
      onComplete();
    }
  };

  return (
    <tr
      className="hover:bg-white/5 transition-colors cursor-pointer"
      onClick={onEdit}
    >
      {showCompleteButton && (
        <td className="px-2 py-4 text-center border-r border-white/10">
          <button
            onClick={handleComplete}
            className="p-1.5 bg-success-500/20 hover:bg-success-500/40 text-success-300 rounded-full transition-colors"
            title="완료 처리"
          >
            <CheckCircle className="w-4 h-4" />
          </button>
        </td>
      )}
      <td className="px-3 py-4 text-center whitespace-nowrap border-r border-white/10">
        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getStatusClass(todo.status)}`}>
          {getStatusText(todo.status)}
        </span>
      </td>
      <td className="px-3 py-4 text-center whitespace-nowrap border-r border-white/10">
        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
          todo.flag ? 'bg-warning-500/20 text-warning-300' : 'bg-white/10 text-white/50'
        }`}>
          {todo.flag ? <Flag className="w-3 h-3 mr-1" /> : null}
          {todo.flag ? '고정' : '일반'}
        </span>
      </td>
      <td className="px-4 py-4 text-left text-white border-r border-white/10">{todo.title || '제목 없음'}</td>
      <td className="px-3 py-4 text-center text-white/80 border-r border-white/10">{todo.request || '-'}</td>
      <td className="px-3 py-4 text-center whitespace-nowrap border-r border-white/10">
        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${getPriorityClass(todo.seqno)}`}>
          {getPriorityText(todo.seqno)}
        </span>
      </td>
      <td className={`px-3 py-4 text-center whitespace-nowrap ${showOkdate ? 'text-success-400' : (isExpired ? 'text-danger-400' : 'text-white/80')}`}>
        {showOkdate
          ? (todo.okdate ? new Date(todo.okdate).toLocaleDateString('ko-KR', { year: '2-digit', month: '2-digit', day: '2-digit' }) : '-')
          : (todo.expire ? new Date(todo.expire).toLocaleDateString('ko-KR', { year: '2-digit', month: '2-digit', day: '2-digit' }) : '-')
        }
      </td>
    </tr>
  );
}

// 할일 모달 컴포넌트
interface TodoModalProps {
  title: string;
  formData: TodoFormData;
  setFormData: React.Dispatch<React.SetStateAction<TodoFormData>>;
  onSubmit: () => void;
  onClose: () => void;
  submitText: string;
  processing: boolean;
  isEdit?: boolean;
  onComplete?: () => void;
  onDelete?: () => void;
  currentStatus?: string;
}

function TodoModal({
  title,
  formData,
  setFormData,
  onSubmit,
  onClose,
  submitText,
  processing,
  isEdit = false,
  onComplete,
  onDelete,
  currentStatus,
}: TodoModalProps) {
  const statusOptions: { value: TodoStatus; label: string }[] = [
    { value: '0', label: '대기' },
    { value: '1', label: '진행' },
    { value: '3', label: '보류' },
    { value: '2', label: '취소' },
    { value: '5', label: '완료' },
  ];

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50" onClick={onClose}>
      <div className="flex items-center justify-center min-h-screen p-4">
        <div
          className="glass-effect rounded-2xl w-full max-w-2xl animate-slide-up"
          onClick={(e) => e.stopPropagation()}
        >
          {/* 헤더 */}
          <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between">
            <h2 className="text-xl font-semibold text-white flex items-center">
              <Plus className="w-5 h-5 mr-2" />
              {title}
            </h2>
            <div className="flex items-center space-x-2">
              {isEdit && onComplete && currentStatus !== '5' && (
                <button
                  type="button"
                  onClick={onComplete}
                  disabled={processing}
                  className="bg-success-500 hover:bg-success-600 text-white px-3 py-1.5 rounded-lg transition-colors flex items-center disabled:opacity-50 text-sm"
                >
                  <CheckCircle className="w-4 h-4 mr-1" />
                  완료 처리
                </button>
              )}
              <button onClick={onClose} className="text-white/70 hover:text-white transition-colors">
                <X className="w-6 h-6" />
              </button>
            </div>
          </div>

          {/* 내용 */}
          <div className="p-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-white/70 text-sm font-medium mb-2">제목 (선택사항)</label>
                <input
                  type="text"
                  value={formData.title}
                  onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
                  className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                  placeholder="할일 제목을 입력하세요"
                />
              </div>
              <div>
                <label className="block text-white/70 text-sm font-medium mb-2">만료일 (선택사항)</label>
                <input
                  type="date"
                  value={formData.expire}
                  onChange={(e) => setFormData(prev => ({ ...prev, expire: e.target.value }))}
                  className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                />
              </div>
            </div>

            <div>
              <label className="block text-white/70 text-sm font-medium mb-2">내용 *</label>
              <textarea
                value={formData.remark}
                onChange={(e) => setFormData(prev => ({ ...prev, remark: e.target.value }))}
                rows={3}
                className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                placeholder="할일 내용을 입력하세요 (필수)"
                required
              />
            </div>

            <div>
              <label className="block text-white/70 text-sm font-medium mb-2">요청자</label>
              <input
                type="text"
                value={formData.request}
                onChange={(e) => setFormData(prev => ({ ...prev, request: e.target.value }))}
                className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                placeholder="업무 요청자를 입력하세요"
              />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label className="block text-white/70 text-sm font-medium mb-2">진행상태</label>
                <div className="flex flex-wrap gap-2">
                  {statusOptions.map((option) => (
                    <button
                      key={option.value}
                      type="button"
                      onClick={() => setFormData(prev => ({ ...prev, status: option.value }))}
                      className={`px-3 py-1 rounded-lg text-xs font-medium border transition-all ${
                        formData.status === option.value
                          ? getStatusClass(option.value)
                          : 'bg-white/10 text-white/50 border-white/20 hover:bg-white/20'
                      }`}
                    >
                      {option.label}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label className="block text-white/70 text-sm font-medium mb-2">중요도</label>
                <select
                  value={formData.seqno}
                  onChange={(e) => setFormData(prev => ({ ...prev, seqno: parseInt(e.target.value) as TodoPriority }))}
                  className="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all"
                >
                  <option value={3}>긴급</option>
                  <option value={2}>매우 중요</option>
                  <option value={1}>중요</option>
                  <option value={0}>보통</option>
                  <option value={-1}>낮음</option>
                </select>
              </div>
              <div className="flex items-end">
                <label className="flex items-center text-white/70 text-sm font-medium cursor-pointer">
                  <input
                    type="checkbox"
                    checked={formData.flag}
                    onChange={(e) => setFormData(prev => ({ ...prev, flag: e.target.checked }))}
                    className="mr-2 text-primary-500 focus:ring-primary-400 focus:ring-offset-0 rounded"
                  />
                  플래그 (상단 고정)
                </label>
              </div>
            </div>
          </div>

          {/* 푸터 */}
          <div className="px-6 py-4 border-t border-white/10 flex justify-end">
            <div className="flex space-x-3">
              <button
                type="button"
                onClick={onSubmit}
                disabled={processing}
                className="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg transition-colors flex items-center disabled:opacity-50"
              >
                {processing ? (
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                ) : (
                  <Edit2 className="w-4 h-4 mr-2" />
                )}
                {submitText}
              </button>
              {isEdit && onDelete && (
                <button
                  type="button"
                  onClick={onDelete}
                  disabled={processing}
                  className="bg-danger-500 hover:bg-danger-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center disabled:opacity-50"
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  삭제
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
