import React, { useState, useRef } from 'react';
import { Printer, Upload, Edit2, Trash2, Save, X, Plus, Move } from 'lucide-react';

const PrinterMap = () => {
  const [floorPlanImage, setFloorPlanImage] = useState(null);
  const [printers, setPrinters] = useState([]);
  const [selectedPrinter, setSelectedPrinter] = useState(null);
  const [editingPrinter, setEditingPrinter] = useState(null);
  const [isDragging, setIsDragging] = useState(false);
  const [draggedPrinterId, setDraggedPrinterId] = useState(null);
  const [isAddingPrinter, setIsAddingPrinter] = useState(false);
  const fileInputRef = useRef(null);
  const mapRef = useRef(null);

  const defaultPrinterData = {
    name: '',
    model: '',
    serialNumber: '',
    ipAddress: '',
    location: '',
    department: '',
    type: 'Color',
    status: 'Available',
    paperCapacity: '',
    notes: ''
  };

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        setFloorPlanImage(event.target.result);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleMapClick = (e) => {
    if (!isAddingPrinter) return;
    
    const rect = mapRef.current.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;

    const newPrinter = {
      id: Date.now(),
      x,
      y,
      ...defaultPrinterData,
      name: `Printer ${printers.length + 1}`
    };

    setPrinters([...printers, newPrinter]);
    setEditingPrinter(newPrinter);
    setIsAddingPrinter(false);
  };

  const handlePrinterMouseDown = (e, printerId) => {
    e.stopPropagation();
    setIsDragging(true);
    setDraggedPrinterId(printerId);
    setSelectedPrinter(printers.find(p => p.id === printerId));
  };

  const handleMouseMove = (e) => {
    if (!isDragging || !draggedPrinterId) return;

    const rect = mapRef.current.getBoundingClientRect();
    const x = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
    const y = Math.max(0, Math.min(100, ((e.clientY - rect.top) / rect.height) * 100));

    setPrinters(printers.map(p => 
      p.id === draggedPrinterId ? { ...p, x, y } : p
    ));
  };

  const handleMouseUp = () => {
    setIsDragging(false);
    setDraggedPrinterId(null);
  };

  const handleUpdatePrinter = (updatedData) => {
    setPrinters(printers.map(p => 
      p.id === editingPrinter.id ? { ...p, ...updatedData } : p
    ));
    setEditingPrinter({ ...editingPrinter, ...updatedData });
    if (selectedPrinter?.id === editingPrinter.id) {
      setSelectedPrinter({ ...selectedPrinter, ...updatedData });
    }
  };

  const handleDeletePrinter = (printerId) => {
    setPrinters(printers.filter(p => p.id !== printerId));
    if (selectedPrinter?.id === printerId) setSelectedPrinter(null);
    if (editingPrinter?.id === printerId) setEditingPrinter(null);
  };

  const getStatusColor = (status) => {
    switch (status) {
      case 'Available': return '#10b981';
      case 'In Use': return '#f59e0b';
      case 'Offline': return '#ef4444';
      case 'Maintenance': return '#8b5cf6';
      default: return '#6b7280';
    }
  };

  const getTypeColor = (type) => {
    switch (type) {
      case 'Color': return '#3b82f6';
      case 'Black & White': return '#6b7280';
      case 'Large Format': return '#8b5cf6';
      case 'Multifunction': return '#06b6d4';
      default: return '#6b7280';
    }
  };

  return (
    <div 
      className="w-full h-screen bg-gray-100 p-6 flex gap-6"
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      <div className="flex-1 bg-white rounded-lg shadow-lg p-6 flex flex-col">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-2xl font-bold text-gray-800">Building Floor Plan</h2>
          <div className="flex items-center gap-3">
            {floorPlanImage && (
              <button
                onClick={() => setIsAddingPrinter(!isAddingPrinter)}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors ${
                  isAddingPrinter 
                    ? 'bg-red-500 hover:bg-red-600 text-white' 
                    : 'bg-blue-500 hover:bg-blue-600 text-white'
                }`}
              >
                {isAddingPrinter ? (
                  <>
                    <X size={18} />
                    Cancel
                  </>
                ) : (
                  <>
                    <Plus size={18} />
                    Add Printer
                  </>
                )}
              </button>
            )}
            <button
              onClick={() => fileInputRef.current.click()}
              className="flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium transition-colors"
            >
              <Upload size={18} />
              Upload Floor Plan
            </button>
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              onChange={handleImageUpload}
              className="hidden"
            />
          </div>
        </div>

        <div 
          ref={mapRef}
          className={`flex-1 relative bg-gray-50 rounded-lg border-2 border-gray-300 overflow-hidden ${
            isAddingPrinter ? 'cursor-crosshair' : ''
          }`}
          onClick={handleMapClick}
        >
          {floorPlanImage ? (
            <>
              <img
                src={floorPlanImage}
                alt="Floor Plan"
                className="absolute inset-0 w-full h-full object-contain pointer-events-none"
              />
              
              {printers.map(printer => (
                <div
                  key={printer.id}
                  className="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-move group"
                  style={{ 
                    left: `${printer.x}%`, 
                    top: `${printer.y}%`,
                    zIndex: draggedPrinterId === printer.id ? 50 : 10
                  }}
                  onMouseDown={(e) => handlePrinterMouseDown(e, printer.id)}
                  onClick={(e) => {
                    e.stopPropagation();
                    setSelectedPrinter(printer);
                  }}
                >
                  <div className="relative">
                    <div 
                      className="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border-2 border-white transition-transform group-hover:scale-110"
                      style={{ backgroundColor: getTypeColor(printer.type) }}
                    >
                      <Printer size={20} color="white" />
                    </div>
                    <div
                      className="absolute top-0 right-0 w-3 h-3 rounded-full border-2 border-white"
                      style={{ backgroundColor: getStatusColor(printer.status) }}
                    />
                    {selectedPrinter?.id === printer.id && (
                      <div className="absolute top-0 left-0 w-10 h-10 rounded-full border-2 border-blue-500 animate-ping" />
                    )}
                  </div>
                  <div className="absolute top-12 left-1/2 transform -translate-x-1/2 bg-white px-3 py-1 rounded shadow-lg border border-gray-200 whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
                    <p className="text-sm font-semibold text-gray-800">{printer.name}</p>
                    <p className="text-xs text-gray-600">{printer.location}</p>
                  </div>
                </div>
              ))}
            </>
          ) : (
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="text-center text-gray-400">
                <Upload size={64} className="mx-auto mb-4 opacity-50" />
                <p className="text-lg font-medium">Upload a floor plan to get started</p>
                <p className="text-sm mt-2">Click the "Upload Floor Plan" button above</p>
              </div>
            </div>
          )}
        </div>

        {isAddingPrinter && (
          <div className="mt-3 bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
            <strong>Add Printer Mode:</strong> Click anywhere on the floor plan to place a new printer
          </div>
        )}
      </div>

      <div className="w-96 flex flex-col gap-4 overflow-y-auto">
        {editingPrinter ? (
          <div className="bg-white rounded-lg shadow-lg p-4">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-bold text-gray-800 flex items-center gap-2">
                <Edit2 size={18} />
                Edit Printer
              </h3>
              <button
                onClick={() => setEditingPrinter(null)}
                className="text-gray-500 hover:text-gray-700"
              >
                <X size={20} />
              </button>
            </div>

            <div className="space-y-3 max-h-[calc(100vh-200px)] overflow-y-auto pr-2">
              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Name *</label>
                <input
                  type="text"
                  value={editingPrinter.name}
                  onChange={(e) => handleUpdatePrinter({ name: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Model</label>
                <input
                  type="text"
                  value={editingPrinter.model}
                  onChange={(e) => handleUpdatePrinter({ model: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Serial Number</label>
                <input
                  type="text"
                  value={editingPrinter.serialNumber}
                  onChange={(e) => handleUpdatePrinter({ serialNumber: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">IP Address</label>
                <input
                  type="text"
                  value={editingPrinter.ipAddress}
                  onChange={(e) => handleUpdatePrinter({ ipAddress: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Location</label>
                <input
                  type="text"
                  value={editingPrinter.location}
                  onChange={(e) => handleUpdatePrinter({ location: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Department</label>
                <input
                  type="text"
                  value={editingPrinter.department}
                  onChange={(e) => handleUpdatePrinter({ department: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Type</label>
                <select
                  value={editingPrinter.type}
                  onChange={(e) => handleUpdatePrinter({ type: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="Color">Color</option>
                  <option value="Black & White">Black & White</option>
                  <option value="Large Format">Large Format</option>
                  <option value="Multifunction">Multifunction</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Status</label>
                <select
                  value={editingPrinter.status}
                  onChange={(e) => handleUpdatePrinter({ status: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="Available">Available</option>
                  <option value="In Use">In Use</option>
                  <option value="Offline">Offline</option>
                  <option value="Maintenance">Maintenance</option>
                </select>
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Paper Capacity</label>
                <input
                  type="text"
                  value={editingPrinter.paperCapacity}
                  onChange={(e) => handleUpdatePrinter({ paperCapacity: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="e.g., 500 sheets"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-gray-600 mb-1">Notes</label>
                <textarea
                  value={editingPrinter.notes}
                  onChange={(e) => handleUpdatePrinter({ notes: e.target.value })}
                  rows="3"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                />
              </div>

              <div className="flex gap-2 pt-2">
                <button
                  onClick={() => setEditingPrinter(null)}
                  className="flex-1 bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
                >
                  <X size={16} />
                  Close
                </button>
                <button
                  onClick={() => handleDeletePrinter(editingPrinter.id)}
                  className="flex-1 bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
                >
                  <Trash2 size={16} />
                  Delete
                </button>
              </div>
            </div>
          </div>
        ) : selectedPrinter ? (
          <div className="bg-white rounded-lg shadow-lg p-4">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-bold text-gray-800 flex items-center gap-2">
                <Printer size={20} />
                Printer Details
              </h3>
              <button
                onClick={() => setSelectedPrinter(null)}
                className="text-gray-500 hover:text-gray-700"
              >
                <X size={20} />
              </button>
            </div>

            <div className="space-y-3 max-h-[calc(100vh-200px)] overflow-y-auto pr-2">
              {selectedPrinter.name && (
                <div>
                  <p className="text-xs font-semibold text-gray-500">Name</p>
                  <p className="text-base font-medium text-gray-800">{selectedPrinter.name}</p>
                </div>
              )}

              {selectedPrinter.model && (
                <div>
                  <p className="text-xs font-semibold text-gray-500">Model</p>
                  <p className="text-base text-gray-800">{selectedPrinter.model}</p>
                </div>
              )}

              {selectedPrinter.serialNumber && (
                <div>
                  <p className="text-xs font-semibold text-gray-500">Serial Number</p>
                  <p className="text-base text-gray-800">{selectedPrinter.serialNumber}</p>
                </div>
              )}

              {selectedPrinter.ipAddress && (
                <div>
                  <p className="text-xs font-semibold text-gray-500">IP Address</p>
                  <p className="text-base text-gray-800 font-mono">{selectedPrinter.ipAddress}</p>
                </div>
              )}

              {selectedPrinter.location && (
                <div>
                  <p className="text-xs font-semibold text-gray-500">Location</p>
                  <p className="text-base text-gray-800">{selectedPrinter.location}</p>
                </div>
              )}

              {selectedPrinter.department && (
                <div>
                  <p className="text-xs font-semibold text-gray-500">Department</p>
                  <p className="text-base text-gray-800">{selectedPrinter.department}</p>
                </div>
              )}

              <div>
                <p className="text-xs font-semibold text-gray-500">Type</p>
                <div className="flex items-center gap-2">
                  <div 
                    className="w-3 h-3 rounded-full" 
                    style={{ backgroundColor: getTypeColor(selectedPrinter.type) }}
                  />
                  <p className="text-base text-gray-800">{selectedPrinter.type}</p>
                </div>
              </div>

              <div>
                <p className="text-xs font-semibold text-gray-500">Status</p>
                <div className="flex items-center gap-2">
                  <div 
                    className="w-3 h-3 rounded-full" 
                    style={{ backgroundColor: getStatusColor(selectedPrinter.status) }}
                  />
                  <p className="text-base text-gray-800">{selectedPrinter.status}</p>
                </div>
              </div>

              {selectedPrinter.paperCapacity && (
                <div>
                  <p className="text-xs font-semibold text-gray-500">Paper Capacity</p>
                  <p className="text-base text-gray-800">{selectedPrinter.paperCapacity}</p>
                </div>
              )}

              {selectedPrinter.notes && (
                <div>
                  <p className="text-xs font-semibold text-gray-500">Notes</p>
                  <p className="text-base text-gray-800">{selectedPrinter.notes}</p>
                </div>
              )}

              <div className="pt-3 border-t border-gray-200">
                <button
                  onClick={() => setEditingPrinter(selectedPrinter)}
                  className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
                >
                  <Edit2 size={16} />
                  Edit Printer
                </button>
              </div>
            </div>
          </div>
        ) : (
          <div className="bg-white rounded-lg shadow-lg p-4">
            <div className="flex flex-col items-center justify-center h-64 text-center text-gray-400">
              <Printer size={48} className="mb-3 opacity-50" />
              <p className="text-sm">Select a printer on the map to view details</p>
              <p className="text-xs mt-2">or click "Add Printer" to place a new one</p>
            </div>
          </div>
        )}

        {printers.length > 0 && (
          <div className="bg-white rounded-lg shadow-lg p-4">
            <h3 className="text-lg font-bold text-gray-800 mb-3">All Printers ({printers.length})</h3>
            <div className="space-y-2 max-h-96 overflow-y-auto">
              {printers.map(printer => (
                <div
                  key={printer.id}
                  onClick={() => setSelectedPrinter(printer)}
                  className={`p-3 rounded-lg border cursor-pointer transition-colors ${
                    selectedPrinter?.id === printer.id
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200 hover:bg-gray-50'
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div
                        className="w-4 h-4 rounded-full"
                        style={{ backgroundColor: getTypeColor(printer.type) }}
                      />
                      <div>
                        <p className="font-medium text-gray-800 text-sm">{printer.name}</p>
                        <p className="text-xs text-gray-600">{printer.location || 'No location'}</p>
                      </div>
                    </div>
                    <div
                      className="w-3 h-3 rounded-full"
                      style={{ backgroundColor: getStatusColor(printer.status) }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default PrinterMap;