import React, { useState, useEffect, useMemo } from "react";
import {
  FaUser,
  FaUsers,
  FaBuilding,
  FaChevronDown,
  FaChevronRight,
  FaEye,
  FaTh,
  FaSitemap,
  FaTimes,
  FaCalendar,
  FaEnvelope,
  FaPhone,
  FaMapMarkerAlt,
  FaBriefcase,
} from "react-icons/fa";
import { HrEmployee, HrOrganizationChart as OrgChart } from "../../../types/hr";
import { mockEmployees } from "../../../mocks/mockEmployees";
import { mockDepartments } from "../../../mocks/mockDepartments";
import Widget from "../../../components/common/Widget";

// Dinamik organizasyon verisi oluşturma fonksiyonu
const generateOrganizationData = (): OrgChart[] => {
  const orgData: OrgChart[] = [];

  // Çalışanları işle
  mockEmployees.forEach((employee) => {
    const department = mockDepartments.find(
      (d) => d.id === employee.departmantId
    );

    let level = 3; // Varsayılan seviye (normal çalışan)
    let parentId: string | undefined = undefined;

    // Eğer bu çalışan bir departman yöneticisiyse
    if (department && department.managerId === employee.id) {
      if (!department.parentDepartmentId) {
        // Ana departman yöneticisi (CEO/Genel Müdür)
        level = 0;
      } else {
        // Alt departman yöneticisi
        level = 1;
        // Üst departmanın yöneticisini parent olarak bul
        const parentDept = mockDepartments.find(
          (d) => d.id === department.parentDepartmentId
        );
        if (parentDept && parentDept.managerId) {
          parentId = parentDept.managerId;
        }
      }
    } else {
      // Normal çalışan - departman yöneticisine bağlı
      if (department && department.managerId) {
        parentId = department.managerId;

        // Departman yöneticisinin seviyesine göre belirleme
        const managerDept = mockDepartments.find(
          (d) => d.managerId === department.managerId
        );
        if (managerDept && !managerDept.parentDepartmentId) {
          level = 2; // CEO'ya direkt bağlı
        } else {
          level = 3; // Orta kademe yöneticiye bağlı
        }
      }
    }

    orgData.push({
      id: `org-${employee.id}`,
      employeeId: employee.id,
      employee: employee,
      parentId: parentId,
      level: level,
      position: employee.jobPosition?.name || "Belirsiz",
      isActive: employee.isActive,
    });
  });

  return orgData.sort((a, b) => a.level - b.level);
};

interface TreeNode {
  employee: HrEmployee;
  children: TreeNode[];
  level: number;
}

