import { useEffect, useState } from 'react'
import { Settings, X } from 'lucide-react'

export default function PropertiesPanel({ selectedNode, setNodes }) {
  const [nodeData, setNodeData] = useState(null)

  useEffect(() => {
    if (selectedNode) {
      setNodeData(selectedNode)
    } else {
      setNodeData(null)
    }
  }, [selectedNode])

  const handlePropertyChange = (key, value) => {
    if (!nodeData) return
    const updatedNode = { ...nodeData, properties: { ...nodeData.properties, [key]: value } }
    setNodeData(updatedNode)
    setNodes(prev => prev.map(node => 
      node.id === nodeData.id ? updatedNode : node
    ))
  }

  if (!nodeData) {
    return (
      <div className="w-80 bg-white border-l border-gray-200 p-6" data-tutorial-target="properties-panel">
        <div className="text-center py-12">
          <Settings className="w-12 h-12 text-gray-300 mx-auto mb-4" />
          <h3 className="text-lg font-semibold text-gray-700 mb-2">No Node Selected</h3>
          <p className="text-sm text-gray-500">Select a node to view its properties</p>
        </div>
      </div>
    )
  }

  return (
    <div className="w-80 bg-white border-l border-gray-200 p-6" data-tutorial-target="properties-panel">
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-lg font-semibold text-gray-900">Node Properties</h2>
        <button className="text-gray-400 hover:text-gray-600">
          <X className="w-5 h-5" />
        </button>
      </div>

      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Name
          </label>
          <input
            type="text"
            value={nodeData.properties.name}
            onChange={(e) => handlePropertyChange('name', e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
          />
        </div>

        <div>