"use client";

import React, { useEffect, useState } from "react";
import { useRouter, useParams } from "next/navigation";
import toast from "react-hot-toast";
import { purchaseOrderService } from "@/services/api";
import { getDocumentFileIcon } from "@/utils/fileIcons";
import FileViewerModal from "@/components/ui/FileViewerModal";
import {
  PurchaseOrder,
  PurchaseOrderItem,
  PurchaseOrderStatus,
  PurchaseOrderDocument,
} from "@/types/purchase-order";
import { formatDate, formatDateTime } from "@/utils/dateUtils";
import { MdEdit, MdDescription } from "react-icons/md";
import ConfirmationModal from "@/components/ui/ConfirmationModal";

export default function ReviewPurchaseOrder() {
  const params = useParams();
  const router = useRouter();
  const [order, setOrder] = useState<PurchaseOrder | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [description, setDescription] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

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

  useEffect(() => {
    const fetchOrder = async () => {
      try {
        setLoading(true);
        const response = await purchaseOrderService.getPurchaseOrder(
          Number(params.id)
        );
        setOrder(response.data);
        setDescription(response.data.description || "");
        setError(null);
      } catch (error) {
        console.error("Failed to fetch order:", error);
        setError("Failed to load order details. Please try again.");
      } finally {
        setLoading(false);
      }
    };

    if (params.id) {
      fetchOrder();
    }
  }, [params.id]);

  const updatePurchaseOrder = async (status: PurchaseOrderStatus) => {
    if (!order) return;

    // Validate that all items have valid quantities
    const invalidItems = order.items.filter((item) => item.quantityOrdered < 1);
    if (invalidItems.length > 0) {
      setError("All products must have a quantity of at least 1.");
      toast.error("All products must have a quantity of at least 1.");
      return;
    }

    try {
      setIsSubmitting(true);
      setError(null); // Clear any previous errors

      // Prepare the update data
      const updateData = {
        status,
        description,
        items: order.items.map((item) => ({
          productId: item.productId,
          quantityOrdered: item.quantityOrdered,
        })),
      };

      await purchaseOrderService.updatePurchaseOrder(order.id, updateData);

      // Show success toast
      toast.success("Purchase order submitted successfully!");

      // Navigate to purchase order detail page
      router.push(`/purchase-orders/${order.id}`);
    } catch (error: any) {
      console.error("Failed to update order:", error);
      const errorMessage =
        error?.response?.data?.message ||
        error?.message ||
        "Failed to update order. Please try again.";
      setError(errorMessage);

      // Show error toast
      toast.error(`Failed to submit order. ${errorMessage}`);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleSubmitOrder = () => {
    updatePurchaseOrder(PurchaseOrderStatus.SUBMITTED);
  };

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

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

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

  if (error || !order) {
    return (
      <div className="p-6">
        <div className="bg-yellow-50 text-yellow-800 p-4 rounded-lg">
          {error || "No order data available for review."}
        </div>
      </div>
    );
  }

  return (
    <div className="review-purchase-order-page">
      {/* Sticky Header */}
      <div className="sticky top-0 z-30 bg-gradient-to-l from-white to-[#DFF9FF] shadow-sm border-b border-gray-200 backdrop-blur-sm">
        <div className="px-4 md:px-6 py-4">
          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
            <div>
              <h1 className="text-xl md:text-2xl font-bold text-gray-800">
                Review & Finalize Purchase Order
              </h1>
            </div>

            <div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
              <button
                className="bg-[#092C4C] text-white py-2 px-4 rounded-xl hover:bg-[#092C4C]/80 flex items-center justify-center gap-2 w-full sm:w-auto"
                onClick={() =>
                  router.push(`/purchase-orders/${params.id}/edit`)
                }
              >
                <MdEdit className="h-4 w-4" />
                Edit
              </button>
              <button
                className="bg-[#3997E0] text-white py-2 px-4 sm:px-8 rounded-xl shadow hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center w-full sm:w-auto"
                onClick={handleSubmitOrder}
                disabled={isSubmitting || order.items.length === 0}
                title={
                  order.items.length === 0
                    ? "Cannot submit order without products"
                    : ""
                }
              >
                {isSubmitting ? "Submitting..." : "Submit Order"}
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="m-4 md:m-6">
        {/* 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">
                {order.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">
                {order.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(order.orderDate || order.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">
                {order.actor?.firstname && order.actor?.lastname
                  ? `${order.actor.firstname} ${order.actor.lastname}`
                  : "Unknown User"}
              </p>
            </div>
          </div>
        </div>

        {/* Products List */}
        <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 ({order.items.length})
            </h2>
            {order.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>
                <button
                  onClick={() =>
                    router.push(`/purchase-orders/${params.id}/edit`)
                  }
                  className="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700"
                >
                  Add Products
                </button>
              </div>
            ) : (
              order.items.map((item) => (
                <div
                  key={item.id}
                  className="bg-white rounded-lg shadow-sm p-4 mb-3 last:mb-0"
                >
                  {/* Desktop Layout */}
                  <div className="hidden sm:flex items-center justify-between">
                    <div className="flex-grow">
                      <h3 className="font-semibold text-gray-800">
                        {item.product.name}
                      </h3>
                    </div>
                    <div className="ml-4 flex-shrink-0">
                      <span className="text-sm font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded-md">
                        x {item.quantityOrdered}
                      </span>
                    </div>
                  </div>

                  {/* Mobile Layout */}
                  <div className="sm:hidden">
                    <div className="flex items-center justify-between">
                      <div className="flex-grow min-w-0">
                        <h3 className="font-semibold text-gray-800 text-sm">
                          {item.product.name}
                        </h3>
                      </div>
                      <div className="ml-3 flex-shrink-0">
                        <span className="text-sm font-medium text-blue-600 bg-blue-50 px-2 py-1 rounded-md">
                          x {item.quantityOrdered}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>

        {/* Documents List */}
        {order.documents && order.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 ({order.documents?.length || 0})
              </h2>
              {order.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">
              {description || "No description provided"}
            </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,
            }}
          />
        )}

        {/* Error Display */}
        {error && (
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
            <p className="font-medium">Error</p>
            <p>{error}</p>
          </div>
        )}
      </div>
    </div>
  );
}