import React, { useState } from "react";
import {
  FaCog,
  FaPlus,
  FaEdit,
  FaTrash,
  FaClock,
  FaCheckCircle,
  FaPlay,
} from "react-icons/fa";
import { MrpWorkOrder } from "../../../types/mrp";
import DataTable, { Column } from "../../../components/common/DataTable";
import { mockWorkOrders } from "../../../mocks/mockWorkOrders";
import NewWorkOrderForm from "./NewWorkOrderForm";
import EditWorkOrderForm from "./EditWorkOrderForm";
import ViewWorkOrderModal from "./ViewWorkOrderModal";
import CompleteWorkOrderModal from "./CompleteWorkOrderModal";
import Widget from "../../../components/common/Widget";
import { PriorityEnum } from "../../../types/common";
import {
  getPriorityColor,
  getPriorityText,
  getWorkOrderStatusColor,
  getWorkOrderStatusText,
} from "../../../utils/erp";
import { WorkOrderStatusEnum } from "../../../types/pm";

const WorkOrders: React.FC = () => {
  const [workOrders, setWorkOrders] = useState<MrpWorkOrder[]>(mockWorkOrders);

  const [searchTerm, setSearchTerm] = useState("");
  const [selectedStatus, setSelectedStatus] = useState<
    WorkOrderStatusEnum | "all"
  >("all");
  const [selectedPriority, setSelectedPriority] = useState<
    PriorityEnum | "all"
  >("all");

  // Modal states
  const [isNewWorkOrderOpen, setIsNewWorkOrderOpen] = useState(false);
  const [isEditWorkOrderOpen, setIsEditWorkOrderOpen] = useState(false);
  const [isViewWorkOrderOpen, setIsViewWorkOrderOpen] = useState(false);
  const [isCompleteWorkOrderOpen, setIsCompleteWorkOrderOpen] = useState(false);
  const [selectedWorkOrder, setSelectedWorkOrder] =
    useState<MrpWorkOrder | null>(null);

  // Event handlers
  const handleAdd = () => {
    setIsNewWorkOrderOpen(true);
  };

  const handleEdit = (workOrder: MrpWorkOrder) => {
    setSelectedWorkOrder(workOrder);
    setIsEditWorkOrderOpen(true);
  };

  const handleDelete = (id: string) => {
    if (window.confirm("Bu iş emrini silmek istediğinizden emin misiniz?")) {
      setWorkOrders((prev) => prev.filter((wo) => wo.id !== id));
    }
  };

  const handleStart = (workOrder: MrpWorkOrder) => {
    setWorkOrders((prev) =>
      prev.map((wo) =>
        wo.id === workOrder.id
          ? {
              ...wo,
              status: WorkOrderStatusEnum.InProgress,
              lastModificationTime: new Date(),
            }
          : wo
      )
    );
  };

  const handleComplete = (workOrder: MrpWorkOrder) => {
    setSelectedWorkOrder(workOrder);
    setIsCompleteWorkOrderOpen(true);
  };

  const handleViewDetails = (workOrder: MrpWorkOrder) => {
    setSelectedWorkOrder(workOrder);
    setIsViewWorkOrderOpen(true);
  };

  // Modal handlers
  const handleNewWorkOrderSave = (
    newWorkOrderData: Omit<
      MrpWorkOrder,
      "id" | "creationTime" | "lastModificationTime"
    >
  ) => {
    const newWorkOrder: MrpWorkOrder = {
      ...newWorkOrderData,
      id: `WO-${Date.now()}`,
      creationTime: new Date(),
      lastModificationTime: new Date(),
    };
    setWorkOrders((prev) => [...prev, newWorkOrder]);
  };

  const handleEditWorkOrderSave = (updatedWorkOrder: MrpWorkOrder) => {
    setWorkOrders((prev) =>
      prev.map((wo) => (wo.id === updatedWorkOrder.id ? updatedWorkOrder : wo))
    );
  };

  const handleCompleteWorkOrder = (
    workOrderId: string,
    confirmedQuantity: number,
    scrapQuantity: number
  ) => {
    setWorkOrders((prev) =>
      prev.map((wo) => {
        if (wo.id === workOrderId) {
          const newConfirmedQuantity = wo.confirmedQuantity + confirmedQuantity;
          const newScrapQuantity = wo.scrapQuantity + scrapQuantity;
          const newStatus =
            newConfirmedQuantity + newScrapQuantity >= wo.plannedQuantity
              ? WorkOrderStatusEnum.Completed
              : wo.status;

          return {
            ...wo,
            confirmedQuantity: newConfirmedQuantity,
            scrapQuantity: newScrapQuantity,
            status: newStatus,
            lastModificationTime: new Date(),
          };
        }
        return wo;
      })
    );
  };

  const filteredWorkOrders = workOrders.filter((workOrder) => {
    if (
      searchTerm &&
      !workOrder.workOrderNumber
        .toLowerCase()
        .includes(searchTerm.toLowerCase()) &&
      !workOrder.productionOrder?.orderNumber
        ?.toLowerCase()
        .includes(searchTerm.toLowerCase())
    ) {
      return false;
    }
    if (selectedStatus !== "all" && workOrder.status !== selectedStatus) {
      return false;
    }
    if (
      selectedPriority !== "all" &&
      workOrder.productionOrder?.priority !== selectedPriority
    ) {
      return false;
    }
    return true;
  });

  const columns: Column<MrpWorkOrder>[] = [
    {
      key: "workOrderNumber",
      header: "İş Emri No",
      sortable: true,
      render: (workOrder: MrpWorkOrder) => (
        <div>
          <div className="font-medium text-gray-900">
            {workOrder.workOrderNumber}
          </div>
          <div className="text-sm text-gray-500">
            Sıra: {workOrder.sequence}
          </div>
        </div>
      ),
    },
    {
      key: "productionOrder",
      header: "Üretim Emri",
      render: (workOrder: MrpWorkOrder) => (
        <div>
          <div className="font-medium text-gray-900">
            {workOrder.productionOrder?.orderNumber || "N/A"}
          </div>
        </div>
      ),
    },
    {
      key: "material",
      header: "Malzeme",
      render: (workOrder: MrpWorkOrder) => (
        <div>
          <div className="text-gray-900">
            {workOrder.material?.code}
            {" - "}
            {workOrder.material?.name || workOrder.materialId}
          </div>
        </div>
      ),
    },
    {
      key: "workCenter",
      header: "İş Merkezi",
      render: (workOrder: MrpWorkOrder) => (
        <div>
          <div className="font-medium text-gray-900">
            {workOrder.workCenter?.name || workOrder.workCenterId}
          </div>
          <div className="flex items-center gap-2">
            <span>{workOrder.operation?.name || workOrder.operationId}</span>
          </div>
          <div className="text-sm text-gray-500">
            {workOrder.assignedOperators.length} Operatör
          </div>
        </div>
      ),
    },
    {
      key: "quantities",
      header: "Miktarlar",
      render: (workOrder: MrpWorkOrder) => (
        <div className="text-sm">
          <div>Plan: {workOrder.plannedQuantity}</div>
          <div>Tamamlanan: {workOrder.confirmedQuantity}</div>
          {workOrder.scrapQuantity > 0 && (
            <div className="text-red-600">Fire: {workOrder.scrapQuantity}</div>
          )}
        </div>
      ),
    },
    {
      key: "schedule",
      header: "Planlama",
      render: (workOrder: MrpWorkOrder) => (
        <div className="text-sm">
          <div className="flex items-center gap-1">
            <FaClock className="w-3 h-3 text-gray-400" />
            <span>
              Başlangıç:{" "}
              {new Date(workOrder.plannedStartDate).toLocaleDateString("tr-TR")}
            </span>
          </div>
          <div className="flex items-center gap-1">
            <FaClock className="w-3 h-3 text-gray-400" />
            <span>
              Bitiş:{" "}
              {new Date(workOrder.plannedEndDate).toLocaleDateString("tr-TR")}
            </span>
          </div>
        </div>
      ),
    },
    {
      key: "priority",
      header: "Öncelik",
      render: (workOrder: MrpWorkOrder) =>
        workOrder.productionOrder?.priority ? (
          <span
            className={`px-2 py-1 text-xs font-medium rounded-full ${getPriorityColor(
              workOrder.productionOrder.priority
            )}`}
          >
            {getPriorityText(workOrder.productionOrder.priority)}
          </span>
        ) : (
          "-"
        ),
    },
    {
      key: "status",
      header: "Durum",
      render: (workOrder: MrpWorkOrder) => (
        <span
          className={`px-2 py-1 text-xs font-medium rounded-full ${getWorkOrderStatusColor(
            workOrder.status
          )}`}
        >
          {getWorkOrderStatusText(workOrder.status)}
        </span>
      ),
    },
    {
      key: "actions",
      header: "İşlemler",
      render: (workOrder: MrpWorkOrder) => (
        <div className="flex gap-1">
          {workOrder.status === WorkOrderStatusEnum.Released && (
            <button
              onClick={() => handleStart(workOrder)}
              className="p-1 text-green-600 hover:bg-green-50 rounded"
              title="Başlat"
            >
              <FaPlay className="w-4 h-4" />
            </button>
          )}
          {workOrder.status === WorkOrderStatusEnum.InProgress && (
            <button
              onClick={() => handleComplete(workOrder)}
              className="p-1 text-blue-600 hover:bg-blue-50 rounded"
              title="Tamamla"
            >
              <FaCheckCircle className="w-4 h-4" />
            </button>
          )}
          <button
            onClick={() => handleViewDetails(workOrder)}
            className="p-1 text-purple-600 hover:bg-purple-50 rounded"
            title="Detayları Görüntüle"
          >
            <FaCog className="w-4 h-4" />
          </button>
          <button
            onClick={() => handleEdit(workOrder)}
            className="p-1 text-blue-600 hover:bg-blue-50 rounded"
            title="Düzenle"
          >
            <FaEdit className="w-4 h-4" />
          </button>
          <button
            onClick={() => handleDelete(workOrder.id)}
            className="p-1 text-red-600 hover:bg-red-50 rounded"
            title="Sil"
          >
            <FaTrash className="w-4 h-4" />
          </button>
        </div>
      ),
    },
  ];

  // Calculate statistics
  const totalWorkOrders = workOrders.length;
  const inProgressOrders = workOrders.filter(
    (wo) => wo.status === WorkOrderStatusEnum.InProgress
  ).length;
  const completedOrders = workOrders.filter(
    (wo) => wo.status === WorkOrderStatusEnum.Completed
  ).length;
  const delayedOrders = workOrders.filter(
    (wo) =>
      wo.status !== WorkOrderStatusEnum.Completed &&
      new Date(wo.plannedEndDate) < new Date()
  ).length;

  // Status distribution
  const statusDistribution = Object.values(WorkOrderStatusEnum).map(
    (status) => ({
      status,
      count: workOrders.filter((wo) => wo.status === status).length,
      percentage:
        (workOrders.filter((wo) => wo.status === status).length /
          workOrders.length) *
          100 || 0,
    })
  );

  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">İş Emirleri</h2>
          <p className="text-sm text-gray-600">
            Üretim operasyonlarının detaylı takibi
          </p>
        </div>
        <button
          onClick={handleAdd}
          className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm"
        >
          <FaPlus className="w-4 h-4" />
          Yeni İş Emri
        </button>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
        <Widget
          title="Toplam İş Emri"
          value={totalWorkOrders}
          color="blue"
          icon="FaCog"
        />

        <Widget
          title="İşlemde"
          value={inProgressOrders}
          color="yellow"
          icon="FaPlay"
        />

        <Widget
          title="Tamamlanan"
          value={completedOrders}
          color="green"
          icon="FaCheckCircle"
        />

        <Widget
          title="Geciken"
          value={delayedOrders}
          color="red"
          icon="FaExclamationCircle"
        />
      </div>

      {/* Status Distribution */}
      <div className="bg-white rounded-lg shadow-sm border p-3">
        <h3 className="text-sm font-semibold text-gray-900 mb-2">
          Durum Dağılımı
        </h3>
        <div className="grid grid-cols-2 md:grid-cols-5 gap-2">
          {statusDistribution.map(({ status, count, percentage }) => (
            <div key={status} className="text-center p-2 border rounded-lg">
              <div
                className={`inline-block px-1.5 py-0.5 text-xs font-medium rounded-full mb-1 ${getWorkOrderStatusColor(
                  status
                )}`}
              >
                {getWorkOrderStatusText(status)}
              </div>
              <div className="text-xl font-bold text-gray-900">{count}</div>
              <div className="text-xs text-gray-500">
                {percentage.toFixed(1)}%
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Filters */}
      <div className="flex gap-2 items-center">
        <div className="flex-1">
          <input
            type="text"
            placeholder="İş emri numarası ara..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <select
          value={selectedStatus}
          onChange={(e) =>
            setSelectedStatus(e.target.value as WorkOrderStatusEnum | "all")
          }
          className="px-2 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 Durumlar</option>
          {Object.values(WorkOrderStatusEnum).map((status) => (
            <option key={status} value={status}>
              {getWorkOrderStatusText(status)}
            </option>
          ))}
        </select>

        <select
          value={selectedPriority}
          onChange={(e) =>
            setSelectedPriority(e.target.value as PriorityEnum | "all")
          }
          className="px-2 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 Öncelikler</option>
          {Object.values(PriorityEnum).map((priority) => (
            <option key={priority} value={priority}>
              {getPriorityText(priority)}
            </option>
          ))}
        </select>
      </div>

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

      {filteredWorkOrders.length === 0 && (
        <div className="text-center py-12">
          <FaCog className="w-12 h-12 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">
            İş emri bulunamadı
          </h3>
          <p className="text-gray-500">
            Arama kriterlerinizi değiştirmeyi deneyin.
          </p>
        </div>
      )}

      {/* Modals */}
      <NewWorkOrderForm
        isOpen={isNewWorkOrderOpen}
        onClose={() => setIsNewWorkOrderOpen(false)}
        onSave={handleNewWorkOrderSave}
      />

      <EditWorkOrderForm
        isOpen={isEditWorkOrderOpen}
        onClose={() => setIsEditWorkOrderOpen(false)}
        onSave={handleEditWorkOrderSave}
        workOrder={selectedWorkOrder}
      />

      <ViewWorkOrderModal
        isOpen={isViewWorkOrderOpen}
        onClose={() => setIsViewWorkOrderOpen(false)}
        workOrder={selectedWorkOrder}
      />

      <CompleteWorkOrderModal
        isOpen={isCompleteWorkOrderOpen}
        onClose={() => setIsCompleteWorkOrderOpen(false)}
        onConfirm={handleCompleteWorkOrder}
        workOrder={selectedWorkOrder}
      />
    </div>
  );
};

export default WorkOrders;