erp-platform/ui/src/views/mrp/components/PlanningGantt.tsx

import React, { useState, useMemo } from 'react'
import {
  FaUser,
  FaChevronDown,
  FaChevronRight,
  FaChevronLeft,
  FaChevronRight as FaArrowRight,
} from 'react-icons/fa'
import { PsGanttTask } from '../../../types/ps'
import { mockEmployees } from '../../../mocks/mockEmployees'
import { mockProductionOrders } from '../../../mocks/mockProductionOrders'
import { mockWorkOrders } from '../../../mocks/mockWorkOrders'
import { mockWorkCenters } from '../../../mocks/mockWorkCenters'
import { PriorityEnum } from '../../../types/common'
import { getPriorityColor, getProductionOrderStatus, getWorkOrderStatus } from '../../../utils/erp'
import { Container } from '@/components/shared'

interface PlanningGanttProps {
  workCenterId?: string
}

const PlanningGantt: React.FC<PlanningGanttProps> = ({ workCenterId }) => {
  const getInitialExpandedItems = () => {
    const expandedItems = new Set<string>()
    const firstTwoOrders = mockProductionOrders.slice(0, 2)
    firstTwoOrders.forEach((order) => {
      expandedItems.add(`prod-${order.id}`)
      const orderWorkOrders = mockWorkOrders.filter((wo) => wo.productionOrderId === order.id)
      orderWorkOrders.forEach((wo) => {
        expandedItems.add(`work-${wo.id}`)
      })
    })
    return expandedItems
  }

  const [expandedItems, setExpandedItems] = useState<Set<string>>(getInitialExpandedItems())
  const [selectedWorkCenter, setSelectedWorkCenter] = useState<string>(workCenterId || '')
  const [viewMode, setViewMode] = useState<'day' | 'week' | 'month' | 'year'>('week')
  const [currentDate, setCurrentDate] = useState<Date>(new Date())

  const generateDateRange = () => {
    const startDate = new Date(currentDate)

    if (viewMode === 'day') {
      const hours = []
      for (let i = 0; i < 24; i++) {
        const hour = new Date(startDate)
        hour.setHours(i, 0, 0, 0)
        hours.push(hour)
      }
      return hours
    } else if (viewMode === 'week') {
      const weekStart = new Date(startDate)
      const dayOfWeek = weekStart.getDay()
      const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1
      weekStart.setDate(weekStart.getDate() - daysToSubtract)
      weekStart.setHours(0, 0, 0, 0)

      const dates = []
      for (let i = 0; i < 7; i++) {
        const date = new Date(weekStart)
        date.setDate(weekStart.getDate() + i)
        dates.push(date)
      }
      return dates
    } else if (viewMode === 'month') {
      const monthStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1)
      const daysInMonth = new Date(
        currentDate.getFullYear(),
        currentDate.getMonth() + 1,
        0,
      ).getDate()

      const dates = []
      for (let i = 0; i < daysInMonth; i++) {
        const date = new Date(monthStart)
        date.setDate(monthStart.getDate() + i)
        dates.push(date)
      }
      return dates
    } else {
      const yearStart = new Date(currentDate.getFullYear(), 0, 1)
      const months = []
      for (let i = 0; i < 12; i++) {
        const month = new Date(yearStart)
        month.setMonth(i)
        months.push(month)
      }
      return months
    }
  }

  const dateRange = generateDateRange()

  const filteredData = useMemo(() => {
    const createGanttData = (): PsGanttTask[] => {
      return mockProductionOrders.map((order) => {
        const workOrders = mockWorkOrders
          .filter((wo) => wo.productionOrderId === order.id)
          .map((wo) => ({
            id: `work-${wo.id}`,
            name: wo.operation?.name || wo.workOrderNumber,
            type: 'task' as const,
            startDate: wo.plannedStartDate,
            endDate: wo.plannedEndDate,
            progress: Math.round((wo.confirmedQuantity / wo.plannedQuantity) * 100) || 0,
            assignee: wo.assignedOperators[0]
              ? mockEmployees.find((e) => e.id === wo.assignedOperators[0])
              : undefined,
            status: getWorkOrderStatus(wo.status),
            priority: order.priority,
            level: 1,
            children: [],
            estimatedHours: wo.processTime / 60,
            hoursWorked: wo.actualProcessTime ? wo.actualProcessTime / 60 : 0,
          }))

        return {
          id: `prod-${order.id}`,
          name: `${order.orderNumber} - ${order.materials.map((m) => m.material?.name).join(', ')}`,
          type: 'project' as const,
          startDate: order.plannedStartDate,
          endDate: order.plannedEndDate,
          progress:
            order.confirmedQuantity && order.plannedQuantity
              ? Math.round((order.confirmedQuantity / order.plannedQuantity) * 100)
              : 0,
          status: getProductionOrderStatus(order.status),
          priority: order.priority,
          level: 0,
          children: workOrders,
        }
      })
    }

    const filterByWorkCenter = (tasks: PsGanttTask[]): PsGanttTask[] => {
      if (!selectedWorkCenter) return tasks
      return tasks
        .map((task) => {
          if (task.type === 'task' && task.assignee?.id !== selectedWorkCenter) {
            return null
          }

          if (task.children) {
            const filteredChildren = filterByWorkCenter(task.children).filter(
              Boolean,
            ) as PsGanttTask[]
            if (filteredChildren.length > 0) {
              return { ...task, children: filteredChildren }
            } else if (task.type === 'task' && task.assignee?.id === selectedWorkCenter) {
              return task
            }
            return null
          }

          return task
        })
        .filter(Boolean) as PsGanttTask[]
    }

    const allGanttTasks = createGanttData()
    return filterByWorkCenter(allGanttTasks)
  }, [selectedWorkCenter])

  const toggleExpand = (id: string) => {
    const newExpanded = new Set(expandedItems)
    if (newExpanded.has(id)) {
      newExpanded.delete(id)
    } else {
      newExpanded.add(id)
    }
    setExpandedItems(newExpanded)
  }

  const navigatePrevious = () => {
    const newDate = new Date(currentDate)
    if (viewMode === 'day') newDate.setDate(newDate.getDate() - 1)
    else if (viewMode === 'week') newDate.setDate(newDate.getDate() - 7)
    else if (viewMode === 'month') newDate.setMonth(newDate.getMonth() - 1)
    else newDate.setFullYear(newDate.getFullYear() - 1)
    setCurrentDate(newDate)
  }

  const navigateNext = () => {
    const newDate = new Date(currentDate)
    if (viewMode === 'day') newDate.setDate(newDate.getDate() + 1)
    else if (viewMode === 'week') newDate.setDate(newDate.getDate() + 7)
    else if (viewMode === 'month') newDate.setMonth(newDate.getMonth() + 1)
    else newDate.setFullYear(newDate.getFullYear() + 1)
    setCurrentDate(newDate)
  }

  const navigateToday = () => {
    setCurrentDate(new Date())
  }

  const getCurrentDateInfo = () => {
    if (viewMode === 'day') {
      return currentDate.toLocaleDateString('tr-TR', {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      })
    } else if (viewMode === 'week') {
      const weekStart = new Date(currentDate)
      const dayOfWeek = weekStart.getDay()
      const daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1
      weekStart.setDate(weekStart.getDate() - daysToSubtract)
      const weekEnd = new Date(weekStart)
      weekEnd.setDate(weekStart.getDate() + 6)
      return `${weekStart.toLocaleDateString('tr-TR', {
        day: 'numeric',
        month: 'short',
      })} - ${weekEnd.toLocaleDateString('tr-TR', {
        day: 'numeric',
        month: 'short',
        year: 'numeric',
      })}`
    } else if (viewMode === 'month') {
      return currentDate.toLocaleDateString('tr-TR', {
        year: 'numeric',
        month: 'long',
      })
    } else {
      return currentDate.toLocaleDateString('tr-TR', { year: 'numeric' })
    }
  }

  const calculateTaskPosition = (startDate: Date, endDate: Date) => {
    const chartStart = dateRange[0]
    const chartEnd = dateRange[dateRange.length - 1]
    const taskStart = new Date(startDate)
    const taskEnd = new Date(endDate)

    if (viewMode === 'day') {
      const dayStart = new Date(chartStart)
      dayStart.setHours(0, 0, 0, 0)
      const dayEnd = new Date(chartStart)
      dayEnd.setHours(23, 59, 59, 999)
      if (taskEnd < dayStart || taskStart > dayEnd)
        return { left: '100%', width: '0%', isVisible: false }
      const startHour =
        taskStart > dayStart ? taskStart.getHours() + taskStart.getMinutes() / 60 : 0
      const endHour = taskEnd < dayEnd ? taskEnd.getHours() + taskEnd.getMinutes() / 60 : 24
      const left = (startHour / 24) * 100
      const width = Math.max(1, ((endHour - startHour) / 24) * 100)
      return { left: `${left}%`, width: `${width}%`, isVisible: true }
    } else if (viewMode === 'week') {
      const weekStart = new Date(chartStart)
      const weekEnd = new Date(chartEnd)
      weekEnd.setHours(23, 59, 59, 999)
      if (taskEnd < weekStart || taskStart > weekEnd)
        return { left: '100%', width: '0%', isVisible: false }
      const startDay =
        taskStart > weekStart
          ? Math.floor((taskStart.getTime() - weekStart.getTime()) / (1000 * 60 * 60 * 24))
          : 0
      const endDay =
        taskEnd < weekEnd
          ? Math.ceil((taskEnd.getTime() - weekStart.getTime()) / (1000 * 60 * 60 * 24))
          : 7
      const left = (startDay / 7) * 100
      const width = Math.max(1, ((endDay - startDay) / 7) * 100)
      return { left: `${left}%`, width: `${width}%`, isVisible: true }
    } else if (viewMode === 'month') {
      const monthStart = new Date(chartStart)
      const monthEnd = new Date(chartEnd)
      monthEnd.setHours(23, 59, 59, 999)
      if (taskEnd < monthStart || taskStart > monthEnd)
        return { left: '100%', width: '0%', isVisible: false }
      const daysInMonth = dateRange.length
      const startDay =
        taskStart > monthStart
          ? Math.floor((taskStart.getTime() - monthStart.getTime()) / (1000 * 60 * 60 * 24))
          : 0
      const endDay =
        taskEnd < monthEnd
          ? Math.ceil((taskEnd.getTime() - monthStart.getTime()) / (1000 * 60 * 60 * 24))
          : daysInMonth
      const left = (startDay / daysInMonth) * 100
      const width = Math.max(1, ((endDay - startDay) / daysInMonth) * 100)
      return { left: `${left}%`, width: `${width}%`, isVisible: true }
    } else {
      const yearStart = new Date(chartStart)
      const yearEnd = new Date(chartEnd)
      yearEnd.setMonth(11, 31)
      yearEnd.setHours(23, 59, 59, 999)
      if (taskEnd < yearStart || taskStart > yearEnd)
        return { left: '100%', width: '0%', isVisible: false }
      const startMonth = taskStart > yearStart ? taskStart.getMonth() : 0
      const endMonth = taskEnd < yearEnd ? taskEnd.getMonth() + 1 : 12
      const left = (startMonth / 12) * 100
      const width = Math.max(1, ((endMonth - startMonth) / 12) * 100)
      return { left: `${left}%`, width: `${width}%`, isVisible: true }
    }
  }

  const renderTask = (task: PsGanttTask): React.ReactNode => {
    const hasChildren = task.children && task.children.length > 0
    const isExpanded = expandedItems.has(task.id)
    const indent = task.level * 20

    return (
      <React.Fragment key={task.id}>
        <div className="flex items-center border-b border-gray-100 hover:bg-gray-50 min-h-[36px]">
          {/* Task Info */}
          <div className="w-1/3 sm:w-1/4 p-1 border-r border-gray-200">
            <div className="flex items-center" style={{ paddingLeft: `${Math.min(indent, 30)}px` }}>
              {hasChildren && (
                <button
                  onClick={() => toggleExpand(task.id)}
                  className="mr-1 p-0.5 hover:bg-gray-200 rounded"
                >
                  {isExpanded ? (
                    <FaChevronDown className="h-2.5 w-2.5" />
                  ) : (
                    <FaChevronRight className="h-2.5 w-2.5" />
                  )}
                </button>
              )}
              {!hasChildren && <div className="w-3 sm:w-5"></div>}

              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-1 sm:gap-2">
                  <span
                    className={`font-medium text-xs truncate ${
                      task.type === 'project' ? 'text-blue-900 font-semibold' : 'text-gray-900'
                    }`}
                    title={task.name}
                  >
                    {task.name}
                  </span>
                  <span
                    className={`px-1 py-0 text-[10px] border rounded flex-shrink-0 hidden sm:inline ${getPriorityColor(
                      task.priority,
                    )}`}
                  >
                    {task.priority}
                  </span>
                </div>

                {task.type === 'task' && task.assignee && (
                  <div className="flex items-center gap-1 mt-0.5 text-xs text-gray-600">
                    <FaUser className="h-2 w-2 flex-shrink-0" />
                    <span className="truncate text-xs">
                      {task.assignee.firstName} {task.assignee.lastName}
                    </span>
                    {task.hoursWorked && task.estimatedHours && (
                      <span className="text-xs bg-gray-100 px-1 py-0.5 rounded flex-shrink-0 hidden md:inline">
                        {task.hoursWorked}h / {task.estimatedHours}h
                      </span>
                    )}
                  </div>
                )}

                <div className="mt-1 text-xs text-gray-500 truncate hidden sm:block">
                  {task.startDate.toLocaleDateString('tr-TR')} -{' '}
                  {task.endDate.toLocaleDateString('tr-TR')}
                </div>
              </div>
            </div>
          </div>

          {/* Gantt Chart */}
          <div className="w-2/3 sm:w-3/4 p-1 relative">
            <div className="relative h-6 bg-gray-100 rounded">
              {(() => {
                const position = calculateTaskPosition(task.startDate, task.endDate)

                if (task.type === 'task' && position.isVisible) {
                  return (
                    <div
                      className={`absolute h-5 mt-0.5 rounded shadow-sm group cursor-pointer border border-white border-opacity-20`}
                      style={{ left: position.left, width: position.width }}
                      title={`${task.name} - ${task.progress}% tamamlandı`}
                    >
                      <div
                        className="h-full bg-black bg-opacity-15 rounded-lg relative overflow-hidden"
                        style={{ width: `${task.progress}%` }}
                      >
                        <div className="absolute inset-0 bg-white bg-opacity-20"></div>
                      </div>
                      <div className="absolute inset-0 flex items-center justify-center text-white text-[10px] font-bold drop-shadow-sm z-10">
                        {task.progress}%
                      </div>
                      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-20 hidden sm:block">
                        <div className="font-semibold">{task.name}</div>
                        <div className="mt-1">İlerleme: {task.progress}% tamamlandı</div>
                        <div>Planlanan Başlangıç: {task.startDate.toLocaleDateString('tr-TR')}</div>
                        <div>Planlanan Bitiş: {task.endDate.toLocaleDateString('tr-TR')}</div>
                        <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-800"></div>
                      </div>
                    </div>
                  )
                }

                if (task.type !== 'task' && position.isVisible) {
                  return (
                    <div
                      className="absolute h-2 mt-2 bg-gradient-to-r from-gray-400 to-gray-600 rounded-full group cursor-pointer shadow-sm border border-white border-opacity-30"
                      style={{ left: position.left, width: position.width }}
                      title={`${task.name}`}
                    >
                      <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-20 hidden sm:block">
                        <div className="font-semibold">{task.name}</div>
                        <div>Planlanan Başlangıç: {task.startDate.toLocaleDateString('tr-TR')}</div>
                        <div>Planlanan Bitiş: {task.endDate.toLocaleDateString('tr-TR')}</div>
                        <div className="absolute top-full left-1/2 transform -translate-x-1/2 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-800"></div>
                      </div>
                    </div>
                  )
                }

                return null
              })()}
            </div>
          </div>
        </div>

        {hasChildren && isExpanded && task.children?.map((child) => renderTask(child))}
      </React.Fragment>
    )
  }

  return (
    <Container>
      <div className="mb-3">
        <div className="flex items-center gap-3">
          <div>
            <h2 className="text-2xl font-bold text-gray-900">Planlama Gantt Şeması</h2>
            <p className="text-gray-600">Üretim ve iş emirlerinizi zaman çizelgesinde yönetin.</p>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-sm border h-full flex flex-col">
        <div className="p-2 border-b border-gray-200 flex-shrink-0">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div className="flex items-center justify-center gap-2">
              <button
                onClick={navigatePrevious}
                className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
              >
                <FaChevronLeft className="h-4 w-4" />
              </button>
              <div className="text-sm font-semibold text-gray-900 min-w-[180px] text-center">
                {getCurrentDateInfo()}
              </div>
              <button
                onClick={navigateNext}
                className="p-1.5 text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
              >
                <FaArrowRight className="h-4 w-4" />
              </button>
              <button
                onClick={navigateToday}
                className="px-2 py-1 text-xs bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors"
              >
                Bugün
              </button>
            </div>

            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-2">
              <select
                value={selectedWorkCenter}
                onChange={(e) => setSelectedWorkCenter(e.target.value)}
                className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto"
              >
                <option value="">Tüm İş Merkezleri</option>
                {mockWorkCenters.map((wc) => (
                  <option key={wc.id} value={wc.id}>
                    {wc.name}
                  </option>
                ))}
              </select>

              <select
                value={viewMode}
                onChange={(e) => setViewMode(e.target.value as 'day' | 'week' | 'month' | 'year')}
                className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-full sm:w-auto"
              >
                <option value="day">Günlük</option>
                <option value="week">Haftalık</option>
                <option value="month">Aylık</option>
                <option value="year">Yıllık</option>
              </select>
            </div>
          </div>
        </div>

        <div className="flex border-b border-gray-200 flex-shrink-0">
          <div className="w-1/3 sm:w-1/4 p-2 border-r border-gray-200 bg-gray-50 font-semibold text-xs">
            Üretim Emri / İş Emri
          </div>
          <div className="w-2/3 sm:w-3/4 p-2 bg-gray-50">
            <div className="flex justify-between text-xs font-semibold">
              {dateRange.map((date) => (
                <div key={date.toISOString()} className="text-center min-w-0 flex-1">
                  <div className="truncate">
                    {viewMode === 'day'
                      ? date.toLocaleTimeString('tr-TR', {
                          hour: '2-digit',
                          minute: '2-digit',
                        })
                      : viewMode === 'week'
                        ? date.toLocaleDateString('tr-TR', { day: '2-digit' })
                        : viewMode === 'year'
                          ? date.toLocaleDateString('tr-TR', { month: 'short' })
                          : date.toLocaleDateString('tr-TR', { day: '2-digit' })}
                  </div>
                  {viewMode !== 'day' && viewMode !== 'year' && (
                    <div className="text-xs text-gray-500 hidden sm:block">
                      {date.toLocaleDateString('tr-TR', { weekday: 'short' })}
                    </div>
                  )}
                  {viewMode === 'year' && (
                    <div className="text-xs text-gray-500 hidden sm:block">
                      {date.getFullYear()}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="flex-1 overflow-auto">{filteredData.map((task) => renderTask(task))}</div>
      </div>
    </Container>
  )
}

export default PlanningGantt