import React, { useState, useEffect } from 'react';
import { 
  Users, 
  ChevronDown, 
  ChevronRight, 
  User,
  Phone,
  Loader2,
  AlertCircle,
  ZoomIn,
  ZoomOut,
  Maximize2
} from 'lucide-react';
import { apiClient } from '../../services/apiClient';

interface OrgEmployee {
  id: string;
  name: string;
  position: string;
  phone: string;
  status: 'active' | 'vacation' | 'inactive';
  photoUrl?: string;
  managerId?: string;
  subordinates: OrgEmployee[];
  subordinateCount?: number;
}

export const OrganizationalStructure: React.FC = () => {
  const [structure, setStructure] = useState<OrgEmployee[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
  const [zoom, setZoom] = useState(100);
  const [selectedEmployee, setSelectedEmployee] = useState<OrgEmployee | null>(null);

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

  const loadStructure = async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await apiClient.get<OrgEmployee[]>('/employees/organizational-structure');
      setStructure(data);
      // По умолчанию разворачиваем все узлы
      const allIds = new Set<string>();
      const collectIds = (employees: OrgEmployee[]) => {
        employees.forEach(emp => {
          allIds.add(emp.id);
          if (emp.subordinates.length > 0) {
            collectIds(emp.subordinates);
          }
        });
      };
      collectIds(data);
      setExpandedNodes(allIds);
    } catch (err: any) {
      console.error('Error loading organizational structure:', err);
      setError(err.message || 'Не удалось загрузить организационную структуру');
    } finally {
      setLoading(false);
    }
  };

  const toggleNode = (id: string) => {
    const newExpanded = new Set(expandedNodes);
    if (newExpanded.has(id)) {
      newExpanded.delete(id);
    } else {
      newExpanded.add(id);
    }
    setExpandedNodes(newExpanded);
  };

  const expandAll = () => {
    const allIds = new Set<string>();
    const collectIds = (employees: OrgEmployee[]) => {
      employees.forEach(emp => {
        allIds.add(emp.id);
        if (emp.subordinates.length > 0) {
          collectIds(emp.subordinates);
        }
      });
    };
    collectIds(structure);
    setExpandedNodes(allIds);
  };

  const collapseAll = () => {
    setExpandedNodes(new Set());
  };

  const renderEmployeeCard = (employee: OrgEmployee, level: number = 0) => {
    const isExpanded = expandedNodes.has(employee.id);
    const hasSubordinates = employee.subordinates.length > 0;
    const indent = level * 60;

    return (
      <div key={employee.id} className="relative">
        <div 
          className="flex items-start gap-4 mb-4 group"
          style={{ marginLeft: `${indent}px` }}
        >
          {/* Вертикальная линия для связи с родителем */}
          {level > 0 && (
            <div className="absolute left-0 top-0 bottom-0 w-px bg-slate-300" style={{ left: `${indent - 20}px` }} />
          )}

          {/* Кнопка разворачивания */}
          {hasSubordinates && (
            <button
              onClick={() => toggleNode(employee.id)}
              className="mt-6 p-1 hover:bg-slate-100 rounded-lg transition-colors flex-shrink-0"
            >
              {isExpanded ? (
                <ChevronDown className="w-4 h-4 text-slate-500" />
              ) : (
                <ChevronRight className="w-4 h-4 text-slate-500" />
              )}
            </button>
          )}
          {!hasSubordinates && <div className="w-6" />}

          {/* Карточка сотрудника */}
          <div
            className={`flex-1 bg-white rounded-2xl border-2 transition-all cursor-pointer hover:shadow-lg ${
              selectedEmployee?.id === employee.id 
                ? 'border-primary-500 shadow-lg' 
                : 'border-slate-200 hover:border-primary-300'
            }`}
            onClick={() => setSelectedEmployee(employee)}
          >
            <div className="p-4 flex items-start gap-4">
              {/* Фото */}
              <div className="flex-shrink-0">
                {employee.photoUrl ? (
                  <img
                    src={employee.photoUrl.startsWith('http') ? employee.photoUrl : `/uploads/${employee.photoUrl}`}
                    alt={employee.name}
                    className="w-16 h-16 rounded-xl object-cover border-2 border-slate-200"
                    onError={(e) => {
                      (e.target as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(employee.name)}&background=6366f1&color=fff&size=128`;
                    }}
                  />
                ) : (
                  <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center border-2 border-slate-200">
                    <span className="text-white font-black text-lg">
                      {employee.name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase()}
                    </span>
                  </div>
                )}
              </div>

              {/* Информация */}
              <div className="flex-1 min-w-0">
                <h3 className="font-black text-sm text-slate-800 mb-1 truncate">
                  {employee.name}
                </h3>
                <p className="text-xs text-slate-600 font-bold mb-2 truncate">
                  {employee.position}
                </p>
                <div className="flex items-center gap-2 text-[10px] text-slate-500">
                  <Phone className="w-3 h-3" />
                  <span>{employee.phone}</span>
                </div>
                {hasSubordinates && (
                  <div className="mt-2 flex items-center gap-1 text-[10px] text-primary-600 font-bold">
                    <Users className="w-3 h-3" />
                    <span>{employee.subordinateCount || employee.subordinates.length} подчиненных</span>
                  </div>
                )}
              </div>

              {/* Статус */}
              <div className="flex-shrink-0">
                <span className={`px-2 py-1 rounded-full text-[9px] font-black uppercase ${
                  employee.status === 'active' 
                    ? 'bg-emerald-100 text-emerald-700' 
                    : employee.status === 'vacation'
                    ? 'bg-amber-100 text-amber-700'
                    : 'bg-slate-100 text-slate-600'
                }`}>
                  {employee.status === 'active' ? 'Активен' : employee.status === 'vacation' ? 'Отпуск' : 'Неактивен'}
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Горизонтальная линия для связи с подчиненными */}
        {hasSubordinates && isExpanded && level >= 0 && (
          <div 
            className="absolute left-0 top-16 w-px h-4 bg-slate-300"
            style={{ left: `${indent + 20}px` }}
          />
        )}

        {/* Подчиненные */}
        {hasSubordinates && isExpanded && (
          <div className="relative">
            {employee.subordinates.map((sub, idx) => (
              <div key={sub.id}>
                {renderEmployeeCard(sub, level + 1)}
              </div>
            ))}
          </div>
        )}
      </div>
    );
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[500px]">
        <div className="text-center">
          <Loader2 className="w-8 h-8 animate-spin text-primary-500 mx-auto mb-4" />
          <p className="text-sm text-slate-600 font-bold">Загрузка организационной структуры...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center min-h-[500px]">
        <div className="text-center max-w-md">
          <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
          <p className="text-sm text-red-600 font-bold mb-4">{error}</p>
          <button
            onClick={loadStructure}
            className="px-4 py-2 bg-primary-500 text-white rounded-xl text-sm font-bold hover:bg-primary-600 transition-colors"
          >
            Попробовать снова
          </button>
        </div>
      </div>
    );
  }

  if (structure.length === 0) {
    return (
      <div className="flex items-center justify-center min-h-[500px]">
        <div className="text-center">
          <Users className="w-12 h-12 text-slate-400 mx-auto mb-4" />
          <p className="text-sm text-slate-600 font-bold">Организационная структура пуста</p>
          <p className="text-xs text-slate-500 mt-2">Добавьте сотрудников и укажите их руководителей</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6 animate-fade-in">
      {/* Панель управления */}
      <div className="bg-white rounded-3xl border border-slate-200 shadow-sm p-4">
        <div className="flex items-center justify-between flex-wrap gap-4">
          <div className="flex items-center gap-2">
            <h2 className="font-black text-sm text-slate-800">Организационная структура</h2>
            <span className="text-xs text-slate-500 font-bold">
              ({structure.reduce((acc, emp) => {
                const count = (e: OrgEmployee) => 1 + e.subordinates.reduce((sum, s) => sum + count(s), 0);
                return acc + count(emp);
              }, 0)} сотрудников)
            </span>
          </div>

          <div className="flex items-center gap-2">
            {/* Управление масштабом */}
            <div className="flex items-center gap-2 bg-slate-100 rounded-xl p-1">
              <button
                onClick={() => setZoom(Math.max(50, zoom - 10))}
                className="p-1.5 hover:bg-white rounded-lg transition-colors"
                title="Уменьшить"
              >
                <ZoomOut className="w-4 h-4 text-slate-600" />
              </button>
              <span className="text-xs font-bold text-slate-700 min-w-[3rem] text-center">{zoom}%</span>
              <button
                onClick={() => setZoom(Math.min(150, zoom + 10))}
                className="p-1.5 hover:bg-white rounded-lg transition-colors"
                title="Увеличить"
              >
                <ZoomIn className="w-4 h-4 text-slate-600" />
              </button>
            </div>

            {/* Управление разворачиванием */}
            <button
              onClick={expandAll}
              className="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 rounded-xl text-xs font-bold text-slate-700 transition-colors"
            >
              Развернуть все
            </button>
            <button
              onClick={collapseAll}
              className="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 rounded-xl text-xs font-bold text-slate-700 transition-colors"
            >
              Свернуть все
            </button>
          </div>
        </div>
      </div>

      {/* Структура */}
      <div 
        className="bg-slate-50 rounded-3xl border border-slate-200 shadow-sm p-8 overflow-auto"
        style={{ 
          transform: `scale(${zoom / 100})`,
          transformOrigin: 'top left',
          minHeight: `${500 * (zoom / 100)}px`
        }}
      >
        {structure.map(employee => (
          <div key={employee.id}>
            {renderEmployeeCard(employee, 0)}
          </div>
        ))}
      </div>

      {/* Детали выбранного сотрудника */}
      {selectedEmployee && (
        <div className="bg-white rounded-3xl border border-slate-200 shadow-sm p-6">
          <div className="flex items-start justify-between mb-4">
            <h3 className="font-black text-sm text-slate-800">Информация о сотруднике</h3>
            <button
              onClick={() => setSelectedEmployee(null)}
              className="text-slate-400 hover:text-slate-600 transition-colors"
            >
              ✕
            </button>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p className="text-[10px] text-slate-500 font-bold uppercase mb-1">ФИО</p>
              <p className="text-sm font-bold text-slate-800">{selectedEmployee.name}</p>
            </div>
            <div>
              <p className="text-[10px] text-slate-500 font-bold uppercase mb-1">Должность</p>
              <p className="text-sm font-bold text-slate-800">{selectedEmployee.position}</p>
            </div>
            <div>
              <p className="text-[10px] text-slate-500 font-bold uppercase mb-1">Телефон</p>
              <p className="text-sm font-bold text-slate-800">{selectedEmployee.phone}</p>
            </div>
            <div>
              <p className="text-[10px] text-slate-500 font-bold uppercase mb-1">Подчиненные</p>
              <p className="text-sm font-bold text-slate-800">
                {selectedEmployee.subordinateCount || selectedEmployee.subordinates.length} человек
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};