"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { purchaseOrderService } from "../../../../services/api";
import { PurchaseOrder } from "../../../../types/purchase-order";
import { getDocumentFileIcon } from "../../../../utils/fileIcons";
import FileViewerModal from "@/components/ui/FileViewerModal";
import BarcodeViewerModal from "@/components/ui/BarcodeViewerModal";
import { FiPrinter } from "react-icons/fi";
import { MdQrCodeScanner } from "react-icons/md";
import {
  printSingleProductBarcodes,
  printAllProductBarcodes,
} from "@/utils/barcodePrint";
import { formatDate, formatDateTime } from "@/utils/dateUtils";
import { MdExpandMore, MdExpandLess } from "react-icons/md";
import ProductQuantityStatuses from "@/components/ui/ProductQuantityStatuses";
import OrderStatusCard from "@/components/ui/OrderStatusCard";
import PurchaseOrderDiscrepanciesPanel from "@/components/discrepancies/PurchaseOrderDiscrepanciesPanel";
import PurchaseOrderItemDiscrepanciesPanel from "@/components/discrepancies/PurchaseOrderItemDiscrepanciesPanel";

export default function PurchaseOrderDetailsPage({
  params,
}: {
  params: { id: string };
}) {
  const router = useRouter();
  const orderId = params.id;
  const [purchaseOrder, setPurchaseOrder] = useState<PurchaseOrder | null>(
    null
  );
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [quantityStatuses, setQuantityStatuses] = useState<any>(null);
  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());

  // File viewer modal state
  const [showFileViewer, setShowFileViewer] = useState(false);
  const [documentToView, setDocumentToView] = useState<any>(null);

  // Barcode viewer modal state
  const [showBarcodeViewer, setShowBarcodeViewer] = useState(false);
  const [barcodesToView, setBarcodesToView] = useState<any[]>([]);
  const [barcodeTitle, setBarcodeTitle] = useState<string>("");

  useEffect(() => {
    const fetchPurchaseOrder = async () => {
      try {
        setLoading(true);
        const response = await purchaseOrderService.getPurchaseOrder(
          Number(orderId)
        );
        setPurchaseOrder(response.data);
        setError(null);
      } catch (err) {
        console.error("Failed to fetch purchase order:", err);
        setError("Failed to load purchase order details. Please try again.");
      } finally {
        setLoading(false);
      }
    };

    const fetchQuantityStatuses = async () => {
      try {
        const response =
          await purchaseOrderService.getPurchaseOrderItemsWithShipmentStatus(
            Number(orderId)
          );
        setQuantityStatuses(response.data);
      } catch (err) {
        console.error("Failed to fetch quantity statuses:", err);
        // Don't set error for this as it's not critical
      }
    };

    fetchPurchaseOrder();
    fetchQuantityStatuses();
  }, [orderId]);

  const handleViewDocument = (document: any) => {
    setDocumentToView(document);
    setShowFileViewer(true);
  };

  const handleCloseFileViewer = () => {
    setShowFileViewer(false);
    setDocumentToView(null);
  };

  const handleViewSingleBarcode = async (item: any) => {
    try {
      const response = await purchaseOrderService.getItemBarcodes(item.id);
      const barcodes = response.data.map((barcode: any) => ({
        id: barcode.id,
        code: barcode.code,
        productName: item.product.name,
        productImage: item.product.image,
      }));

      setBarcodesToView(barcodes);
      setBarcodeTitle(item.product.name);
      setShowBarcodeViewer(true);
    } catch (error) {
      console.error("Failed to fetch barcodes:", error);
    }
  };

  const handleViewAllBarcodes = async () => {
    if (!purchaseOrder?.id) return;

    try {
      const response = await purchaseOrderService.getPurchaseOrderBarcodes(
        purchaseOrder.id
      );
      const allBarcodes = response.data.map((barcode: any) => ({
        id: barcode.id,
        code: barcode.code,
        productName:
          barcode.purchaseOrderItem?.product?.name || "Unknown Product",
        productImage: barcode.purchaseOrderItem?.product?.image,
      }));

      setBarcodesToView(allBarcodes);
      setBarcodeTitle(`All Products`);
      setShowBarcodeViewer(true);
    } catch (error) {
      console.error("Failed to fetch all barcodes:", error);
    }
  };

  const handleCloseBarcodeViewer = () => {
    setShowBarcodeViewer(false);
    setBarcodesToView([]);
    setBarcodeTitle("");
  };

  const toggleItemExpansion = (itemId: number) => {
    setExpandedItems((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(itemId)) {
        newSet.delete(itemId);
      } else {
        newSet.add(itemId);
      }
      return newSet;
    });
  };

  const handlePrintSingleBarcode = async (item: any) => {
    if (!purchaseOrder?.orderNumber) return;
    await printSingleProductBarcodes(
      item,
      purchaseOrder.orderNumber,
      purchaseOrderService.getItemBarcodes
    );
  };

  const handlePrintAllBarcodes = async () => {
    if (!purchaseOrder?.id || !purchaseOrder?.orderNumber) return;
    await printAllProductBarcodes(
      {
        id: purchaseOrder.id,
        orderNumber: purchaseOrder.orderNumber,
        items: purchaseOrder.items,
      },
      purchaseOrderService.getPurchaseOrderBarcodes
    );
  };

  if (loading) {
    return (
      <div className="p-6">
        <div className="bg-gray-50 text-gray-500 p-4 rounded-lg">
          Loading purchase order details...
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-6">
        <div className="bg-red-100 text-red-700 p-4 rounded-md">
          <p className="font-medium">Error</p>
          <p>{error}</p>
          <button
            onClick={() => router.push("/purchase-orders")}
            className="mt-4 bg-white text-red-700 py-2 px-4 rounded-md hover:bg-gray-100"
          >
            Back to Purchase Orders
          </button>
        </div>
      </div>
    );
  }

  if (!purchaseOrder) {
    return (
      <div className="p-6">
        <div className="bg-yellow-100 text-yellow-700 p-4 rounded-md">
          <p className="font-medium">Purchase order not found</p>
          <p>
            The requested purchase order does not exist or has been deleted.
          </p>
          <button
            onClick={() => router.push("/purchase-orders")}
            className="mt-4 bg-white text-yellow-700 py-2 px-4 rounded-md hover:bg-gray-100"
          >
            Back to Purchase Orders
          </button>
        </div>
      </div>
    );
  }

  // Calculate total from items
  const calculateTotal = () => {
    if (!purchaseOrder.items || purchaseOrder.items.length === 0) {
      return 0;
    }
    return purchaseOrder.items.reduce((sum, item) => {
      const price = item.price || 0;
      return sum + price * item.quantityOrdered;
    }, 0);
  };

  const total = calculateTotal();

  return (
    <div className="p-6">
      {/* Header */}
      <div className="flex justify-between items-center mb-6">
        <div className="flex flex-wrap items-center gap-x-8 gap-y-2">
          <div className="flex items-center">
            <span className="text-[#3997E0] text-xl">Purchase Order ID</span>
            <span className="text-gray-500 text-xl ml-2">
              #{purchaseOrder.orderNumber}
            </span>
          </div>
          <div className="flex items-center">
            <span className="text-[#3997E0] text-xl">Order Date</span>
            <span className="text-gray-500 text-xl ml-2">
              {formatDateTime(purchaseOrder.createdAt)}
            </span>
          </div>
        </div>
      </div>

      {/* Order Information Card */}
      <div className="bg-white p-4 rounded-lg shadow border border-blue-300 mb-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {/* Supplier */}
          <div>
            <h2 className="text-sm font-semibold mb-2 text-gray-700">
              Supplier
            </h2>
            <p className="text-sm text-gray-600">
              {purchaseOrder.supplier?.name || "No supplier assigned"}
            </p>
          </div>

          {/* Warehouse */}
          <div>
            <h2 className="text-sm font-semibold mb-2 text-gray-700">
              Warehouse
            </h2>
            <p className="text-sm text-gray-600">
              {purchaseOrder.warehouse?.name || "No warehouse assigned"}
            </p>
          </div>

          {/* Order Date */}
          <div>
            <h2 className="text-sm font-semibold mb-2 text-gray-700">
              Order Date
            </h2>
            <p className="text-sm text-gray-600">
              {formatDate(purchaseOrder.orderDate || purchaseOrder.createdAt)}
            </p>
          </div>

          {/* Created By */}
          <div>
            <h2 className="text-sm font-semibold mb-2 text-gray-700">
              Created By
            </h2>
            <p className="text-sm text-gray-600">
              {purchaseOrder.actor?.firstname && purchaseOrder.actor?.lastname
                ? `${purchaseOrder.actor.firstname} ${purchaseOrder.actor.lastname}`
                : "Unknown User"}
            </p>
          </div>
        </div>
      </div>

      {/* Second Row - Products and Order Status */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Column - Products and Attachments */}
        <div className="lg:col-span-2">
          {/* Discrepancies Panels — hidden when there are none */}
          <div className="mb-6 space-y-6">
            <PurchaseOrderDiscrepanciesPanel
              purchaseOrderId={Number(orderId)}
              shipmentLinkPath={(id) => `/warehouses/shipments/${id}`}
            />
            <PurchaseOrderItemDiscrepanciesPanel
              purchaseOrderId={Number(orderId)}
              shipmentLinkPath={(id) => `/warehouses/shipments/${id}`}
            />
          </div>

          {/* Products Section */}
          <div className="bg-sky-50 rounded-lg shadow mb-6">
            <div className="p-4">
              <h2 className="text-lg font-semibold text-black mb-4">
                Products ({purchaseOrder.items?.length || 0})
              </h2>
              {!purchaseOrder.items || purchaseOrder.items.length === 0 ? (
                <div className="bg-white rounded-lg shadow-sm p-8 text-center">
                  <p className="text-gray-500 mb-4">
                    No products in this order
                  </p>
                </div>
              ) : (
                purchaseOrder.items.map((item) => (
                  <div
                    key={item.id}
                    className="bg-white rounded-lg shadow-sm mb-3 last:mb-0"
                  >
                    {/* Desktop Layout */}
                    <div className="hidden sm:block">
                      <div
                        className="flex items-center cursor-pointer p-4 rounded"
                        onClick={() => toggleItemExpansion(item.id)}
                      >
                        <div className="flex-grow">
                          <h3 className="font-semibold text-gray-800">
                            {item.product.name}
                          </h3>
                        </div>
                        <div className="flex items-center space-x-4 ml-4">
                          <span className="text-sm font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded-md">
                            x {item.quantityOrdered}
                          </span>
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              handlePrintSingleBarcode(item);
                            }}
                            className="bg-white text-gray-700 py-1 px-3 rounded-xl border border-gray-500 hover:bg-gray-50 flex items-center gap-1 text-sm whitespace-nowrap"
                          >
                            <FiPrinter size={14} />
                            Print Barcode
                          </button>
                          <button
                            onClick={(e) => {
                              e.stopPropagation();
                              handleViewSingleBarcode(item);
                            }}
                            className="bg-[#20C997] text-white py-1 px-3 rounded-xl hover:bg-[#20C997]/80 flex items-center gap-1 text-sm whitespace-nowrap"
                          >
                            <MdQrCodeScanner size={14} />
                            View Barcodes
                          </button>
                          {quantityStatuses &&
                            quantityStatuses.items &&
                            quantityStatuses.items.find(
                              (statusItem: any) => statusItem.id === item.id
                            ) && (
                              <div className="ml-2">
                                {expandedItems.has(item.id) ? (
                                  <MdExpandLess
                                    className="text-gray-500 transition-transform duration-300 ease-in-out"
                                    size={20}
                                  />
                                ) : (
                                  <MdExpandMore
                                    className="text-gray-500 transition-transform duration-300 ease-in-out"
                                    size={20}
                                  />
                                )}
                              </div>
                            )}
                        </div>
                      </div>
                    </div>

                    {/* Quantity Statuses for Desktop */}
                    {quantityStatuses &&
                      quantityStatuses.items &&
                      quantityStatuses.items.find(
                        (statusItem: any) => statusItem.id === item.id
                      ) && (
                        <div
                          className={`hidden sm:block px-4 overflow-hidden transition-all duration-300 ease-in-out ${
                            expandedItems.has(item.id)
                              ? "max-h-[2000px] opacity-100 pb-4"
                              : "max-h-0 opacity-0"
                          }`}
                        >
                          {(() => {
                            const itemStatus = quantityStatuses.items.find(
                              (statusItem: any) => statusItem.id === item.id
                            );
                            return itemStatus ? (
                              <ProductQuantityStatuses
                                quantityStatuses={itemStatus.quantityStatuses}
                                role="admin"
                              />
                            ) : null;
                          })()}
                        </div>
                      )}

                    {/* Mobile Layout */}
                    <div className="sm:hidden">
                      <div
                        className="flex items-start space-x-3 mb-3 cursor-pointer p-4 rounded"
                        onClick={() => toggleItemExpansion(item.id)}
                      >
                        <div className="flex-grow min-w-0">
                          <h3 className="font-semibold text-gray-800 text-sm">
                            {item.product.name}
                          </h3>
                          <span className="text-sm font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded-md mt-2 inline-block">
                            x {item.quantityOrdered}
                          </span>
                        </div>
                        {quantityStatuses &&
                          quantityStatuses.items &&
                          quantityStatuses.items.find(
                            (statusItem: any) => statusItem.id === item.id
                          ) && (
                            <div className="mt-1">
                              {expandedItems.has(item.id) ? (
                                <MdExpandLess
                                  className="text-gray-500 transition-transform duration-300 ease-in-out"
                                  size={20}
                                />
                              ) : (
                                <MdExpandMore
                                  className="text-gray-500 transition-transform duration-300 ease-in-out"
                                  size={20}
                                />
                              )}
                            </div>
                          )}
                      </div>

                      <div className="flex flex-col space-y-2 px-4">
                        <button
                          onClick={() => handlePrintSingleBarcode(item)}
                          className="bg-white text-gray-700 py-2 px-3 rounded-lg border border-gray-500 hover:bg-gray-50 flex items-center justify-center gap-2 text-sm touch-manipulation"
                        >
                          <FiPrinter size={16} />
                          Print Barcode
                        </button>
                        <button
                          onClick={() => handleViewSingleBarcode(item)}
                          className="bg-[#20C997] text-white py-2 px-3 rounded-lg hover:bg-[#20C997]/80 flex items-center justify-center gap-2 text-sm touch-manipulation"
                        >
                          <MdQrCodeScanner size={16} />
                          View Barcodes
                        </button>
                      </div>

                      {/* Quantity Statuses for Mobile */}
                      {quantityStatuses &&
                        quantityStatuses.items &&
                        quantityStatuses.items.find(
                          (statusItem: any) => statusItem.id === item.id
                        ) && (
                          <div
                            className={`sm:hidden mt-3 px-4 overflow-hidden transition-all duration-300 ease-in-out ${
                              expandedItems.has(item.id)
                                ? "max-h-[2000px] opacity-100 pb-4"
                                : "max-h-0 opacity-0"
                            }`}
                          >
                            {(() => {
                              const itemStatus = quantityStatuses.items.find(
                                (statusItem: any) => statusItem.id === item.id
                              );
                              return itemStatus ? (
                                <ProductQuantityStatuses
                                  quantityStatuses={itemStatus.quantityStatuses}
                                  role="admin"
                                />
                              ) : null;
                            })()}
                          </div>
                        )}
                    </div>
                  </div>
                ))
              )}

              {/* Action Buttons */}
              <div className="mt-4">
                {/* Desktop Layout */}
                <div className="hidden sm:flex gap-3 justify-center">
                  <button
                    onClick={handlePrintAllBarcodes}
                    className="bg-white text-gray-700 py-2 px-4 rounded-xl border border-gray-500 hover:bg-gray-50 flex items-center gap-2 whitespace-nowrap"
                  >
                    <FiPrinter size={16} />
                    Print All Barcodes At Once
                  </button>
                  <button
                    onClick={handleViewAllBarcodes}
                    className="bg-[#20C997] text-white py-2 px-4 rounded-xl hover:bg-[#20C997]/80 flex items-center gap-2 whitespace-nowrap"
                  >
                    <MdQrCodeScanner size={16} />
                    View All Barcodes At Once
                  </button>
                </div>

                {/* Mobile Layout */}
                <div className="sm:hidden flex flex-col gap-3">
                  <button
                    onClick={handlePrintAllBarcodes}
                    className="bg-white text-gray-700 py-3 px-4 rounded-lg border border-gray-500 hover:bg-gray-50 flex items-center justify-center gap-2 text-sm touch-manipulation"
                  >
                    <FiPrinter size={18} />
                    Print All Barcodes
                  </button>
                  <button
                    onClick={handleViewAllBarcodes}
                    className="bg-[#20C997] text-white py-3 px-4 rounded-lg hover:bg-[#20C997]/80 flex items-center justify-center gap-2 text-sm touch-manipulation"
                  >
                    <MdQrCodeScanner size={18} />
                    View All Barcodes
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* Attachments Section */}
          {purchaseOrder.documents && purchaseOrder.documents.length > 0 && (
            <div className="bg-violet-50 rounded-lg shadow mb-6">
              <div className="p-4">
                <h2 className="text-lg font-semibold text-black mb-4">
                  Attachments ({purchaseOrder.documents?.length || 0})
                </h2>
                {purchaseOrder.documents.map((doc) => {
                  const isImage = /\.(jpe?g|png|gif|webp)$/i.test(
                    doc.filename.toLowerCase()
                  );
                  const imageUrl = isImage ? doc.url : null;

                  return (
                    <div
                      key={doc.id}
                      className="bg-white rounded-lg shadow-sm p-4 mb-3 last:mb-0 cursor-pointer hover:bg-gray-50 transition-colors"
                      onClick={() => handleViewDocument(doc)}
                    >
                      {/* Desktop Layout */}
                      <div className="hidden sm:flex items-center">
                        <div className="flex items-center">
                          {isImage && imageUrl ? (
                            <img
                              src={imageUrl}
                              alt={doc.filename}
                              className="w-12 h-12 object-cover rounded-md mr-4 flex-shrink-0"
                            />
                          ) : (
                            getDocumentFileIcon(doc.filename)
                          )}
                          <div>
                            <h3 className="font-semibold text-sm text-gray-800">
                              {doc.filename}
                            </h3>
                            <p className="text-xs text-gray-500">
                              {formatDateTime(doc.createdAt)}
                            </p>
                          </div>
                        </div>
                      </div>

                      {/* Mobile Layout */}
                      <div className="sm:hidden">
                        <div className="flex items-start space-x-3">
                          {isImage && imageUrl ? (
                            <img
                              src={imageUrl}
                              alt={doc.filename}
                              className="w-10 h-10 object-cover rounded-md flex-shrink-0"
                            />
                          ) : (
                            <div className="flex-shrink-0">
                              {getDocumentFileIcon(doc.filename)}
                            </div>
                          )}
                          <div className="flex-grow min-w-0">
                            <h3 className="font-semibold text-sm text-gray-800 truncate">
                              {doc.filename}
                            </h3>
                            <p className="text-xs text-gray-500 mt-1">
                              {formatDateTime(doc.createdAt)}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Description Section */}
          <div className="bg-white rounded-lg shadow mb-6">
            <div className="p-4">
              <h2 className="text-lg font-semibold text-gray-800 mb-3">
                Description
              </h2>
              <div className="w-full p-3 border border-gray-200 text-gray-700 rounded-md min-h-[120px] bg-gray-50">
                {purchaseOrder.description || "No description provided"}
              </div>
            </div>
          </div>
        </div>

        {/* Right Column - Order Status */}
        <div className="lg:col-span-1">
          <div
            className="hidden lg:block h-[calc(100vh-271px)] overflow-y-auto scrollbar-hide bg-white rounded-lg"
            style={{
              boxShadow:
                "0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
            }}
          >
            <OrderStatusCard
              purchaseOrderId={purchaseOrder.id}
              orderNumber={purchaseOrder.orderNumber}
              role="admin"
            />
          </div>
          <div
            className="lg:hidden bg-white rounded-lg"
            style={{
              boxShadow:
                "0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
            }}
          >
            <OrderStatusCard
              purchaseOrderId={purchaseOrder.id}
              orderNumber={purchaseOrder.orderNumber}
              role="admin"
            />
          </div>
        </div>
      </div>

      {/* File Viewer Modal */}
      {showFileViewer && documentToView && (
        <FileViewerModal
          isOpen={showFileViewer}
          onClose={handleCloseFileViewer}
          file={{
            name: documentToView.filename,
            type: undefined,
            webViewLink:
              documentToView.url ||
              `https://drive.google.com/file/d/${documentToView.driveFileId}/view`,
            webContentLink: `https://drive.google.com/uc?id=${documentToView.driveFileId}&export=download`,
            driveFileId: documentToView.driveFileId,
          }}
        />
      )}

      {/* Barcode Viewer Modal */}
      {showBarcodeViewer && (
        <BarcodeViewerModal
          isOpen={showBarcodeViewer}
          onClose={handleCloseBarcodeViewer}
          orderId={purchaseOrder?.orderNumber || orderId}
          barcodes={barcodesToView}
          title={barcodeTitle}
        />
      )}

      {/* Custom CSS for hiding scrollbar */}
      <style jsx>{`
        .scrollbar-hide {
          -ms-overflow-style: none; /* IE and Edge */
          scrollbar-width: none; /* Firefox */
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none; /* Chrome, Safari and Opera */
        }
      `}</style>
    </div>
  );
}