const OrganizationChart: React.FC = () => {
  const [employees] = useState<HrEmployee[]>(mockEmployees);
  const [organizationData] = useState<OrgChart[]>(generateOrganizationData());
  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
  const [orgTree, setOrgTree] = useState<TreeNode[]>([]);
  const [viewMode, setViewMode] = useState<"tree" | "cards">("tree");
  const [selectedEmployee, setSelectedEmployee] = useState<HrEmployee | null>(
    null
  );
  const [showModal, setShowModal] = useState(false);
  const [selectedDepartment, setSelectedDepartment] = useState<string>("all");

  const handleViewEmployee = (employee: HrEmployee) => {
    setSelectedEmployee(employee);
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
    setSelectedEmployee(null);
  };

  useEffect(() => {
    // Build organization tree structure
    const buildTree = (): TreeNode[] => {
      const nodeMap = new Map<string, TreeNode>();

      // First, create all nodes
      employees.forEach((employee) => {
        nodeMap.set(employee.id, {
          employee,
          children: [],
          level: 0,
        });
      });

      // Then, build the tree structure
      const rootNodes: TreeNode[] = [];

      organizationData.forEach((orgData) => {
        const node = nodeMap.get(orgData.employeeId);
        if (node) {
          node.level = orgData.level;

          if (orgData.parentId) {
            const parentNode = nodeMap.get(orgData.parentId);
            if (parentNode) {
              parentNode.children.push(node);
            }
          } else {
            rootNodes.push(node);
          }
        }
      });

      return rootNodes;
    };

    setOrgTree(buildTree());
    // Auto-expand first level
    const firstLevelIds = organizationData
      .filter((org) => org.level <= 1)
      .map((org) => org.employeeId);
    setExpandedNodes(new Set(firstLevelIds));
  }, [employees, organizationData]);

  // Filtered data for views
  const filteredOrgTree = useMemo(() => {
    if (selectedDepartment === "all") {
      return orgTree;
    }

    const filterTree = (nodes: TreeNode[]): TreeNode[] => {
      const result: TreeNode[] = [];
      for (const node of nodes) {
        const filteredChildren = filterTree(node.children);
        if (
          node.employee.departmantId === selectedDepartment ||
          filteredChildren.length > 0
        ) {
          result.push({ ...node, children: filteredChildren });
        }
      }
      return result;
    };

    return filterTree(orgTree);
  }, [orgTree, selectedDepartment]);

  const filteredEmployees = useMemo(() => {
    if (selectedDepartment === "all") {
      return employees;
    }
    return employees.filter((emp) => emp.departmantId === selectedDepartment);
  }, [employees, selectedDepartment]);

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

  const renderTreeNode = (node: TreeNode): React.ReactNode => {
    const isExpanded = expandedNodes.has(node.employee.id);
    const hasChildren = node.children.length > 0;

    return (
      <div key={node.employee.id} className="relative">
        {/* Bağlantı çizgisi */}
        {node.level > 0 && (
          <span
            className="absolute border-l border-gray-300"
            style={{
              left: `${node.level * 1.25 - 0.7}rem`,
              top: 0,
              height: "100%",
            }}
          />
        )}
        <div
          className="flex items-center space-x-2 py-1.5 rounded-md hover:bg-gray-50"
          style={{ paddingLeft: `${node.level * 1.25}rem` }}
        >
          {/* Girinti ve bağlantı çizgisi */}
          {node.level > 0 && (
            <span
              className="absolute border-t border-gray-300 w-3"
              style={{ left: `${node.level * 1.25 - 0.7}rem`, top: "1.1rem" }}
            />
          )}

          {/* Genişletme ikonu */}
          <div className="w-5 flex-shrink-0 text-center">
            {hasChildren && (
              <button
                onClick={() => toggleNode(node.employee.id)}
                className="p-1 text-gray-500 hover:text-gray-800 rounded-full hover:bg-gray-200"
              >
                {isExpanded ? (
                  <FaChevronDown size={10} />
                ) : (
                  <FaChevronRight size={10} />
                )}
              </button>
            )}
          </div>

          {/* Grup Bilgisi */}
          <div className="flex-grow flex items-center space-x-3">
            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between">
                <div>
                  <h4 className="font-medium text-sm text-gray-900 truncate">
                    {node.employee.fullName}
                  </h4>
                  <p className="text-xs text-gray-600 truncate">
                    {node.employee.jobPosition?.name}
                  </p>
                  <p className="text-xs text-gray-500 truncate">
                    {node.employee.department?.name}
                  </p>
                </div>
              </div>
            </div>
            <div className="flex items-center space-x-2 pr-2">
              <div className="flex items-center gap-2 ml-4">
                {hasChildren && (
                  <span className="flex items-center text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
                    <FaUsers className="w-3 h-3 mr-1" />
                    {node.children.length}
                  </span>
                )}

                <button // İşlemler
                  onClick={() => handleViewEmployee(node.employee)}
                  className="p-1 text-blue-600 hover:bg-blue-50 rounded"
                  title="Görüntüle"
                >
                  <FaEye className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        </div>

        {hasChildren && isExpanded && (
          <div>{node.children.map((child) => renderTreeNode(child))}</div>
        )}
      </div>
    );
  };

  const renderCardView = () => {
    const groupedByLevel = filteredEmployees.reduce((acc, employee) => {
      const orgData = organizationData.find(
        (org) => org.employeeId === employee.id
      );
      const level = orgData?.level || 0;

      if (!acc[level]) {
        acc[level] = [];
      }
      acc[level].push(employee);
      return acc;
    }, {} as Record<number, HrEmployee[]>);

    return (
      <div className="space-y-6">
        {Object.entries(groupedByLevel)
          .sort(([a], [b]) => parseInt(a) - parseInt(b))
          .map(([level, levelEmployees]) => (
            <div key={level}>
              <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                <FaBuilding className="w-5 h-5" />
                {level === "0"
                  ? "Üst Yönetim"
                  : level === "1"
                  ? "Orta Kademe Yönetim"
                  : level === "2"
                  ? "Alt Kademe Yönetim"
                  : `${parseInt(level) + 1}. Seviye`}
                <span className="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded-full">
                  {levelEmployees.length} kişi
                </span>
              </h3>

              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 gap-3">
                {levelEmployees.map((employee) => (
                  <div
                    key={employee.id}
                    className="bg-white p-3 rounded-lg border shadow-sm hover:shadow-md transition-shadow"
                  >
                    <div className="flex items-center mb-3">
                      <div
                        className={`w-8 h-8 rounded-full flex items-center justify-center mr-2 ${
                          level === "0"
                            ? "bg-blue-100"
                            : level === "1"
                            ? "bg-green-100"
                            : "bg-gray-100"
                        }`}
                      >
                        <FaUser
                          className={`w-4 h-4 ${
                            level === "0"
                              ? "text-blue-600"
                              : level === "1"
                              ? "text-green-600"
                              : "text-gray-600"
                          }`}
                        />
                      </div>

                      <div className="flex-1 min-w-0">
                        <h4
                          onClick={() => handleViewEmployee(employee)}
                          className="font-medium text-sm text-blue-600 hover:underline cursor-pointer truncate"
                        >
                          {employee.fullName}
                        </h4>
                        <p className="text-sm text-gray-600 truncate">
                          {employee.code}
                        </p>
                      </div>
                    </div>

                    <div className="space-y-1 mb-2">
                      <p className="text-xs text-gray-800 font-medium truncate">
                        {employee.jobPosition?.name}
                      </p>
                      <p className="text-xs text-gray-600 truncate">
                        {employee.department?.name}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
      </div>
    );
  };

  return (
    <div className="space-y-3 pt-2">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-bold text-gray-900">
            Organizasyon Şeması
          </h2>
          <p className="text-sm text-gray-600 mt-1">
            Kurumsal hiyerarşi ve raporlama yapısı
          </p>
        </div>

        <div className="flex items-center gap-2">
          <select
            value={selectedDepartment}
            onChange={(e) => setSelectedDepartment(e.target.value)}
            className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">Tüm Departmanlar</option>
            {mockDepartments.map((dept) => (
              <option key={dept.id} value={dept.id}>
                {dept.name}
              </option>
            ))}
          </select>
          <div className="flex bg-gray-100 rounded-lg p-0.5">
            <button
              onClick={() => setViewMode("tree")}
              className={`p-1.5 rounded-md transition-colors ${
                viewMode === "tree"
                  ? "bg-white text-blue-600 shadow-sm"
                  : "text-gray-600 hover:text-gray-900"
              }`}
            >
              <FaSitemap className="w-4 h-4" />
            </button>
            <button
              onClick={() => setViewMode("cards")}
              className={`p-1.5 rounded-md transition-colors ${
                viewMode === "cards"
                  ? "bg-white text-blue-600 shadow-sm"
                  : "text-gray-600 hover:text-gray-900"
              }`}
            >
              <FaTh className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        <Widget
          title="Toplam Personel"
          value={employees.length}
          color="blue"
          icon="FaBuilding"
        />

        <Widget
          title="Departmanlar"
          value={
            new Set(employees.map((e) => e.department?.id).filter(Boolean)).size
          }
          color="purple"
          icon="FaBuilding"
        />

        <Widget
          title="Seviye Sayısı"
          value={
            organizationData.length > 0
              ? Math.max(...organizationData.map((org) => org.level)) + 1
              : 0
          }
          color="orange"
          icon="FaUser"
        />
      </div>

      {/* Content */}
      <div className="bg-white rounded-lg border p-4">
        {viewMode === "tree" ? (
          <div className="pt-2">
            {filteredOrgTree.map((node) => renderTreeNode(node))}
          </div>
        ) : (
          renderCardView()
        )}

        {(viewMode === "tree"
          ? filteredOrgTree.length === 0
          : filteredEmployees.length === 0) && (
          <div className="text-center py-12">
            <FaBuilding className="w-10 h-10 text-gray-400 mx-auto mb-3" />
            <h3 className="text-base font-medium text-gray-900 mb-2">
              Organizasyon verisi bulunamadı
            </h3>
            <p className="text-gray-500">
              Henüz organizasyon şeması oluşturulmamış.
            </p>
          </div>
        )}
      </div>

      {/* Employee Detail Modal */}
      {showModal && selectedEmployee && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-lg p-4 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            {/* Modal Header */}
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-semibold text-gray-900">
                Personel Detayları
              </h3>
              <button
                onClick={handleCloseModal}
                className="text-gray-400 hover:text-gray-600 p-1"
              >
                <FaTimes className="w-5 h-5" />
              </button>
            </div>

            {/* Employee Info */}
            <div className="space-y-4">
              {/* Basic Info */}
              <div className="flex items-center space-x-4">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                  <FaUser className="w-8 h-8 text-blue-600" />
                </div>
                <div>
                  <h4 className="text-lg font-bold text-gray-900">
                    {selectedEmployee.fullName}
                  </h4>
                  <p className="text-gray-600">{selectedEmployee.code}</p>
                  <p className="text-sm text-gray-500">
                    {selectedEmployee.jobPosition?.name}
                  </p>
                </div>
              </div>

              {/* Contact Information */}
              <div>
                <h5 className="text-base font-semibold text-gray-900 mb-2 flex items-center">
                  <FaEnvelope className="w-5 h-5 mr-2 text-blue-600" />
                  İletişim Bilgileri
                </h5>
                <div className="bg-gray-50 p-3 rounded-lg space-y-2">
                  <div className="flex items-center">
                    <FaEnvelope className="w-4 h-4 text-gray-500 mr-3" />
                    <span className="text-sm">E-posta:</span>
                    <span className="ml-2 text-sm font-medium">
                      {selectedEmployee.email}
                    </span>
                  </div>
                  {selectedEmployee.phone && (
                    <div className="flex items-center">
                      <FaPhone className="w-4 h-4 text-gray-500 mr-3" />
                      <span className="text-sm">İş Telefonu:</span>
                      <span className="ml-2 text-sm font-medium">
                        {selectedEmployee.phone}
                      </span>
                    </div>
                  )}
                  {selectedEmployee.personalPhone && (
                    <div className="flex items-center">
                      <FaPhone className="w-4 h-4 text-gray-500 mr-3" />
                      <span className="text-sm">Kişisel Telefon:</span>
                      <span className="ml-2 text-sm font-medium">
                        {selectedEmployee.personalPhone}
                      </span>
                    </div>
                  )}
                </div>
              </div>

              {/* Employment Information */}
              <div>
                <h5 className="text-base font-semibold text-gray-900 mb-2 flex items-center">
                  <FaBriefcase className="w-5 h-5 mr-2 text-green-600" />
                  İş Bilgileri
                </h5>
                <div className="bg-gray-50 p-3 rounded-lg space-y-2">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <span className="text-sm text-gray-600">Departman:</span>
                      <p className="font-medium">
                        {selectedEmployee.department?.name}
                      </p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-600">Pozisyon:</span>
                      <p className="font-medium">
                        {selectedEmployee.jobPosition?.name}
                      </p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-600">
                        İşe Başlama Tarihi:
                      </span>
                      <p className="font-medium flex items-center">
                        <FaCalendar className="w-4 h-4 mr-1 text-gray-500" />
                        {new Date(selectedEmployee.hireDate).toLocaleDateString(
                          "tr-TR"
                        )}
                      </p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-600">
                        İstihdam Türü:
                      </span>
                      <p className="font-medium">
                        {selectedEmployee.employmentType}
                      </p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-600">
                        Çalışma Lokasyonu:
                      </span>
                      <p className="font-medium flex items-center">
                        <FaMapMarkerAlt className="w-4 h-4 mr-1 text-gray-500" />
                        {selectedEmployee.workLocation}
                      </p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-600">Durum:</span>
                      <span
                        className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
                          selectedEmployee.isActive
                            ? "bg-green-100 text-green-800"
                            : "bg-red-100 text-red-800"
                        }`}
                      >
                        {selectedEmployee.isActive ? "Aktif" : "Pasif"}
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Personal Information */}
              <div>
                <h5 className="text-base font-semibold text-gray-900 mb-2 flex items-center">
                  <FaUser className="w-5 h-5 mr-2 text-purple-600" />
                  Kişisel Bilgiler
                </h5>
                <div className="bg-gray-50 p-3 rounded-lg space-y-2">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <span className="text-sm text-gray-600">
                        Doğum Tarihi:
                      </span>
                      <p className="font-medium flex items-center">
                        <FaCalendar className="w-4 h-4 mr-1 text-gray-500" />
                        {new Date(
                          selectedEmployee.birthDate
                        ).toLocaleDateString("tr-TR")}
                      </p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-600">Cinsiyet:</span>
                      <p className="font-medium">{selectedEmployee.gender}</p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-600">
                        Medeni Durum:
                      </span>
                      <p className="font-medium">
                        {selectedEmployee.maritalStatus}
                      </p>
                    </div>
                    <div>
                      <span className="text-sm text-gray-600">
                        TC Kimlik No:
                      </span>
                      <p className="font-medium">
                        {selectedEmployee.nationalId}
                      </p>
                    </div>
                  </div>

                  {selectedEmployee.address && (
                    <div>
                      <span className="text-sm text-gray-600">Adres:</span>
                      <p className="font-medium flex items-start">
                        <FaMapMarkerAlt className="w-4 h-4 mr-1 text-gray-500 mt-0.5" />
                        {selectedEmployee.address.street},{" "}
                        {selectedEmployee.address.city},{" "}
                        {selectedEmployee.address.country}
                      </p>
                    </div>
                  )}
                </div>
              </div>

              {/* Emergency Contact */}
              {selectedEmployee.emergencyContact && (
                <div>
                  <h5 className="text-base font-semibold text-gray-900 mb-2 flex items-center">
                    <FaPhone className="w-5 h-5 mr-2 text-red-600" />
                    Acil Durum İletişim
                  </h5>
                  <div className="bg-gray-50 p-3 rounded-lg">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <span className="text-sm text-gray-600">İsim:</span>
                        <p className="font-medium">
                          {selectedEmployee.emergencyContact.name}
                        </p>
                      </div>
                      <div>
                        <span className="text-sm text-gray-600">Yakınlık:</span>
                        <p className="font-medium">
                          {selectedEmployee.emergencyContact.relationship}
                        </p>
                      </div>
                      <div>
                        <span className="text-sm text-gray-600">Telefon:</span>
                        <p className="font-medium">
                          {selectedEmployee.emergencyContact.phone}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Modal Footer */}
            <div className="flex justify-end gap-3 mt-4 pt-4 border-t">
              <button
                onClick={handleCloseModal}
                className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
              >
                Kapat
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default OrganizationChart;