'use client';

import { useState, useEffect } from 'react';
import { X } from 'lucide-react';
import QuantityDisplay from './QuantityDisplay';
import axios from 'axios';
import { Item } from '@/lib/db';

interface QuantityAdjustmentModalProps {
  item: Item | null;
  isOpen: boolean;
  onClose: () => void;
}

export default function QuantityAdjustmentModal({
  item,
  isOpen,
  onClose,
}: QuantityAdjustmentModalProps) {
  const [successMessage, setSuccessMessage] = useState<string | null>(null);
  const [isClosing, setIsClosing] = useState(false);

  // Handle closing
  const handleClose = () => {
    setIsClosing(true);
    setTimeout(() => {
      onClose();
      setIsClosing(false);
      setSuccessMessage(null);
    }, 300);
  };

  // Handle quantity change via QuantityDisplay
  const handleQuantityChange = async (newQuantity: number) => {
    if (!item) return;

    try {
      const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8906';
      await axios.patch(`${backendUrl}/items/${item.id}`, {
        quantity: newQuantity,
      });

      setSuccessMessage(`Quantity updated to ${newQuantity}`);
      setTimeout(() => {
        setSuccessMessage(null);
        handleClose();
      }, 1500);
    } catch (error) {
      const errorMsg = error instanceof Error ? error.message : 'Failed to update quantity';
      console.error('Quantity update error:', errorMsg);
      throw error;
    }
  };

  if (!isOpen || !item) return null;

  return (
    <div className={`fixed inset-0 z-50 bg-surface-container-lowest/50 flex items-center justify-center transition-opacity ${isClosing ? 'opacity-0' : 'opacity-100'}`}>
      <div className={`bg-surface border border-border w-full max-w-md mx-4 transition-transform ${isClosing ? 'scale-95' : 'scale-100'}`}>
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-border">
          <h2 className="text-lg font-normal">Adjust Quantity</h2>
          <button
            onClick={handleClose}
            aria-label="Close quantity adjustment modal"
            className="p-2 hover:bg-surface-container-lowest border border-transparent hover:border-border transition-colors"
          >
            <X size={20} className="text-secondary" />
          </button>
        </div>

        {/* Content */}
        <div className="p-6 space-y-6">
          {/* Item Details */}
          <div>
            <h3 className="text-2xl font-normal text-slate-100 mb-2">
              {item.name}
            </h3>
            <div className="text-sm text-secondary space-y-1">
              {item.part_number && (
                <div>Part Number: {item.part_number}</div>
              )}
              {item.barcode && (
                <div>Barcode: {item.barcode}</div>
              )}
              {item.category && (
                <div>Category: {item.category}</div>
              )}
            </div>
          </div>

          {/* Success Message */}
          {successMessage && (
            <div className="status-success text-sm">
              {successMessage}
            </div>
          )}

          {/* Quantity Adjustment */}
          <div>
            <label className="text-sm font-normal text-secondary mb-3 block">
              Current Quantity
            </label>
            <QuantityDisplay
              itemId={String(item.id)}
              currentQuantity={item.quantity}
              onQuantityChange={handleQuantityChange}
            />
          </div>

          {/* Action Buttons */}
          <div className="flex gap-2 pt-2">
            <button
              onClick={handleClose}
              className="btn-secondary flex-1"
            >
              Keep Current Quantity
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}