import React, { useState, useEffect } from 'react';
import { X, Save, Building } from 'lucide-react';

interface CreateOrganizationalDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: any) => void;
  type: 'unit' | 'branch' | 'sub-branch';
  parentInfo?: {
    id: number;
    name: string;
    type: 'unit' | 'branch';
  };
}

const CreateOrganizationalDialog: React.FC<CreateOrganizationalDialogProps> = ({
  isOpen,
  onClose,
  onSubmit,
  type,
  parentInfo
}) => {
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    parent_id: undefined as number | undefined
  });

  useEffect(() => {
    if (parentInfo) {
      setFormData(prev => ({
        ...prev,
        parent_id: parentInfo.id
      }));
    }
  }, [parentInfo]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit(formData);
  };

  const getTitle = () => {
    switch (type) {
      case 'unit': return 'Create New Unit';
      case 'branch': return 'Create New Branch';
      case 'sub-branch': return 'Create New Sub-Branch';
      default: return 'Create New Item';
    }
  };

  const getParentLabel = () => {
    switch (type) {
      case 'branch': return 'Unit';
      case 'sub-branch': return 'Branch';
      default: return 'Parent';
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <div className="flex items-center space-x-3">
            <Building className="h-6 w-6 text-blue-600" />
            <h2 className="text-xl font-semibold text-gray-900">{getTitle()}</h2>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 rounded-full transition-colors"
          >
            <X className="h-5 w-5 text-gray-500" />
          </button>
        </div>

        {/* Form */}
        <form id="organizational-form" onSubmit={handleSubmit} className="p-6">
          <div className="space-y-4">
            {parentInfo && (
              <div className="bg-blue-50 p-3 rounded-lg">
                <p className="text-sm text-blue-800">
                  <span className="font-medium">Parent {getParentLabel()}:</span> {parentInfo.name}
                </p>
              </div>
            )}

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Name *
              </label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleInputChange}
                required
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder={`Enter ${type} name`}
              />
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Description
              </label>
              <textarea
                name="description"
                value={formData.description}
                onChange={handleInputChange}
                rows={3}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder={`Enter ${type} description`}
              />
            </div>
          </div>
        </form>

        {/* Action Buttons */}
        <div className="flex space-x-3 p-6 border-t border-gray-200">
          <button
            type="button"
            onClick={onClose}
            className="flex-1 flex items-center justify-center space-x-2 bg-gray-600 text-white py-3 px-4 rounded-lg hover:bg-gray-700 transition-colors"
          >
            <X className="h-5 w-5" />
            <span>Cancel</span>
          </button>
          
          <button
            type="submit"
            form="organizational-form"
            className="flex-1 flex items-center justify-center space-x-2 bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors"
          >
            <Save className="h-5 w-5" />
            <span>Create {type.charAt(0).toUpperCase() + type.slice(1)}</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default CreateOrganizationalDialog;