import React, { useState } from "react";
import {
  FaPlus,
  FaSearch,
  FaEdit,
  FaTrash,
  FaCodeBranch,
  FaUsers,
  FaCog,
  FaClock,
  FaCheckCircle,
  FaEye,
} from "react-icons/fa";
import { MmApprovalWorkflow } from "../../../types/mm";
import ApprovalWorkflowModal from "./ApprovalWorkflowModal";
import { mockApprovalWorkflows } from "../../../mocks/mockApprovalWorkflows";
import {
  getApprovalLevelColor,
  getApprovalLevelText,
  getRequestTypeColor,
  getRequestTypeText,
} from "../../../utils/erp";

const ApprovalWorkflows: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [showModal, setShowModal] = useState(false);
  const [editingWorkflow, setEditingWorkflow] =
    useState<MmApprovalWorkflow | null>(null);
  const [selectedWorkflow, setSelectedWorkflow] =
    useState<MmApprovalWorkflow | null>(null);
  const [modalMode, setModalMode] = useState<"create" | "view" | "edit">(
    "create"
  );

  // Mock data - replace with actual API calls
  const [workflows] = useState<MmApprovalWorkflow[]>(mockApprovalWorkflows);

  const filteredWorkflows = workflows.filter(
    (workflow) =>
      workflow.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      workflow.departmentId.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const getTotalSteps = (workflow: MmApprovalWorkflow) => {
    return workflow.approvalLevels.length;
  };

  const getRequiredSteps = (workflow: MmApprovalWorkflow) => {
    return workflow.approvalLevels.filter((level) => level.isRequired).length;
  };

  const getMaxTimeout = (workflow: MmApprovalWorkflow) => {
    return Math.max(
      ...workflow.approvalLevels.map((level) => level.timeoutDays || 0)
    );
  };

  const handleEdit = (workflow: MmApprovalWorkflow) => {
    setEditingWorkflow(workflow);
    setModalMode("edit");
    setShowModal(true);
  };

  const handleView = (workflow: MmApprovalWorkflow) => {
    setEditingWorkflow(workflow);
    setModalMode("view");
    setShowModal(true);
  };

  const handleAddNew = () => {
    setEditingWorkflow(null);
    setModalMode("create");
    setShowModal(true);
  };

  const handleViewDetails = (workflow: MmApprovalWorkflow) => {
    setSelectedWorkflow(workflow);
  };

  const handleSaveWorkflow = (workflow: MmApprovalWorkflow) => {
    // TODO: Implement save logic
    console.log("Saving workflow:", workflow);
    setShowModal(false);
    setEditingWorkflow(null);
  };

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

  return (
    <div className="space-y-3 pt-2">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-gray-900">Onay Süreçleri</h2>
          <p className="text-gray-600">
            Departman bazlı satınalma onay süreçlerini yönetin
          </p>
        </div>
        <button
          onClick={handleAddNew}
          className="bg-blue-600 text-white px-3 py-1.5 rounded-lg hover:bg-blue-700 flex items-center space-x-2 text-sm"
        >
          <FaPlus className="w-4 h-4" />
          <span>Yeni Onay Süreci</span>
        </button>
      </div>

      {/* Search Bar */}
      <div className="relative">
        <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
        <input
          type="text"
          placeholder="Onay süreci ara..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-full pl-10 pr-4 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* Workflow List */}
        <div className="space-y-3 pt-2">
          <h3 className="text-base font-semibold text-gray-900">
            Onay Süreçleri
          </h3>
          {filteredWorkflows.map((workflow) => (
            <div
              key={workflow.id}
              className="bg-white rounded-lg shadow-md border border-gray-200 p-3 hover:shadow-lg transition-shadow cursor-pointer"
              onClick={() => handleViewDetails(workflow)}
            >
              <div className="flex items-start justify-between mb-2">
                <div className="flex-1">
                  <div className="flex items-center space-x-2 mb-1">
                    <FaCodeBranch className="w-4 h-4 text-gray-600" />
                    <h4 className="text-base font-semibold text-gray-900">
                      {workflow.name}
                    </h4>
                    <span
                      className={`px-2 py-1 rounded-full text-xs font-medium ${getRequestTypeColor(
                        workflow.requestType
                      )}`}
                    >
                      {getRequestTypeText(workflow.requestType)}
                    </span>
                  </div>
                  <p className="text-xs text-gray-600 mb-1">
                    Departman: {workflow.department?.name}
                  </p>
                  <p className="text-sm text-gray-600">
                    Limit: ₺{workflow.amountThreshold.toLocaleString()} ve üzeri
                  </p>
                </div>
                <div className="flex space-x-1">
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      handleView(workflow);
                    }}
                    className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
                    title="Görüntüle"
                  >
                    <FaEye className="w-4 h-4" />
                  </button>
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      handleEdit(workflow);
                    }}
                    className="p-1.5 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-md transition-colors"
                    title="Düzenle"
                  >
                    <FaEdit className="w-4 h-4" />
                  </button>
                  <button
                    onClick={(e) => e.stopPropagation()}
                    className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-md transition-colors"
                    title="Sil"
                  >
                    <FaTrash className="w-4 h-4" />
                  </button>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3 text-xs mb-2">
                <div className="flex items-center justify-between">
                  <span className="text-gray-500 flex items-center">
                    <FaUsers className="w-4 h-4 mr-1" />
                    Toplam Adım
                  </span>
                  <span className="font-medium">{getTotalSteps(workflow)}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-500 flex items-center">
                    <FaCheckCircle className="w-4 h-4 mr-1" />
                    Zorunlu Adım
                  </span>
                  <span className="font-medium">
                    {getRequiredSteps(workflow)}
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-500 flex items-center">
                    <FaClock className="w-4 h-4 mr-1" />
                    Maks. Süre
                  </span>
                  <span className="font-medium">
                    {getMaxTimeout(workflow)} gün
                  </span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-gray-500">Son Güncelleme</span>
                  <span className="font-medium">
                    {workflow.lastModificationTime.toLocaleDateString("tr-TR")}
                  </span>
                </div>
              </div>

              <div className="flex items-center justify-between">
                <span
                  className={`px-2 py-1 rounded-full text-xs font-medium ${
                    workflow.isActive
                      ? "bg-green-100 text-green-800"
                      : "bg-red-100 text-red-800"
                  }`}
                >
                  {workflow.isActive ? "Aktif" : "Pasif"}
                </span>
                <div className="flex items-center space-x-1">
                  {workflow.approvalLevels.some(
                    (level) => level.isParallel
                  ) && (
                    <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded flex items-center">
                      <FaCodeBranch className="w-3 h-3 mr-1" />
                      Paralel Onay
                    </span>
                  )}
                </div>
              </div>
            </div>
          ))}

          {filteredWorkflows.length === 0 && (
            <div className="text-center py-6">
              <FaCodeBranch className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-base font-medium text-gray-900 mb-2">
                Onay süreci bulunamadı
              </h3>
              <p className="text-sm text-gray-500">
                Arama kriterlerinizi değiştirin veya yeni bir onay süreci
                ekleyin.
              </p>
            </div>
          )}
        </div>

        {/* Workflow Details */}
        <div className="space-y-3 pt-2">
          <h3 className="text-base font-semibold text-gray-900">
            Onay Adımları
          </h3>
          {selectedWorkflow ? (
            <div className="bg-white rounded-lg shadow-md border border-gray-200 p-3">
              <div className="mb-3">
                <h4 className="font-semibold text-base text-gray-900 mb-2">
                  {selectedWorkflow.name}
                </h4>
                <div className="grid grid-cols-2 gap-1 text-xs text-gray-600 mb-2">
                  <div>Departman: {selectedWorkflow.departmentId}</div>
                  <div>
                    Tür: {getRequestTypeText(selectedWorkflow.requestType)}
                  </div>
                  <div>
                    Tutar Limiti: ₺
                    {selectedWorkflow.amountThreshold.toLocaleString()}
                  </div>
                  <div>
                    Durum: {selectedWorkflow.isActive ? "Aktif" : "Pasif"}
                  </div>
                </div>
              </div>

              <div className="space-y-2">
                {selectedWorkflow.approvalLevels
                  .sort((a, b) => a.sequence - b.sequence)
                  .map((level, index) => (
                    <div
                      key={level.id}
                      className="border border-gray-200 rounded-lg p-2"
                    >
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center space-x-2">
                          <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2 py-1 rounded">
                            Adım {level.sequence}
                          </span>
                          <span
                            className={`px-2 py-1 rounded-full text-xs font-medium ${getApprovalLevelColor(
                              level.level
                            )}`}
                          >
                            {getApprovalLevelText(level.level)}
                          </span>
                          {level.isRequired && (
                            <span className="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">
                              Zorunlu
                            </span>
                          )}
                          {level.isParallel && (
                            <span className="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">
                              Paralel
                            </span>
                          )}
                        </div>
                        {level.timeoutDays && (
                          <span className="text-xs text-gray-500 flex items-center">
                            <FaClock className="w-3 h-3 mr-1" />
                            {level.timeoutDays} gün
                          </span>
                        )}
                      </div>

                      <div className="text-xs">
                        <div className="font-medium text-gray-900 mb-1">
                          Onaylayanlar:
                        </div>
                        <div className="space-y-1">
                          {level.approverNames.map((name, idx) => (
                            <div
                              key={idx}
                              className="flex items-center space-x-2"
                            >
                              <FaUsers className="w-4 h-4 text-gray-400" />
                              <span className="text-gray-700">{name}</span>
                              <span className="text-xs text-gray-500">
                                ({level.approverUserIds[idx]})
                              </span>
                            </div>
                          ))}
                        </div>
                      </div>

                      {index < selectedWorkflow.approvalLevels.length - 1 && (
                        <div className="flex justify-center mt-3">
                          <div className="w-px h-4 bg-gray-300"></div>
                        </div>
                      )}
                    </div>
                  ))}
              </div>

              {/* Workflow Statistics */}
              <div className="mt-3 pt-3 border-t border-gray-100">
                <div className="grid grid-cols-3 gap-3 text-xs">
                  <div className="text-center">
                    <div className="font-medium text-gray-900">
                      {getTotalSteps(selectedWorkflow)}
                    </div>
                    <div className="text-gray-500">Toplam Adım</div>
                  </div>
                  <div className="text-center">
                    <div className="font-medium text-gray-900">
                      {getRequiredSteps(selectedWorkflow)}
                    </div>
                    <div className="text-gray-500">Zorunlu Adım</div>
                  </div>
                  <div className="text-center">
                    <div className="font-medium text-gray-900">
                      {getMaxTimeout(selectedWorkflow)}
                    </div>
                    <div className="text-gray-500">Maks. Gün</div>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="bg-gray-50 rounded-lg p-6 text-center">
              <FaCog className="w-12 h-12 text-gray-400 mx-auto mb-4" />
              <h3 className="text-base font-medium text-gray-900 mb-2">
                Onay Adımlarını Görüntüle
              </h3>
              <p className="text-sm text-gray-500">
                Detaylarını görmek için sol taraftan bir onay süreci seçin.
              </p>
            </div>
          )}
        </div>
      </div>

      {/* Approval Workflow Modal */}
      <ApprovalWorkflowModal
        isOpen={showModal}
        onClose={handleCloseModal}
        onSave={handleSaveWorkflow}
        workflow={editingWorkflow}
        mode={modalMode}
      />
    </div>
  );
};

export default ApprovalWorkflows;