"use client";

import React, { useState, useEffect } from "react";
import { FiCalendar, FiFolder } from "react-icons/fi";
import FileUpload from "@/components/ui/FileUpload";
import { useFileUpload } from "@/hooks/useFileUpload";
import ProductSelectionCard from "./ProductSelectionCard";
import DateFilterPopover from "./DateFilterPopover";
import {
  getGoogleDriveConfig,
  validateGoogleDriveConfig,
} from "@/config/googleDrive";
import {
  Product,
  PurchaseOrderItemData,
  CreatePurchaseOrderData,
  UpdatePurchaseOrderData,
  PurchaseOrder,
  Supplier,
  Warehouse,
} from "../../../../types/purchase-order";
import { purchaseOrderService } from "../../../../services/api";
import { useRouter } from "next/navigation";
import toast from "react-hot-toast";
import { formatDate } from "../../../../utils/dateUtils";
import { showToast } from "../../../../utils/toast";
import { useAuth } from "@/contexts/AuthContext";

interface PurchaseOrderEditorProps {
  mode: "create" | "edit";
  orderId?: number;
  title: string;
  actionButtonText: string;
  onSuccess?: (orderId: number) => void;
}

export default function PurchaseOrderEditor({
  mode,
  orderId,
  title,
  actionButtonText,
  onSuccess,
}: PurchaseOrderEditorProps) {
  const router = useRouter();

  const [products, setProducts] = useState<Product[]>([]);
  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
  const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
  const [selectedItems, setSelectedItems] = useState<PurchaseOrderItemData[]>(
    []
  );
  const [purchaseOrder, setPurchaseOrder] = useState<PurchaseOrder | null>(
    null
  );
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [orderDate, setOrderDate] = useState<string | null>(null);
  const [selectedSupplierId, setSelectedSupplierId] = useState<number | null>(
    null
  );
  const [selectedWarehouseId, setSelectedWarehouseId] = useState<number | null>(
    null
  );
  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [description, setDescription] = useState<string>("");

  // File upload configuration and hook
  const googleDriveConfig = getGoogleDriveConfig();
  const isConfigValid = validateGoogleDriveConfig(googleDriveConfig);
  const { user } = useAuth();
  const userId = user?.id || 0;

  const {
    uploadedFiles,
    uploadProgress,
    isUploading,
    handleFileSelect,
    removeFile,
    cancelUpload,
    setUploadedFilesFromDocuments,
  } = useFileUpload({
    config: googleDriveConfig,
    userId,
    purchaseOrderId: orderId, // Pass purchase order ID for database deletion
    // Remove immediate database save - we'll save when purchase order is created/updated
    onSaveToDatabase: undefined,
    // Add delete callback for database deletion
    onDeleteFromDatabase: async (driveFileId: string) => {
      if (orderId) {
        try {
          await purchaseOrderService.deleteDocumentByDriveFileId(
            orderId,
            driveFileId
          );
          // Remove from existing document IDs set since it's no longer in the database
          setExistingDocumentIds((prev) => {
            const newSet = new Set(prev);
            newSet.delete(driveFileId);
            return newSet;
          });
        } catch (error) {
          throw error; // Re-throw to trigger error handling in the hook
        }
      }
    },
  });

  // Track existing document IDs to prevent duplication
  const [existingDocumentIds, setExistingDocumentIds] = useState<Set<string>>(
    new Set()
  );

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);

        if (mode === "create") {
          // Fetch products, suppliers, and warehouses for create mode
          const [productsRes, suppliersRes, warehousesRes] = await Promise.all([
            purchaseOrderService.getAllProducts(),
            purchaseOrderService.getAllSuppliers(),
            purchaseOrderService.getAllWarehouses(),
          ]);

          setProducts(productsRes.data);
          setSuppliers(suppliersRes.data);
          setWarehouses(warehousesRes.data);

          // Auto-select first supplier and warehouse
          if (suppliersRes.data.length > 0) {
            setSelectedSupplierId(suppliersRes.data[0].id);
          }
          if (warehousesRes.data.length > 0) {
            setSelectedWarehouseId(warehousesRes.data[0].id);
          }

          // Set default order date to today
          const today = new Date().toISOString().split("T")[0];
          setOrderDate(today);
        } else {
          // Fetch all data for edit mode
          if (!orderId) throw new Error("Order ID is required for edit mode");

          const [productsRes, suppliersRes, warehousesRes, purchaseOrderRes] =
            await Promise.all([
              purchaseOrderService.getAllProducts(),
              purchaseOrderService.getAllSuppliers(),
              purchaseOrderService.getAllWarehouses(),
              purchaseOrderService.getPurchaseOrder(orderId),
            ]);

          setProducts(productsRes.data);
          setSuppliers(suppliersRes.data);
          setWarehouses(warehousesRes.data);
          setPurchaseOrder(purchaseOrderRes.data);

          // Set the selected items from the existing purchase order
          const orderItems = purchaseOrderRes.data.items.map((item: any) => ({
            productId: item.productId,
            quantityOrdered: item.quantityOrdered,
          }));
          setSelectedItems(orderItems);

          // Set supplier, warehouse, and order date from existing purchase order
          setSelectedSupplierId(purchaseOrderRes.data.supplierId);
          setSelectedWarehouseId(purchaseOrderRes.data.warehouseId);

          // Set the order date if available
          if (purchaseOrderRes.data.orderDate) {
            // Handle the date properly to avoid timezone issues
            const orderDateString = purchaseOrderRes.data.orderDate;
            if (orderDateString.includes("T")) {
              // If it includes time, extract just the date part
              setOrderDate(orderDateString.split("T")[0]);
            } else {
              // If it's already in YYYY-MM-DD format, use it directly
              setOrderDate(orderDateString);
            }
          }

          // Set the description if available
          if (purchaseOrderRes.data.description) {
            setDescription(purchaseOrderRes.data.description);
          }

          // Load existing documents for edit mode
          try {
            const documentsRes =
              await purchaseOrderService.getPurchaseOrderDocuments(orderId);
            if (documentsRes.data && documentsRes.data.length > 0) {
              setUploadedFilesFromDocuments(documentsRes.data);
              // Track existing document drive file IDs
              const existingIds = new Set<string>(
                documentsRes.data.map((doc: any) => doc.driveFileId as string)
              );
              setExistingDocumentIds(existingIds);
            }
          } catch (error) {
            // Don't fail the entire load if documents can't be loaded
          }
        }

        setError(null);
      } catch (err) {
        setError(
          mode === "create"
            ? "Failed to load data. Please try again."
            : "Failed to load purchase order data. Please try again."
        );
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [mode, orderId]);

  const handleIncreaseQuantity = (productId: number) => {
    setSelectedItems((prevItems) => {
      const existingItem = prevItems.find(
        (item) => item.productId === productId
      );
      if (existingItem) {
        // If item already exists, increase its quantity
        return prevItems.map((item) =>
          item.productId === productId
            ? { ...item, quantityOrdered: item.quantityOrdered + 1 }
            : item
        );
      } else {
        // If item doesn't exist, add it with quantity 1
        return [...prevItems, { productId: productId, quantityOrdered: 1 }];
      }
    });
  };

  const handleDecreaseQuantity = (productId: number) => {
    setSelectedItems((prevItems) => {
      const existingItem = prevItems.find(
        (item) => item.productId === productId
      );
      if (!existingItem) {
        // If item doesn't exist, do nothing
        return prevItems;
      }

      if (existingItem.quantityOrdered <= 1) {
        // If quantity is 1 or less, remove the item
        return prevItems.filter((item) => item.productId !== productId);
      } else {
        // If quantity is greater than 1, decrease it
        return prevItems.map((item) =>
          item.productId === productId
            ? { ...item, quantityOrdered: item.quantityOrdered - 1 }
            : item
        );
      }
    });
  };

  const handleQuantityChange = (productId: number, newQuantity: number) => {
    if (newQuantity <= 0) {
      // Remove item if quantity is 0 or negative
      setSelectedItems((prevItems) =>
        prevItems.filter((item) => item.productId !== productId)
      );
    } else {
      // Update quantity or add item if it doesn't exist
      setSelectedItems((prevItems) => {
        const existingItem = prevItems.find(
          (item) => item.productId === productId
        );
        if (existingItem) {
          // Update existing item
          return prevItems.map((item) =>
            item.productId === productId
              ? { ...item, quantityOrdered: newQuantity }
              : item
          );
        } else {
          // Add new item
          return [
            ...prevItems,
            { productId: productId, quantityOrdered: newQuantity },
          ];
        }
      });
    }
  };

  const handleQuantityInputChange = (productId: number, value: string) => {
    // Only update if the value is a valid number (including 0)
    if (value !== "" && !isNaN(parseInt(value)) && parseInt(value) >= 0) {
      const newQuantity = parseInt(value);
      if (newQuantity > 0) {
        // Update quantity for positive numbers
        handleQuantityChange(productId, newQuantity);
      }
      // For 0, don't update yet - let blur handle it
    }
    // If empty or invalid, don't update - let the input stay as is
  };

  const handleQuantityInputBlur = (productId: number, value: string) => {
    // On blur, handle different cases
    if (value === "" || isNaN(parseInt(value))) {
      // Empty or invalid input - set to 1
      setSelectedItems((prevItems) =>
        prevItems.map((item) =>
          item.productId === productId ? { ...item, quantityOrdered: 1 } : item
        )
      );
    } else if (parseInt(value) === 0) {
      // Zero quantity - remove the item
      setSelectedItems((prevItems) =>
        prevItems.filter((item) => item.productId !== productId)
      );
    }
    // For positive numbers, the quantity is already updated by handleQuantityInputChange
  };

  const handleOrderDateChange = (date: string | null) => {
    setOrderDate(date);
    setIsDatePickerOpen(false);
  };

  const formatDateForDisplay = (dateString: string | null) => {
    if (!dateString) return "Select Order Date *";
    return formatDate(dateString);
  };

  const handleSubmit = async () => {
    try {
      setIsSubmitting(true);

      if (selectedItems.length === 0) {
        setIsSubmitting(false);
        return; // Extra safety check
      }

      // Validate order date is selected
      if (!orderDate) {
        setError("Please select an order date");
        setIsSubmitting(false);
        return;
      }

      // Validate supplier is selected
      if (!selectedSupplierId) {
        setError("Please select a supplier");
        setIsSubmitting(false);
        return;
      }

      // Validate warehouse is selected
      if (!selectedWarehouseId) {
        setError("Please select a warehouse");
        setIsSubmitting(false);
        return;
      }

      if (mode === "create") {
        // Create new purchase order
        const orderData: CreatePurchaseOrderData = {
          supplierId: selectedSupplierId,
          warehouseId: selectedWarehouseId,
          orderDate: orderDate,
          description: description.trim() || undefined,
          items: selectedItems.map((item) => ({
            productId: item.productId,
            quantityOrdered: item.quantityOrdered,
          })),
        };

        const response = await purchaseOrderService.createPurchaseOrder(
          orderData
        );
        const savedOrder = response.data;

        // Save uploaded files to purchase order documents
        if (uploadedFiles.length > 0) {
          try {
            const documents = uploadedFiles.map((file) => ({
              filename: file.name,
              drive_file_id: file.driveFileId,
            }));
            await purchaseOrderService.savePurchaseOrderDocuments(
              savedOrder.id,
              documents
            );
          } catch (error) {
            // Continue with navigation even if document saving fails
          }
        }

        if (onSuccess) {
          onSuccess(savedOrder.id);
        } else {
          router.push(`/purchase-orders/${savedOrder.id}/review`);
        }
      } else {
        // Update existing purchase order
        if (!orderId) throw new Error("Order ID is required for edit mode");

        const updateData: UpdatePurchaseOrderData = {
          supplierId: selectedSupplierId,
          warehouseId: selectedWarehouseId,
          orderDate: orderDate,
          description: description.trim() || undefined,
          items: selectedItems.map((item) => ({
            productId: item.productId,
            quantityOrdered: item.quantityOrdered,
          })),
        };

        await purchaseOrderService.updatePurchaseOrder(orderId, updateData);

        // Save uploaded files to purchase order documents
        if (uploadedFiles.length > 0) {
          try {
            // Filter out existing documents to only save new ones
            const newDocuments = uploadedFiles
              .filter((file) => !existingDocumentIds.has(file.driveFileId))
              .map((file) => ({
                filename: file.name,
                drive_file_id: file.driveFileId,
              }));

            if (newDocuments.length > 0) {
              await purchaseOrderService.savePurchaseOrderDocuments(
                orderId,
                newDocuments
              );
            }
          } catch (error) {
            // Continue with navigation even if document saving fails
          }
        }

        if (onSuccess) {
          onSuccess(orderId);
        } else {
          // Navigate to review page for edit mode too
          router.push(`/purchase-orders/${orderId}/review`);
        }
      }
    } catch (error) {
      setError(`Failed to ${mode} purchase order. Please try again.`);
    } finally {
      setIsSubmitting(false);
    }
  };

  // Loading state
  if (loading) {
    return (
      <div className="flex justify-center items-center h-40">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mr-3"></div>
        <span>
          {mode === "create"
            ? "Loading products..."
            : "Loading purchase order data..."}
        </span>
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <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>
    );
  }

  // Edit mode: Check if purchase order exists
  if (mode === "edit" && !purchaseOrder) {
    return (
      <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>
    );
  }

  return (
    <div className="purchase-order-editor">
      {/* 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">
                {mode === "edit" && purchaseOrder
                  ? `Edit Purchase Order #${purchaseOrder.orderNumber}`
                  : title}
              </h1>
            </div>
            {(mode === "create" || mode === "edit") && (
              <button
                onClick={handleSubmit}
                disabled={
                  isSubmitting ||
                  selectedItems.length === 0 ||
                  !orderDate ||
                  !selectedSupplierId ||
                  !selectedWarehouseId
                }
                className={`bg-[#3997E0] text-white py-2 px-4 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center sm:justify-start w-full sm:w-auto ${
                  isSubmitting ||
                  selectedItems.length === 0 ||
                  !orderDate ||
                  !selectedSupplierId ||
                  !selectedWarehouseId
                    ? "opacity-50 cursor-not-allowed"
                    : "hover:bg-blue-700"
                }`}
              >
                {actionButtonText}
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="m-4 md:m-6">
        {/* Desktop Layout */}
        <div className="hidden lg:grid lg:grid-cols-5 gap-6 flex-grow min-h-0">
          {/* Column 1: Products List */}
          <div className="lg:col-span-2 flex flex-col h-[calc(100vh-190px)]">
            <ProductSelectionCard
              products={products}
              onIncreaseQuantity={handleIncreaseQuantity}
              onDecreaseQuantity={handleDecreaseQuantity}
              onQuantityChange={handleQuantityChange}
              onQuantityInputChange={handleQuantityInputChange}
              onQuantityInputBlur={handleQuantityInputBlur}
              selectedItems={selectedItems}
            />
          </div>

          {/* Column 2: Order Details */}
          <div className="lg:col-span-2 bg-blue-50 p-4 rounded-lg shadow border border-blue-300 flex flex-col h-[calc(100vh-190px)]">
            <div className="flex-shrink-0">
              {/* Order Information Row */}
              <div className="space-y-4 mb-6">
                {/* First Row: Supplier and Warehouse */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {/* Supplier */}
                  <div>
                    <h2 className="text-sm font-semibold mb-2 text-gray-700">
                      Supplier <span className="text-red-500">*</span>
                    </h2>
                    <select
                      value={selectedSupplierId || ""}
                      onChange={(e) =>
                        setSelectedSupplierId(Number(e.target.value))
                      }
                      className="w-full bg-white p-2 rounded-md text-sm text-black"
                      required
                    >
                      <option value="">Select Supplier</option>
                      {suppliers.map((supplier) => (
                        <option key={supplier.id} value={supplier.id}>
                          {supplier.name}
                        </option>
                      ))}
                    </select>
                  </div>

                  {/* Warehouse */}
                  <div>
                    <h2 className="text-sm font-semibold mb-2 text-gray-700">
                      Warehouse <span className="text-red-500">*</span>
                    </h2>
                    <select
                      value={selectedWarehouseId || ""}
                      onChange={(e) =>
                        setSelectedWarehouseId(Number(e.target.value))
                      }
                      className="w-full bg-white p-2 rounded-md text-sm text-black"
                      required
                    >
                      <option value="">Select Warehouse</option>
                      {warehouses.map((warehouse) => (
                        <option key={warehouse.id} value={warehouse.id}>
                          {warehouse.name} - {warehouse.location}
                        </option>
                      ))}
                    </select>
                  </div>
                </div>

                {/* Second Row: Order Date */}
                <div>
                  <h2 className="text-sm font-semibold mb-2 text-gray-700">
                    Order Date <span className="text-red-500">*</span>
                  </h2>
                  <div
                    className="relative bg-white p-2 rounded-md flex items-center cursor-pointer hover:border-blue-500"
                    onClick={() => setIsDatePickerOpen(true)}
                  >
                    <FiCalendar className="h-4 w-4 text-gray-500 mr-2" />
                    <span className="text-sm text-gray-600">
                      {formatDateForDisplay(orderDate)}
                    </span>
                  </div>
                </div>
              </div>

              <h2 className="text-base font-semibold mb-3 text-gray-700">
                Selected Products for Purchase
              </h2>
            </div>
            <div className="space-y-2 overflow-y-auto pr-1 flex-grow no-scrollbar">
              {selectedItems.length === 0 ? (
                <div className="text-center py-8">
                  <p className="text-gray-500 mb-2">No products added yet.</p>
                  <p className="text-xs text-gray-400">
                    Select products from the left panel to enable the Proceed
                    button.
                  </p>
                </div>
              ) : (
                selectedItems.map((item) => {
                  const product = products.find((p) => p.id === item.productId);
                  return (
                    <div
                      key={item.productId}
                      className="p-3 bg-white rounded-lg shadow-sm"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex-grow min-w-0">
                          <h3 className="font-semibold text-sm text-gray-700 break-words">
                            {product?.name || "Product not found"}
                          </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>

          {/* Column 3: File Upload + Description */}
          <div className="lg:col-span-1 flex flex-col h-[calc(100vh-190px)] gap-4">
            {/* Upload Files Card */}
            <div className="bg-gray-50 p-4 rounded-lg shadow flex flex-col h-[60%]">
              <div className="flex-shrink-0 mb-0">
                <h3 className="text-sm font-semibold mb-2 text-gray-700">
                  Upload Files{" "}
                  <span className="text-gray-400 font-normal">(optional)</span>
                </h3>
                {!isConfigValid && (
                  <div className="mb-3 p-2 bg-yellow-100 border border-yellow-400 rounded text-xs text-yellow-700">
                    Google Drive configuration is incomplete. Please check your
                    settings.
                  </div>
                )}
              </div>
              <div className="flex-grow min-h-0 overflow-hidden">
                <FileUpload
                  onFileSelect={handleFileSelect}
                  uploadedFiles={uploadedFiles}
                  uploadProgress={uploadProgress}
                  isUploading={isUploading}
                  onRemoveFile={removeFile}
                  onCancelUpload={cancelUpload}
                  accept="*/*"
                  multiple={true}
                  maxSize={100000000} // 100MB
                  className="h-full flex flex-col"
                />
              </div>
            </div>

            {/* Description Card - Smaller size */}
            <div className="bg-white p-3 rounded-lg shadow border h-[40%] flex flex-col">
              <h3 className="text-sm font-semibold mb-2 text-gray-700">
                Description{" "}
                <span className="text-gray-400 font-normal">(optional)</span>
              </h3>
              <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Add any additional notes or description for this purchase order..."
                className="w-full p-2 border border-gray-300 rounded-md text-sm text-gray-700 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent flex-grow"
                rows={3}
              />
            </div>
          </div>
        </div>

        {/* Mobile Layout - Following desktop patterns */}
        <div className="lg:hidden space-y-6">
          {/* Mobile: Products List - Auto height based on content */}
          <div className="flex flex-col">
            <ProductSelectionCard
              products={products}
              onIncreaseQuantity={handleIncreaseQuantity}
              onDecreaseQuantity={handleDecreaseQuantity}
              onQuantityChange={handleQuantityChange}
              onQuantityInputChange={handleQuantityInputChange}
              onQuantityInputBlur={handleQuantityInputBlur}
              selectedItems={selectedItems}
            />
          </div>

          {/* Mobile: Order Details - Auto height based on content */}
          <div className="bg-blue-50 p-4 rounded-lg shadow border border-blue-300">
            <div>
              <h2 className="text-base font-semibold mb-3 text-gray-700">
                Supplier <span className="text-red-500">*</span>
              </h2>
              <select
                value={selectedSupplierId || ""}
                onChange={(e) => setSelectedSupplierId(Number(e.target.value))}
                className="w-full mb-4 bg-white p-3 rounded-md text-sm text-black touch-manipulation"
                required
              >
                <option value="">Select Supplier</option>
                {suppliers.map((supplier) => (
                  <option key={supplier.id} value={supplier.id}>
                    {supplier.name}
                  </option>
                ))}
              </select>

              <h2 className="text-base font-semibold mb-3 text-gray-700">
                Warehouse <span className="text-red-500">*</span>
              </h2>
              <select
                value={selectedWarehouseId || ""}
                onChange={(e) => setSelectedWarehouseId(Number(e.target.value))}
                className="w-full mb-4 bg-white p-3 rounded-md text-sm text-black touch-manipulation"
                required
              >
                <option value="">Select Warehouse</option>
                {warehouses.map((warehouse) => (
                  <option key={warehouse.id} value={warehouse.id}>
                    {warehouse.name} - {warehouse.location}
                  </option>
                ))}
              </select>

              <h2 className="text-base font-semibold mb-3 text-gray-700">
                Order Date <span className="text-red-500">*</span>
              </h2>
              <div
                className="relative mb-4 bg-white p-3 rounded-md flex items-center cursor-pointer hover:border-blue-500 touch-manipulation"
                onClick={() => setIsDatePickerOpen(true)}
              >
                <FiCalendar className="h-5 w-5 text-gray-500 mr-2" />
                <span className="text-sm text-gray-600">
                  {formatDateForDisplay(orderDate)}
                </span>
              </div>
              <h2 className="text-base font-semibold mb-3 text-gray-700">
                Selected Products for Purchase
              </h2>
            </div>
            <div className="space-y-2">
              {selectedItems.length === 0 ? (
                <div className="text-center py-8">
                  <p className="text-gray-500 mb-2">No products added yet.</p>
                  <p className="text-xs text-gray-400">
                    Select products from above to enable the Proceed button.
                  </p>
                </div>
              ) : (
                selectedItems.map((item) => {
                  const product = products.find((p) => p.id === item.productId);
                  return (
                    <div
                      key={item.productId}
                      className="p-3 bg-white rounded-lg shadow-sm"
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex-grow min-w-0">
                          <h3 className="font-semibold text-sm text-gray-700 break-words">
                            {product?.name || "Product not found"}
                          </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>

          {/* Mobile: File Upload - Auto height based on content */}
          <div className="bg-gray-50 p-4 rounded-lg shadow">
            <div>
              <h2 className="text-base font-semibold mb-3 text-gray-700">
                Upload Files (optional)
              </h2>
              {!isConfigValid && (
                <div className="mb-3 p-2 bg-yellow-100 border border-yellow-400 rounded text-xs text-yellow-700">
                  Google Drive configuration is incomplete. Please check your
                  settings.
                </div>
              )}
              <FileUpload
                onFileSelect={handleFileSelect}
                uploadedFiles={uploadedFiles}
                uploadProgress={uploadProgress}
                isUploading={isUploading}
                onRemoveFile={removeFile}
                onCancelUpload={cancelUpload}
                accept="*/*"
                multiple={true}
                maxSize={100000000} // 100MB
                className=""
              />
            </div>
          </div>

          {/* Mobile: Description Card - Separate from other sections */}
          <div className="bg-white p-4 rounded-lg shadow border">
            <h3 className="text-base font-semibold mb-3 text-gray-700">
              Description{" "}
              <span className="text-gray-400 font-normal">(optional)</span>
            </h3>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Add any additional notes or description for this purchase order..."
              className="w-full p-3 border border-gray-300 rounded-md text-sm text-gray-700 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent touch-manipulation"
              rows={4}
            />
          </div>
        </div>

        {/* Custom CSS to hide scrollbar */}
        <style jsx>{`
          .no-scrollbar::-webkit-scrollbar {
            display: none;
          }
          .no-scrollbar {
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
          }
        `}</style>

        {/* Date Picker */}
        {isDatePickerOpen && (
          <DateFilterPopover
            isOpen={isDatePickerOpen}
            onClose={() => setIsDatePickerOpen(false)}
            onApply={(startDate, _) => handleOrderDateChange(startDate)}
            initialStartDate={orderDate}
            initialEndDate={null}
            singleDateMode={true}
          />
        )}
      </div>
    </div>
  );
}