import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Reorder } from 'framer-motion';
import { Home, ChevronRight, Plus, Edit3, Trash2, GripVertical } from 'lucide-react';
import { Toast } from '@/components/common';
import { AdminLayout, ConfirmDialog, CategoryFormModal } from '@/components/pc/admin';
import { useAdminAuth } from '@/hooks/pc/admin';
import { useToast } from '@/hooks/common';
import * as categoriesApi from '@/api/admin/categories';
import { getColorStyle } from '@/utils/color';

function ScheduleCategory() {
  const { user, isAuthenticated } = useAdminAuth();
  const [categories, setCategories] = useState([]);
  const [loading, setLoading] = useState(true);
  const { toast, setToast, showSuccess, showError } = useToast();

  // 모달 상태
  const [modalOpen, setModalOpen] = useState(false);
  const [editingCategory, setEditingCategory] = useState(null);
  const [formData, setFormData] = useState({ name: '', color: 'blue' });

  // 삭제 다이얼로그
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteTarget, setDeleteTarget] = useState(null);

  // 카스텀 컴러 피커 팝업
  const [colorPickerOpen, setColorPickerOpen] = useState(false);

  // 카테고리 로드
  useEffect(() => {
    if (isAuthenticated) {
      fetchCategories();
    }
  }, [isAuthenticated]);

  // 카테고리 목록 조회
  const fetchCategories = async () => {
    try {
      const data = await categoriesApi.getCategories();
      setCategories(data);
    } catch (error) {
      console.error('카테고리 조회 오류:', error);
      showError('카테고리를 불러오는데 실패했습니다.');
    } finally {
      setLoading(false);
    }
  };

  // 모달 열기 (추가/수정)
  const openModal = (category = null) => {
    if (category) {
      setEditingCategory(category);
      setFormData({ name: category.name, color: category.color });
    } else {
      setEditingCategory(null);
      setFormData({ name: '', color: 'blue' });
    }
    setColorPickerOpen(false); // 컬러 피커는 닫힌 상태로
    setModalOpen(true);
  };

  // 카테고리 저장
  const handleSave = async () => {
    if (!formData.name.trim()) {
      showError('카테고리 이름을 입력해주세요.');
      return;
    }

    // 중복 체크 (수정시 자기 자신 제외)
    const isDuplicate = categories.some(
      (cat) =>
        cat.name.toLowerCase() === formData.name.trim().toLowerCase() && cat.id !== editingCategory?.id
    );
    if (isDuplicate) {
      showError('이미 존재하는 카테고리입니다.');
      return;
    }

    try {
      if (editingCategory) {
        await categoriesApi.updateCategory(editingCategory.id, formData);
      } else {
        await categoriesApi.createCategory(formData);
      }
      showSuccess(editingCategory ? '카테고리가 수정되었습니다.' : '카테고리가 추가되었습니다.');
      setModalOpen(false);
      fetchCategories();
    } catch (error) {
      console.error('저장 오류:', error);
      showError(error.message || '저장에 실패했습니다.');
    }
  };

  // 삭제 다이얼로그 열기
  const openDeleteDialog = (category) => {
    setDeleteTarget(category);
    setDeleteDialogOpen(true);
  };

  // 카테고리 삭제
  const handleDelete = async () => {
    if (!deleteTarget) return;

    try {
      await categoriesApi.deleteCategory(deleteTarget.id);
      showSuccess('카테고리가 삭제되었습니다.');
      setDeleteDialogOpen(false);
      setDeleteTarget(null);
      fetchCategories();
    } catch (error) {
      console.error('삭제 오류:', error);
      showError(error.message || '삭제에 실패했습니다.');
    }
  };

  // Reorder 핸들러 (부드러운 애니메이션)
  const handleReorder = async (newOrder) => {
    setCategories(newOrder);

    // 순서 업데이트 API 호출
    const orders = newOrder.map((cat, idx) => ({
      id: cat.id,
      sort_order: idx + 1,
    }));

    try {
      await categoriesApi.reorderCategories(orders);
    } catch (error) {
      console.error('순서 업데이트 오류:', error);
      fetchCategories(); // 실패시 원래 데이터 다시 불러오기
    }
  };

  if (loading) {
    return (
      <AdminLayout user={user}>
        <div className="flex items-center justify-center" style={{ minHeight: 'calc(100vh - 80px)' }}>
          <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
        </div>
      </AdminLayout>
    );
  }

  return (
    <AdminLayout user={user}>
      <Toast toast={toast} onClose={() => setToast(null)} />

      {/* 메인 콘텐츠 */}
      <div className="max-w-4xl mx-auto px-6 py-8">
        {/* 브레드크럼 */}
        <div className="flex items-center gap-2 text-sm text-gray-500 mb-6">
          <Link to="/admin/dashboard" className="hover:text-primary flex items-center gap-1">
            <Home size={14} />
            대시보드
          </Link>
          <ChevronRight size={14} />
          <Link to="/admin/schedule" className="hover:text-primary">
            일정 관리
          </Link>
          <ChevronRight size={14} />
          <span className="text-gray-900">카테고리 관리</span>
        </div>

        {/* 타이틀 */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">카테고리 관리</h1>
            <p className="text-gray-500 mt-1">일정 카테고리를 추가, 수정, 삭제할 수 있습니다.</p>
          </div>
          <button
            onClick={() => openModal()}
            className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors"
          >
            <Plus size={18} />
            카테고리 추가
          </button>
        </div>

        {/* 카테고리 목록 */}
        <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
          {categories.length === 0 ? (
            <div className="p-12 text-center text-gray-500">등록된 카테고리가 없습니다.</div>
          ) : (
            <Reorder.Group
              axis="y"
              values={categories}
              onReorder={handleReorder}
              className="divide-y divide-gray-100"
            >
              {categories.map((category) => (
                <Reorder.Item
                  key={category.id}
                  value={category}
                  className="flex items-center gap-4 p-4 bg-white cursor-grab active:cursor-grabbing"
                  whileDrag={{
                    scale: 1.02,
                    boxShadow: '0 10px 30px rgba(0,0,0,0.15)',
                    zIndex: 50,
                  }}
                >
                  {/* 드래그 핸들 */}
                  <div className="text-gray-400 hover:text-gray-600">
                    <GripVertical size={20} />
                  </div>

                  {/* 색상 표시 */}
                  {(() => {
                    const colorStyle = getColorStyle(category.color);
                    return (
                      <div
                        className={`w-4 h-4 rounded-full ${colorStyle.className || ''}`}
                        style={colorStyle.style}
                      />
                    );
                  })()}

                  {/* 이름 */}
                  <span className="flex-1 font-medium text-gray-900">{category.name}</span>

                  {/* 액션 버튼 */}
                  <div className="flex items-center gap-2">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        openModal(category);
                      }}
                      className="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"
                    >
                      <Edit3 size={18} />
                    </button>
                    {category.is_default ? (
                      <span
                        className="p-2 text-gray-300 cursor-not-allowed"
                        title="기본 카테고리는 삭제할 수 없습니다"
                      >
                        <Trash2 size={18} />
                      </span>
                    ) : (
                      <button
                        onClick={(e) => {
                          e.stopPropagation();
                          openDeleteDialog(category);
                        }}
                        className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                      >
                        <Trash2 size={18} />
                      </button>
                    )}
                  </div>
                </Reorder.Item>
              ))}
            </Reorder.Group>
          )}
        </div>
      </div>

      {/* 추가/수정 모달 */}
      <CategoryFormModal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        editingCategory={editingCategory}
        formData={formData}
        setFormData={setFormData}
        colorPickerOpen={colorPickerOpen}
        setColorPickerOpen={setColorPickerOpen}
        onSave={handleSave}
      />

      {/* 삭제 확인 다이얼로그 */}
      <ConfirmDialog
        isOpen={deleteDialogOpen}
        onClose={() => setDeleteDialogOpen(false)}
        onConfirm={handleDelete}
        title="카테고리 삭제"
        message={
          <>
            <span className="font-medium text-gray-900">"{deleteTarget?.name}"</span> 카테고리를
            삭제하시겠습니까?
            <br />
            <span className="text-sm text-red-500">이 작업은 되돌릴 수 없습니다.</span>
          </>
        }
      />
    </AdminLayout>
  );
}

export default ScheduleCategory;
