erp-platform/ui/src/views/hr/components/OrganizationChart.tsx

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'
import { Container } from '@/components/shared'

// 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 (
    <Container>
      <div className="space-y-2">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-2xl font-bold text-gray-900">Organizasyon Şeması</h2>
            <p className="text-gray-600">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>
      </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>
      )}
    </Container>
  )
}

export default OrganizationChart