import React, { useMemo } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { mockProductionOrders } from "../../../mocks/mockProductionOrders";
import {
  MrpProductionOrder,
  MrpProductionOrderMaterial,
} from "../../../types/mrp";
import {
  FaCog,
  FaCalendarAlt,
  FaClipboardList,
  FaTruck,
  FaMoneyBillWave,
  FaArrowLeft,
  FaExclamationTriangle,
} from "react-icons/fa";
import StatusBadge from "../../../components/common/StatusBadge";
import { getPriorityColor } from "../../../utils/erp";

const ProductionOrderView: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  const { data: productionOrder, isLoading } = useQuery({
    queryKey: ["production-order", id],
    queryFn: async () => {
      await new Promise((r) => setTimeout(r, 200));
      return mockProductionOrders.find((p) => p.id === id) as
        | MrpProductionOrder
        | undefined;
    },
    enabled: !!id,
  });

  const materials: MrpProductionOrderMaterial[] = useMemo(
    () => productionOrder?.materials || [],
    [productionOrder]
  );

  if (isLoading) {
    return (
      <div className="flex justify-center items-center min-h-screen">
        <div className="flex flex-col items-center space-y-4">
          <div className="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600"></div>
          <p className="text-gray-600 font-medium">Üretim emri yükleniyor...</p>
        </div>
      </div>
    );
  }

  if (!productionOrder) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
        <div className="text-center bg-white p-8 rounded-2xl shadow-xl max-w-md">
          <div className="mb-6">
            <FaExclamationTriangle className="mx-auto h-16 w-16 text-gray-400" />
          </div>
          <h2 className="text-2xl font-bold text-gray-900 mb-2">
            Üretim Emri Bulunamadı
          </h2>
          <p className="text-gray-600 mb-6">
            İstenen üretim emri mevcut değil veya silinmiş olabilir.
          </p>
          <button
            onClick={() => navigate("/admin/mrp/production-orders")}
            className="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-medium rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl"
          >
            <FaArrowLeft className="mr-2" />
            Üretim Emirleri Listesine Dön
          </button>
        </div>
      </div>
    );
  }

  const getProgressPercentage = () => {
    if (productionOrder.plannedQuantity === 0) return 0;
    return Math.round(
      (productionOrder.confirmedQuantity / productionOrder.plannedQuantity) *
        100
    );
  };

  return (
    <div className="mx-auto mt-2">
      {/* Header */}
      <div className="mb-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <button
              onClick={() => navigate("/admin/mrp/production-orders")}
              className="inline-flex items-center px-3 py-2 bg-white text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-all duration-200 shadow-sm border border-gray-200"
            >
              <FaArrowLeft className="mr-2 text-sm" />
              Geri
            </button>
            <div>
              <h1 className="text-2xl font-bold text-gray-900">
                Üretim Emri Detayları
              </h1>
              <p className="text-gray-600 mt-1 text-sm">
                {productionOrder.orderNumber} - Detaylı bilgiler
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Order Header Card */}
      <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 mb-4">
        <div className="flex flex-wrap justify-between items-start mb-4">
          <div className="space-y-2">
            <div className="text-sm font-medium text-gray-500 uppercase tracking-wide">
              Üretim Emri No
            </div>
            <div className="text-xl font-bold text-gray-900">
              {productionOrder.orderNumber}
            </div>
          </div>

          <div className="space-y-2 text-right">
            <div className="text-sm font-medium text-gray-500 uppercase tracking-wide">
              Durum
            </div>
            <StatusBadge status={productionOrder.status} />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-gradient-to-br from-blue-50 to-blue-100 p-4 rounded-xl border border-blue-200">
            <div className="text-sm font-medium text-blue-700 mb-2 uppercase tracking-wide">
              Öncelik
            </div>
            <span
              className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold border ${getPriorityColor(
                productionOrder.priority
              )}`}
            >
              {productionOrder.priority}
            </span>
          </div>

          <div className="bg-gradient-to-br from-purple-50 to-purple-100 p-4 rounded-xl border border-purple-200">
            <div className="text-sm font-medium text-purple-700 mb-2 uppercase tracking-wide">
              Tür
            </div>
            <div className="text-base font-semibold text-purple-900">
              {productionOrder.orderType}
            </div>
          </div>

          <div className="bg-gradient-to-br from-orange-50 to-orange-100 p-4 rounded-xl border border-orange-200">
            <div className="text-sm font-medium text-orange-700 mb-2 uppercase tracking-wide">
              İlerleme
            </div>
            <div className="text-xl font-bold text-orange-900">
              {getProgressPercentage()}%
            </div>
          </div>
        </div>

        {/* Progress Bar */}
        <div className="mb-6">
          <div className="flex items-center justify-between mb-3">
            <div className="text-sm font-medium text-gray-700">
              Üretim İlerlemesi
            </div>
            <div className="text-sm text-gray-500">
              {productionOrder.confirmedQuantity} /{" "}
              {productionOrder.plannedQuantity} adet
            </div>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
            <div
              className="bg-gradient-to-r from-blue-500 to-blue-600 h-3 rounded-full transition-all duration-500 ease-out"
              style={{ width: `${getProgressPercentage()}%` }}
            ></div>
          </div>
        </div>

        {productionOrder.customerRequirement && (
          <div className="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
            <div className="flex items-center mb-3">
              <FaClipboardList className="text-blue-600 mr-2" />
              <div className="text-sm font-semibold text-blue-800 uppercase tracking-wide">
                Müşteri Talebi
              </div>
            </div>
            <p className="text-blue-700 leading-relaxed">
              {productionOrder.customerRequirement}
            </p>
          </div>
        )}
      </div>

      {/* Info Cards Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
        {/* Quantities Card */}
        <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-200">
          <div className="flex items-center gap-2 mb-2">
            <div className="p-1.5 bg-blue-100 rounded-lg">
              <FaCog className="text-blue-600 text-base" />
            </div>
            <h3 className="text-base font-bold text-gray-900">
              Miktar Bilgileri
            </h3>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between items-center py-1.5 border-b border-gray-100">
              <span className="text-gray-600 font-medium">Planlanan:</span>
              <span className="font-bold text-gray-900">
                {productionOrder.plannedQuantity}
              </span>
            </div>
            <div className="flex justify-between items-center py-1.5 border-b border-gray-100">
              <span className="text-gray-600 font-medium">Üretilen:</span>
              <span className="font-bold text-green-600">
                {productionOrder.confirmedQuantity}
              </span>
            </div>
            <div className="flex justify-between items-center py-1.5 border-b border-gray-100">
              <span className="text-gray-600 font-medium">Gereken:</span>
              <span className="font-bold text-blue-600">
                {productionOrder.requiredQuantity}
              </span>
            </div>
            <div className="flex justify-between items-center py-2">
              <span className="text-gray-600 font-medium">Fire:</span>
              <span className="font-bold text-red-600">
                {productionOrder.scrapQuantity}
              </span>
            </div>
          </div>
        </div>

        {/* Schedule Card */}
        <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-200">
          <div className="flex items-center gap-2 mb-2">
            <div className="p-1.5 bg-purple-100 rounded-lg">
              <FaCalendarAlt className="text-purple-600 text-base" />
            </div>
            <h3 className="text-base font-bold text-gray-900">Zamanlama</h3>
          </div>
          <div className="space-y-2">
            <div className="py-1.5 border-b border-gray-100">
              <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                Plan Başlangıç
              </div>
              <div className="font-semibold text-gray-900">
                {new Date(productionOrder.plannedStartDate).toLocaleDateString(
                  "tr-TR",
                  {
                    weekday: "long",
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                  }
                )}
              </div>
            </div>
            <div className="py-1.5 border-b border-gray-100">
              <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                Plan Bitiş
              </div>
              <div className="font-semibold text-gray-900">
                {new Date(productionOrder.plannedEndDate).toLocaleDateString(
                  "tr-TR",
                  {
                    weekday: "long",
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                  }
                )}
              </div>
            </div>
            {productionOrder.actualStartDate && (
              <div className="py-1.5 border-b border-gray-100">
                <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                  Gerçek Başlangıç
                </div>
                <div className="font-semibold text-green-600">
                  {new Date(productionOrder.actualStartDate).toLocaleDateString(
                    "tr-TR",
                    {
                      weekday: "long",
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                    }
                  )}
                </div>
              </div>
            )}
            {productionOrder.actualEndDate && (
              <div className="py-1.5">
                <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                  Gerçek Bitiş
                </div>
                <div className="font-semibold text-green-600">
                  {new Date(productionOrder.actualEndDate).toLocaleDateString(
                    "tr-TR",
                    {
                      weekday: "long",
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                    }
                  )}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Costs Card */}
        <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-200">
          <div className="flex items-center gap-2 mb-2">
            <div className="p-1.5 bg-green-100 rounded-lg">
              <FaMoneyBillWave className="text-green-600 text-base" />
            </div>
            <h3 className="text-base font-bold text-gray-900">
              Maliyet Bilgileri
            </h3>
          </div>
          <div className="space-y-2">
            <div className="py-1.5 border-b border-gray-100">
              <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                Planlanan Maliyet
              </div>
              <div className="text-lg font-bold text-gray-900">
                {new Intl.NumberFormat("tr-TR", {
                  style: "currency",
                  currency: productionOrder.currency,
                }).format(productionOrder.plannedCost)}
              </div>
            </div>
            <div className="py-1.5 border-b border-gray-100">
              <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                Gerçekleşen Maliyet
              </div>
              <div className="text-lg font-bold text-green-600">
                {new Intl.NumberFormat("tr-TR", {
                  style: "currency",
                  currency: productionOrder.currency,
                }).format(productionOrder.actualCost)}
              </div>
            </div>
            <div className="py-1.5">
              <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                Para Birimi
              </div>
              <div className="font-semibold text-gray-900">
                {productionOrder.currency}
              </div>
            </div>
          </div>
        </div>

        {/* Metadata Card */}
        <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4 hover:shadow-xl transition-all duration-200">
          <div className="flex items-center gap-2 mb-2">
            <div className="p-1.5 bg-gray-100 rounded-lg">
              <FaClipboardList className="text-gray-600 text-base" />
            </div>
            <h3 className="text-base font-bold text-gray-900">
              Sistem Bilgileri
            </h3>
          </div>
          <div className="space-y-2">
            <div className="py-1.5 border-b border-gray-100">
              <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                Oluşturulma
              </div>
              <div className="font-semibold text-gray-900">
                {new Date(productionOrder.creationTime).toLocaleDateString(
                  "tr-TR",
                  { year: "numeric", month: "short", day: "numeric" }
                )}
              </div>
            </div>
            <div className="py-1.5 border-b border-gray-100">
              <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                Son Güncelleme
              </div>
              <div className="font-semibold text-gray-900">
                {new Date(
                  productionOrder.lastModificationTime
                ).toLocaleDateString("tr-TR", {
                  year: "numeric",
                  month: "short",
                  day: "numeric",
                })}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Materials List */}
      <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-4">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-2">
            <div className="p-1.5 bg-indigo-100 rounded-lg">
              <FaTruck className="text-indigo-600 text-base" />
            </div>
            <div>
              <h3 className="text-base font-bold text-gray-900">Malzemeler</h3>
              <p className="text-gray-600 mt-1 text-sm">
                Üretim emrine bağlı malzeme satırları
              </p>
            </div>
          </div>
          <div className="text-right">
            <div className="text-lg font-bold text-indigo-600">
              {materials.length}
            </div>
            <div className="text-sm text-gray-500">Malzeme</div>
          </div>
        </div>

        {materials.length === 0 ? (
          <div className="p-8 text-center bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border-2 border-dashed border-gray-300">
            <FaTruck className="mx-auto h-16 w-16 text-gray-400 mb-4" />
            <p className="text-gray-500 text-base font-medium">
              Bu üretim emrine bağlı malzeme bulunmamaktadır.
            </p>
          </div>
        ) : (
          <div className="space-y-3 max-h-96 overflow-y-auto">
            {materials.map((m: MrpProductionOrderMaterial) => (
              <div
                key={m.id}
                className="flex flex-col lg:flex-row lg:items-center justify-between p-4 border border-gray-200 rounded-xl hover:bg-gradient-to-r hover:from-blue-50 hover:to-indigo-50 hover:border-blue-300 transition-all duration-200 group"
              >
                <div className="mb-4 lg:mb-0 flex-1">
                  <div className="flex items-center gap-2 mb-2">
                    <div className="p-1.5 bg-blue-100 rounded-lg group-hover:bg-blue-200 transition-colors">
                      <FaTruck className="text-blue-600" />
                    </div>
                    <div>
                      <div className="text-gray-600">
                        {m.salesOrder?.orderNumber || m.salesOrder?.id}
                      </div>
                      <div className="font-bold text-gray-900 text-base">
                        {m.material?.code || m.materialId}
                        {" - "}
                        {m.material?.name || "Malzeme adı bulunamadı"}
                      </div>
                    </div>
                  </div>
                  {m.customerRequirement && (
                    <div className="text-sm text-blue-600 italic rounded-lg mt-3">
                      "{m.customerRequirement}"
                    </div>
                  )}
                </div>

                <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4">
                  <div className="text-center p-2 bg-gray-50 rounded-lg">
                    <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">
                      Planlanan
                    </div>
                    <div className="font-bold text-gray-900 text-base">
                      {m.plannedQuantity}
                    </div>
                  </div>

                  <div className="text-center p-2 bg-green-50 rounded-lg">
                    <div className="text-xs font-medium text-green-600 uppercase tracking-wide mb-1">
                      Üretilen
                    </div>
                    <div className="font-bold text-green-700 text-base">
                      {m.confirmedQuantity}
                    </div>
                  </div>

                  <div className="text-center p-2 bg-blue-50 rounded-lg">
                    <div className="text-xs font-medium text-blue-600 uppercase tracking-wide mb-1">
                      Gereken
                    </div>
                    <div className="font-bold text-blue-700 text-base">
                      {m.requiredQuantity}
                    </div>
                  </div>

                  <div className="text-center p-2 bg-red-50 rounded-lg">
                    <div className="text-xs font-medium text-red-600 uppercase tracking-wide mb-1">
                      Fire
                    </div>
                    <div className="font-bold text-red-700 text-base">
                      {m.scrapQuantity}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default ProductionOrderView;