import React, { useState } from "react";
import {
  FaClock,
  FaUser,
  FaPlus,
  FaEdit,
  FaCheck,
  FaTimes,
  FaEye,
  FaUsers,
} from "react-icons/fa";
import { LeaveStatusEnum, HrOvertime } from "../../../types/hr";
import DataTable, { Column } from "../../../components/common/DataTable";
import { mockOvertimes } from "../../../mocks/mockOvertimes";
import { mockEmployees } from "../../../mocks/mockEmployees";
import { mockDepartments } from "../../../mocks/mockDepartments";
import Widget from "../../../components/common/Widget";
import { getLeaveStatusColor, getLeaveStatusText } from "../../../utils/erp";

const OvertimeManagement: React.FC = () => {
  // Overtime states
  const [overtimes, setOvertimes] = useState<HrOvertime[]>(mockOvertimes);
  const [overtimeSelectedStatus, setOvertimeSelectedStatus] =
    useState<string>("all");
  const [overtimeSelectedPeriod, setOvertimeSelectedPeriod] =
    useState<string>("all");
  const [searchOvertimesTerm, setSearchOvertimesTerm] = useState("");
  const [selectedDepartment, setSelectedDepartment] = useState<string>("all");

  // Overtime modal states
  const [showOvertimeAddModal, setShowOvertimeAddModal] = useState(false);
  const [showOvertimeEditModal, setShowOvertimeEditModal] = useState(false);
  const [showOvertimeViewModal, setShowOvertimeViewModal] = useState(false);
  const [showOvertimeRejectModal, setShowOvertimeRejectModal] = useState(false);
  const [showBulkOvertimeModal, setShowBulkOvertimeModal] = useState(false);
  const [selectedOvertime, setSelectedOvertime] = useState<HrOvertime | null>(
    null
  );
  const [overtimeRejectReason, setOvertimeRejectReason] = useState("");

  // Overtime form state
  const [overtimeFormData, setOvertimeFormData] = useState({
    employeeId: "",
    date: "",
    startTime: "",
    endTime: "",
    reason: "",
    rate: 1.5,
  });

  // Bulk overtime form state
  const [bulkOvertimeFormData, setBulkOvertimeFormData] = useState({
    departmentId: "",
    selectedEmployees: [] as string[],
    date: "",
    startTime: "",
    endTime: "",
    reason: "",
    rate: 1.5,
  });

  // Get employees by department
  const getEmployeesByDepartment = (departmentId: string) => {
    return mockEmployees.filter((emp) => emp.departmantId === departmentId);
  };

  // Get selected employee object
  const getSelectedEmployee = (employeeId: string) => {
    return mockEmployees.find((emp) => emp.id === employeeId);
  };

  // Overtime handlers
  const handleOvertimeAdd = () => {
    setOvertimeFormData({
      employeeId: "",
      date: "",
      startTime: "",
      endTime: "",
      reason: "",
      rate: 1.5,
    });
    setShowOvertimeAddModal(true);
  };

  const handleOvertimeEdit = (overtime: HrOvertime) => {
    setSelectedOvertime(overtime);
    setOvertimeFormData({
      employeeId: overtime.employeeId,
      date: new Date(overtime.date).toISOString().split("T")[0],
      startTime: overtime.startTime,
      endTime: overtime.endTime,
      reason: overtime.reason,
      rate: overtime.rate || 1.5,
    });
    setShowOvertimeEditModal(true);
  };

  const handleOvertimeApprove = (id: string) => {
    setOvertimes((prevOvertimes) =>
      prevOvertimes.map((overtime) =>
        overtime.id === id
          ? {
              ...overtime,
              status: LeaveStatusEnum.Approved,
              lastModificationTime: new Date(),
            }
          : overtime
      )
    );
    alert("Mesai talebi onaylandı!");
  };

  const handleOvertimeReject = (id: string, reason?: string) => {
    if (reason) {
      setOvertimes((prevOvertimes) =>
        prevOvertimes.map((overtime) =>
          overtime.id === id
            ? {
                ...overtime,
                status: LeaveStatusEnum.Rejected,
                lastModificationTime: new Date(),
              }
            : overtime
        )
      );
      setShowOvertimeRejectModal(false);
      setOvertimeRejectReason("");
      alert("Mesai talebi reddedildi!");
    } else {
      const overtime = overtimes.find((o) => o.id === id);
      if (overtime) {
        setSelectedOvertime(overtime);
        setShowOvertimeRejectModal(true);
      }
    }
  };

  const handleOvertimeView = (overtime: HrOvertime) => {
    setSelectedOvertime(overtime);
    setShowOvertimeViewModal(true);
  };

  const handleSubmitOvertimeAdd = () => {
    if (
      !overtimeFormData.employeeId ||
      !overtimeFormData.date ||
      !overtimeFormData.startTime ||
      !overtimeFormData.endTime
    ) {
      alert("Lütfen tüm gerekli alanları doldurun!");
      return;
    }

    const startTime = new Date(`2000-01-01 ${overtimeFormData.startTime}`);
    const endTime = new Date(`2000-01-01 ${overtimeFormData.endTime}`);
    const totalHours =
      (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60);

    if (totalHours <= 0) {
      alert("Bitiş saati başlangıç saatinden sonra olmalıdır!");
      return;
    }

    const newOvertime: HrOvertime = {
      id: `ot_${Date.now()}`,
      employeeId: overtimeFormData.employeeId,
      date: new Date(overtimeFormData.date),
      startTime: overtimeFormData.startTime,
      endTime: overtimeFormData.endTime,
      totalHours: totalHours,
      reason: overtimeFormData.reason,
      status: LeaveStatusEnum.Pending,
      rate: overtimeFormData.rate,
      amount: totalHours * 100 * overtimeFormData.rate, // Assuming 100 TL/hour base rate
      creationTime: new Date(),
      lastModificationTime: new Date(),
    };

    setOvertimes((prevOvertimes) => [...prevOvertimes, newOvertime]);
    setShowOvertimeAddModal(false);
    alert("Mesai talebi başarıyla oluşturuldu!");
  };

  const handleSubmitOvertimeEdit = () => {
    if (!selectedOvertime) return;

    if (
      !overtimeFormData.employeeId ||
      !overtimeFormData.date ||
      !overtimeFormData.startTime ||
      !overtimeFormData.endTime
    ) {
      alert("Lütfen tüm gerekli alanları doldurun!");
      return;
    }

    const startTime = new Date(`2000-01-01 ${overtimeFormData.startTime}`);
    const endTime = new Date(`2000-01-01 ${overtimeFormData.endTime}`);
    const totalHours =
      (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60);

    if (totalHours <= 0) {
      alert("Bitiş saati başlangıç saatinden sonra olmalıdır!");
      return;
    }

    setOvertimes((prevOvertimes) =>
      prevOvertimes.map((overtime) =>
        overtime.id === selectedOvertime.id
          ? {
              ...overtime,
              employeeId: overtimeFormData.employeeId,
              date: new Date(overtimeFormData.date),
              startTime: overtimeFormData.startTime,
              endTime: overtimeFormData.endTime,
              totalHours: totalHours,
              reason: overtimeFormData.reason,
              rate: overtimeFormData.rate,
              amount: totalHours * 100 * overtimeFormData.rate,
              lastModificationTime: new Date(),
            }
          : overtime
      )
    );

    setShowOvertimeEditModal(false);
    setSelectedOvertime(null);
    alert("Mesai talebi başarıyla güncellendi!");
  };

  const handleSubmitOvertimeReject = () => {
    if (!selectedOvertime || !overtimeRejectReason.trim()) {
      alert("Lütfen red nedeni giriniz!");
      return;
    }

    handleOvertimeReject(selectedOvertime.id, overtimeRejectReason);
  };

  const handleBulkOvertimeAdd = () => {
    setBulkOvertimeFormData({
      departmentId: "",
      selectedEmployees: [],
      date: "",
      startTime: "",
      endTime: "",
      reason: "",
      rate: 1.5,
    });
    setShowBulkOvertimeModal(true);
  };

  const handleSubmitBulkOvertime = () => {
    if (
      !bulkOvertimeFormData.selectedEmployees.length ||
      !bulkOvertimeFormData.date ||
      !bulkOvertimeFormData.startTime ||
      !bulkOvertimeFormData.endTime
    ) {
      alert(
        "Lütfen en az bir personel seçin ve tüm gerekli alanları doldurun!"
      );
      return;
    }

    const startTime = new Date(`2000-01-01 ${bulkOvertimeFormData.startTime}`);
    const endTime = new Date(`2000-01-01 ${bulkOvertimeFormData.endTime}`);
    const totalHours =
      (endTime.getTime() - startTime.getTime()) / (1000 * 60 * 60);

    if (totalHours <= 0) {
      alert("Bitiş saati başlangıç saatinden sonra olmalıdır!");
      return;
    }

    const newOvertimes: HrOvertime[] =
      bulkOvertimeFormData.selectedEmployees.map((employeeId) => {
        const employee = getSelectedEmployee(employeeId);
        return {
          id: `ot_${Date.now()}_${employeeId}`,
          employeeId: employeeId,
          employee: employee,
          date: new Date(bulkOvertimeFormData.date),
          startTime: bulkOvertimeFormData.startTime,
          endTime: bulkOvertimeFormData.endTime,
          totalHours: totalHours,
          reason: bulkOvertimeFormData.reason,
          status: LeaveStatusEnum.Pending,
          rate: bulkOvertimeFormData.rate,
          amount: totalHours * 100 * bulkOvertimeFormData.rate, // 100 TL/hour base rate
          creationTime: new Date(),
          lastModificationTime: new Date(),
        };
      });

    setOvertimes((prevOvertimes) => [...prevOvertimes, ...newOvertimes]);
    setShowBulkOvertimeModal(false);
    setBulkOvertimeFormData({
      departmentId: "",
      selectedEmployees: [],
      date: "",
      startTime: "",
      endTime: "",
      reason: "",
      rate: 1.5,
    });
    alert(
      `${newOvertimes.length} personel için toplu mesai talebi başarıyla oluşturuldu!`
    );
  };

  // Filter overtime data
  const filteredOvertimes = overtimes.filter((overtime) => {
    if (
      overtimeSelectedStatus !== "all" &&
      overtime.status !== overtimeSelectedStatus
    ) {
      return false;
    }
    if (
      selectedDepartment !== "all" &&
      overtime.employee?.department?.name !== selectedDepartment
    ) {
      return false;
    }

    if (overtimeSelectedPeriod !== "all") {
      const now = new Date();
      const overtimeDate = new Date(overtime.date);

      switch (overtimeSelectedPeriod) {
        case "this-month": {
          const currentMonth = now.getMonth();
          const currentYear = now.getFullYear();
          return (
            overtimeDate.getMonth() === currentMonth &&
            overtimeDate.getFullYear() === currentYear
          );
        }
        case "last-month": {
          const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1);
          return (
            overtimeDate.getMonth() === lastMonth.getMonth() &&
            overtimeDate.getFullYear() === lastMonth.getFullYear()
          );
        }
        case "last-3-months": {
          const threeMonthsAgo = new Date(
            now.getFullYear(),
            now.getMonth() - 3
          );
          return overtimeDate >= threeMonthsAgo;
        }
        default:
          return true;
      }
    }

    // Search filter
    if (searchOvertimesTerm.trim() !== "") {
      if (overtime.employeeId !== searchOvertimesTerm) {
        return false;
      }
    }

    return true;
  });

  // Overtime table columns
  const overtimeColumns: Column<HrOvertime>[] = [
    {
      key: "employee",
      header: "Personel",
      render: (overtime: HrOvertime) => {
        const employee = mockEmployees.find(
          (emp) => emp.id === overtime.employeeId
        );
        return (
          <div className="flex items-center gap-2">
            <FaUser className="w-4 h-4 text-gray-500" />
            <div>
              <div className="font-medium text-gray-900">
                {employee?.fullName}
              </div>
              <div className="text-sm text-gray-500">{employee?.code}</div>
            </div>
          </div>
        );
      },
    },
    {
      key: "date",
      header: "Tarih",
      render: (overtime: HrOvertime) => (
        <div className="text-sm">
          {new Date(overtime.date).toLocaleDateString("tr-TR")}
        </div>
      ),
    },
    {
      key: "time",
      header: "Mesai Saatleri",
      render: (overtime: HrOvertime) => (
        <div className="text-sm">
          <div>
            {overtime.startTime} - {overtime.endTime}
          </div>
          <div className="text-gray-500">{overtime.totalHours} saat</div>
        </div>
      ),
    },
    {
      key: "reason",
      header: "Neden",
      render: (overtime: HrOvertime) => (
        <div className="text-sm max-w-xs truncate" title={overtime.reason}>
          {overtime.reason}
        </div>
      ),
    },
    {
      key: "rate",
      header: "Çarpan",
      render: (overtime: HrOvertime) => (
        <div className="text-sm">x{overtime.rate}</div>
      ),
    },
    {
      key: "amount",
      header: "Tutar",
      render: (overtime: HrOvertime) => (
        <div className="text-sm font-medium">
          {overtime.amount?.toLocaleString("tr-TR")} ₺
        </div>
      ),
    },
    {
      key: "status",
      header: "Durum",
      render: (overtime: HrOvertime) => (
        <span
          className={`px-2 py-1 text-xs font-medium rounded-full ${getLeaveStatusColor(
            overtime.status
          )}`}
        >
          {getLeaveStatusText(overtime.status)}
        </span>
      ),
    },
    {
      key: "actions",
      header: "İşlemler",
      render: (overtime: HrOvertime) => (
        <div className="flex gap-1">
          <button
            onClick={() => handleOvertimeView(overtime)}
            className="p-1 text-blue-600 hover:bg-blue-50 rounded"
            title="Görüntüle"
          >
            <FaEye className="w-4 h-4" />
          </button>

          {overtime.status === LeaveStatusEnum.Pending && (
            <>
              <button
                onClick={() => handleOvertimeApprove(overtime.id)}
                className="p-1 text-green-600 hover:bg-green-50 rounded"
                title="Onayla"
              >
                <FaCheck className="w-4 h-4" />
              </button>
              <button
                onClick={() => handleOvertimeReject(overtime.id)}
                className="p-1 text-red-600 hover:bg-red-50 rounded"
                title="Reddet"
              >
                <FaTimes className="w-4 h-4" />
              </button>
            </>
          )}

          <button
            onClick={() => handleOvertimeEdit(overtime)}
            className="p-1 text-gray-600 hover:bg-gray-50 rounded"
            title="Düzenle"
          >
            <FaEdit className="w-4 h-4" />
          </button>
        </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">Mesai Yönetimi</h2>
          <p className="text-sm text-gray-600 mt-1">
            Personel mesai talepleri ve onay süreçleri
          </p>
        </div>
        <div className="flex gap-2">
          <button
            onClick={handleOvertimeAdd}
            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
          >
            <FaPlus className="w-4 h-4" />
            Yeni Mesai Talebi
          </button>
          <button
            onClick={handleBulkOvertimeAdd}
            className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
          >
            <FaUsers className="w-4 h-4" />
            Toplu Mesai
          </button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Widget
          title="Toplam Mesai"
          value={overtimes.length}
          color="blue"
          icon="FaClock"
        />

        <Widget
          title="Beklemede"
          value={
            overtimes.filter((o) => o.status === LeaveStatusEnum.Pending).length
          }
          color="yellow"
          icon="FaClock"
        />

        <Widget
          title="Onaylanan"
          value={
            overtimes.filter((o) => o.status === LeaveStatusEnum.Approved)
              .length
          }
          color="green"
          icon="FaCheck"
        />

        <Widget
          title="Toplam Tutar"
          value={`${overtimes
            .filter((o) => o.status === LeaveStatusEnum.Approved)
            .reduce((sum, o) => sum + (o.amount || 0), 0)
            .toLocaleString("tr-TR")} ₺`}
          color="purple"
          icon="FaDollarSign"
        />
      </div>

      {/* Filters */}
      <div className="flex gap-3 items-center">
        <select
          value={selectedDepartment}
          onChange={(e) => setSelectedDepartment(e.target.value)}
          className="px-3 py-1.5 border border-gray-300 rounded-md text-sm 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.name}>
              {dept.name}
            </option>
          ))}
        </select>

        <select
          value={searchOvertimesTerm}
          onChange={(e) => setSearchOvertimesTerm(e.target.value)}
          className="w-full px-3 py-1.5 border border-gray-300 text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <option value="">Personel seçiniz...</option>
          {mockEmployees.map((employee) => (
            <option key={employee.id} value={employee.id}>
              {employee.fullName} ({employee.code})
            </option>
          ))}
        </select>

        <select
          value={overtimeSelectedStatus}
          onChange={(e) => setOvertimeSelectedStatus(e.target.value)}
          className="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        >
          <option value="all">Tüm Durumlar</option>
          <option value={LeaveStatusEnum.Pending}>Beklemede</option>
          <option value={LeaveStatusEnum.Approved}>Onaylı</option>
          <option value={LeaveStatusEnum.Rejected}>Reddedildi</option>
        </select>

        <select
          value={overtimeSelectedPeriod}
          onChange={(e) => setOvertimeSelectedPeriod(e.target.value)}
          className="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
        >
          <option value="all">Tüm Dönemler</option>
          <option value="this-month">Bu Ay</option>
          <option value="last-month">Geçen Ay</option>
          <option value="last-3-months">Son 3 Ay</option>
        </select>
      </div>

      {/* Data Table */}
      <div className="bg-white rounded-lg shadow-sm border">
        <DataTable data={filteredOvertimes} columns={overtimeColumns} />
      </div>

      {filteredOvertimes.length === 0 && (
        <div className="text-center py-12">
          <FaClock className="w-10 h-10 text-gray-400 mx-auto mb-3" />
          <h3 className="text-base font-medium text-gray-900 mb-2">
            Mesai talebi bulunamadı
          </h3>
          <p className="text-gray-500">
            Seçilen kriterlere uygun mesai talebi bulunmamaktadır.
          </p>
        </div>
      )}

      {/* Overtime Add/Edit Modal */}
      {(showOvertimeAddModal || showOvertimeEditModal) && selectedOvertime && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-4 w-full max-w-md">
            <h3 className="text-base font-semibold mb-4">
              {showOvertimeAddModal
                ? "Yeni Mesai Talebi"
                : "Mesai Talebini Düzenle"}
            </h3>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Personel
                </label>
                <select
                  value={overtimeFormData.employeeId}
                  onChange={(e) =>
                    setOvertimeFormData({
                      ...overtimeFormData,
                      employeeId: e.target.value,
                    })
                  }
                  className="w-full 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="">Personel seçiniz...</option>
                  {mockEmployees.map((employee) => (
                    <option key={employee.id} value={employee.id}>
                      {employee.fullName} ({employee.code})
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Tarih
                </label>
                <input
                  type="date"
                  value={overtimeFormData.date}
                  onChange={(e) =>
                    setOvertimeFormData({
                      ...overtimeFormData,
                      date: e.target.value,
                    })
                  }
                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Başlangıç Saati
                  </label>
                  <input
                    type="time"
                    value={overtimeFormData.startTime}
                    onChange={(e) =>
                      setOvertimeFormData({
                        ...overtimeFormData,
                        startTime: e.target.value,
                      })
                    }
                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Bitiş Saati
                  </label>
                  <input
                    type="time"
                    value={overtimeFormData.endTime}
                    onChange={(e) =>
                      setOvertimeFormData({
                        ...overtimeFormData,
                        endTime: e.target.value,
                      })
                    }
                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Mesai Çarpanı
                </label>
                <select
                  value={overtimeFormData.rate}
                  onChange={(e) =>
                    setOvertimeFormData({
                      ...overtimeFormData,
                      rate: parseFloat(e.target.value),
                    })
                  }
                  className="w-full 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={1.5}>x1.5 (Normal Mesai)</option>
                  <option value={2.0}>x2.0 (Hafta Sonu/Tatil)</option>
                  <option value={2.5}>x2.5 (Resmi Tatil)</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Neden
                </label>
                <textarea
                  value={overtimeFormData.reason}
                  onChange={(e) =>
                    setOvertimeFormData({
                      ...overtimeFormData,
                      reason: e.target.value,
                    })
                  }
                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  rows={3}
                  placeholder="Mesai nedenini belirtiniz..."
                />
              </div>
            </div>

            <div className="flex justify-end gap-2 mt-6">
              <button
                onClick={() => {
                  setShowOvertimeAddModal(false);
                  setShowOvertimeEditModal(false);
                  setSelectedOvertime(null);
                }}
                className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
              >
                İptal
              </button>
              <button
                onClick={
                  showOvertimeAddModal
                    ? handleSubmitOvertimeAdd
                    : handleSubmitOvertimeEdit
                }
                className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
              >
                {showOvertimeAddModal ? "Oluştur" : "Güncelle"}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Overtime View Modal */}
      {showOvertimeViewModal && selectedOvertime && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-4 w-full max-w-lg">
            <h3 className="text-base font-semibold mb-4">Mesai Detayları</h3>

            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Personel
                  </label>
                  <p className="text-gray-900">
                    {mockEmployees.find(
                      (emp) => emp.id === selectedOvertime.employeeId
                    )?.fullName || selectedOvertime.employeeId}
                  </p>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Tarih
                  </label>
                  <p className="text-gray-900">
                    {new Date(selectedOvertime.date).toLocaleDateString(
                      "tr-TR"
                    )}
                  </p>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Başlangıç Saati
                  </label>
                  <p className="text-gray-900">{selectedOvertime.startTime}</p>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Bitiş Saati
                  </label>
                  <p className="text-gray-900">{selectedOvertime.endTime}</p>
                </div>
              </div>

              <div className="grid grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Toplam Saat
                  </label>
                  <p className="text-gray-900">
                    {selectedOvertime.totalHours} saat
                  </p>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Çarpan
                  </label>
                  <p className="text-gray-900">x{selectedOvertime.rate}</p>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Tutar
                  </label>
                  <p className="text-gray-900 font-medium">
                    {selectedOvertime.amount?.toLocaleString("tr-TR")} ₺
                  </p>
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Durum
                </label>
                <span
                  className={`px-2 py-1 text-xs font-medium rounded-full ${getLeaveStatusColor(
                    selectedOvertime.status
                  )}`}
                >
                  {getLeaveStatusText(selectedOvertime.status)}
                </span>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700">
                  Neden
                </label>
                <p className="text-gray-900">{selectedOvertime.reason}</p>
              </div>

              {selectedOvertime.approvedBy && (
                <div>
                  <label className="block text-sm font-medium text-gray-700">
                    Onaylayan
                  </label>
                  <p className="text-gray-900">
                    {
                      mockEmployees.find(
                        (emp) => emp.id === selectedOvertime.approvedBy
                      )?.fullName
                    }
                  </p>
                </div>
              )}
            </div>

            <div className="flex justify-end mt-6">
              <button
                onClick={() => {
                  setShowOvertimeViewModal(false);
                  setSelectedOvertime(null);
                }}
                className="px-3 py-1.5 text-sm bg-gray-600 text-white rounded-md hover:bg-gray-700"
              >
                Kapat
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Overtime Reject Modal */}
      {showOvertimeRejectModal && selectedOvertime && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-4 w-full max-w-md">
            <h3 className="text-base font-semibold mb-4">
              Mesai Talebini Reddet
            </h3>

            <div className="mb-4">
              <p className="text-gray-700 mb-2">
                <strong>
                  {mockEmployees.find(
                    (emp) => emp.id === selectedOvertime.employeeId
                  )?.fullName || selectedOvertime.employeeId}
                </strong>{" "}
                adlı personelin mesai talebini reddetmek üzeresiniz.
              </p>
            </div>

            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Red Nedeni <span className="text-red-500">*</span>
              </label>
              <textarea
                value={overtimeRejectReason}
                onChange={(e) => setOvertimeRejectReason(e.target.value)}
                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                rows={3}
                placeholder="Reddedilme nedenini belirtiniz..."
              />
            </div>

            <div className="flex justify-end gap-2">
              <button
                onClick={() => {
                  setShowOvertimeRejectModal(false);
                  setSelectedOvertime(null);
                  setOvertimeRejectReason("");
                }}
                className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
              >
                İptal
              </button>
              <button
                onClick={handleSubmitOvertimeReject}
                className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-md hover:bg-red-700"
              >
                Reddet
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Bulk Overtime Modal */}
      {showBulkOvertimeModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-4 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <h3 className="text-base font-semibold mb-4">Toplu Mesai Talebi</h3>

            <div className="space-y-4">
              {/* Department Selection */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Departman
                </label>
                <select
                  value={bulkOvertimeFormData.departmentId}
                  onChange={(e) => {
                    setBulkOvertimeFormData({
                      ...bulkOvertimeFormData,
                      departmentId: e.target.value,
                      selectedEmployees: [],
                    });
                  }}
                  className="w-full 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="">Departman seçiniz...</option>
                  {mockDepartments.map((department) => (
                    <option key={department.id} value={department.id}>
                      {department.name} ({department.code})
                    </option>
                  ))}
                </select>
              </div>

              {/* Employee Selection */}
              {bulkOvertimeFormData.departmentId && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Personeller
                  </label>
                  <div className="border border-gray-300 rounded-md p-3 max-h-40 overflow-y-auto">
                    <div className="space-y-2">
                      <label className="flex items-center">
                        <input
                          type="checkbox"
                          checked={
                            getEmployeesByDepartment(
                              bulkOvertimeFormData.departmentId
                            ).length > 0 &&
                            bulkOvertimeFormData.selectedEmployees.length ===
                              getEmployeesByDepartment(
                                bulkOvertimeFormData.departmentId
                              ).length
                          }
                          onChange={(e) => {
                            const departmentEmployees =
                              getEmployeesByDepartment(
                                bulkOvertimeFormData.departmentId
                              );
                            setBulkOvertimeFormData({
                              ...bulkOvertimeFormData,
                              selectedEmployees: e.target.checked
                                ? departmentEmployees.map((emp) => emp.id)
                                : [],
                            });
                          }}
                          className="mr-2"
                        />
                        <span className="font-medium">Tümünü Seç</span>
                      </label>
                      {getEmployeesByDepartment(
                        bulkOvertimeFormData.departmentId
                      ).map((employee) => (
                        <label key={employee.id} className="flex items-center">
                          <input
                            type="checkbox"
                            checked={bulkOvertimeFormData.selectedEmployees.includes(
                              employee.id
                            )}
                            onChange={(e) => {
                              setBulkOvertimeFormData({
                                ...bulkOvertimeFormData,
                                selectedEmployees: e.target.checked
                                  ? [
                                      ...bulkOvertimeFormData.selectedEmployees,
                                      employee.id,
                                    ]
                                  : bulkOvertimeFormData.selectedEmployees.filter(
                                      (id) => id !== employee.id
                                    ),
                              });
                            }}
                            className="mr-2"
                          />
                          <span>
                            {employee.fullName} ({employee.code})
                          </span>
                        </label>
                      ))}
                    </div>
                  </div>
                  <p className="text-sm text-gray-500 mt-1">
                    {bulkOvertimeFormData.selectedEmployees.length} personel
                    seçildi
                  </p>
                </div>
              )}

              {/* Date */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Mesai Tarihi
                </label>
                <input
                  type="date"
                  value={bulkOvertimeFormData.date}
                  onChange={(e) =>
                    setBulkOvertimeFormData({
                      ...bulkOvertimeFormData,
                      date: e.target.value,
                    })
                  }
                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                />
              </div>

              {/* Time Range */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Başlangıç Saati
                  </label>
                  <input
                    type="time"
                    value={bulkOvertimeFormData.startTime}
                    onChange={(e) =>
                      setBulkOvertimeFormData({
                        ...bulkOvertimeFormData,
                        startTime: e.target.value,
                      })
                    }
                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    Bitiş Saati
                  </label>
                  <input
                    type="time"
                    value={bulkOvertimeFormData.endTime}
                    onChange={(e) =>
                      setBulkOvertimeFormData({
                        ...bulkOvertimeFormData,
                        endTime: e.target.value,
                      })
                    }
                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>
              </div>

              {/* Rate */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Mesai Çarpanı
                </label>
                <select
                  value={bulkOvertimeFormData.rate}
                  onChange={(e) =>
                    setBulkOvertimeFormData({
                      ...bulkOvertimeFormData,
                      rate: parseFloat(e.target.value),
                    })
                  }
                  className="w-full 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={1.5}>x1.5 (Normal Mesai)</option>
                  <option value={2.0}>x2.0 (Hafta Sonu/Tatil)</option>
                  <option value={2.5}>x2.5 (Resmi Tatil)</option>
                </select>
              </div>

              {/* Reason */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Neden (Opsiyonel)
                </label>
                <textarea
                  value={bulkOvertimeFormData.reason}
                  onChange={(e) =>
                    setBulkOvertimeFormData({
                      ...bulkOvertimeFormData,
                      reason: e.target.value,
                    })
                  }
                  className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  rows={3}
                  placeholder="Mesai nedenini belirtiniz..."
                />
              </div>

              {/* Summary */}
              {bulkOvertimeFormData.selectedEmployees.length > 0 &&
                bulkOvertimeFormData.startTime &&
                bulkOvertimeFormData.endTime && (
                  <div className="bg-blue-50 p-3 rounded-lg">
                    <h4 className="text-sm font-medium text-blue-900 mb-2">
                      Özet
                    </h4>
                    <div className="text-sm text-blue-800 space-y-1">
                      <p>
                        <span className="font-medium">Personel Sayısı:</span>{" "}
                        {bulkOvertimeFormData.selectedEmployees.length}
                      </p>
                      {(() => {
                        const startTime = new Date(
                          `2000-01-01 ${bulkOvertimeFormData.startTime}`
                        );
                        const endTime = new Date(
                          `2000-01-01 ${bulkOvertimeFormData.endTime}`
                        );
                        const totalHours =
                          (endTime.getTime() - startTime.getTime()) /
                          (1000 * 60 * 60);
                        const totalAmount =
                          totalHours *
                          100 *
                          bulkOvertimeFormData.rate *
                          bulkOvertimeFormData.selectedEmployees.length;

                        return totalHours > 0 ? (
                          <>
                            <p>
                              <span className="font-medium">Mesai Süresi:</span>{" "}
                              {totalHours} saat
                            </p>
                            <p>
                              <span className="font-medium">Çarpan:</span> x
                              {bulkOvertimeFormData.rate}
                            </p>
                            <p>
                              <span className="font-medium">Toplam Tutar:</span>{" "}
                              {totalAmount.toLocaleString("tr-TR")} ₺
                            </p>
                          </>
                        ) : null;
                      })()}
                    </div>
                  </div>
                )}
            </div>

            <div className="flex justify-end gap-2 mt-6">
              <button
                onClick={() => {
                  setShowBulkOvertimeModal(false);
                  setBulkOvertimeFormData({
                    departmentId: "",
                    selectedEmployees: [],
                    date: "",
                    startTime: "",
                    endTime: "",
                    reason: "",
                    rate: 1.5,
                  });
                }}
                className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50"
              >
                İptal
              </button>
              <button
                onClick={handleSubmitBulkOvertime}
                className="px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700"
              >
                Toplu Mesai Oluştur
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default OvertimeManagement;