import React from 'react';
import { motion } from 'framer-motion';
import { X, ChevronDown } from 'lucide-react';

interface DeptModalProps {
  isOpen: boolean;
  onClose: () => void;
  deptFormData: {
    name: string;
    headOfDepartment: string;
    totalBedsCapacity: number;
    contactPhone: string;
    isActive: boolean;
  };
  setDeptFormData: (data: any) => void;
  allUsers: any[];
  selectedHospital: any;
  onSubmit: () => void;
}

export const DeptModal: React.FC<DeptModalProps> = ({
  isOpen,
  onClose,
  deptFormData,
  setDeptFormData,
  allUsers,
  selectedHospital,
  onSubmit,
}) => {
  if (!isOpen) return null;

  return (
    <div className="premium-modal-overlay">
      <motion.div
        initial={{ scale: 0.95, opacity: 0, y: 20 }}
        animate={{ scale: 1, opacity: 1, y: 0 }}
        exit={{ scale: 0.95, opacity: 0, y: 20 }}
        className="premium-modal-container"
      >
        <div className="modal-header-premium">
          <h3>Add Department</h3>
          <button className="modal-close-btn" onClick={onClose}>
            <X size={18} />
          </button>
        </div>

        <div className="setup-form-modern">
          <div className="form-group-premium">
            <label>Department Name</label>
            <input
              type="text"
              className="setup-input-premium"
              value={deptFormData.name}
              onChange={(e) =>
                setDeptFormData({ ...deptFormData, name: e.target.value })
              }
              placeholder="e.g. Emergency & Trauma"
            />
          </div>
          <div className="form-group-premium">
            <label>Head of Department</label>
            <div
              className="custom-select-wrapper"
              style={{ position: 'relative' }}
            >
              <select
                className="setup-input-premium custom-select"
                value={deptFormData.headOfDepartment}
                onChange={(e) =>
                  setDeptFormData({
                    ...deptFormData,
                    headOfDepartment: e.target.value,
                  })
                }
                style={{ width: '100%', appearance: 'none' }}
              >
                <option value="" disabled>
                  Select Head of Department
                </option>
                {allUsers
                  .filter(
                    (u) =>
                      u.hospitalId ===
                        (selectedHospital?.rawUser?.hospitalId ||
                          selectedHospital?.id) ||
                      u.organisationId ===
                        selectedHospital?.rawUser?.organisationId
                  )
                  .map((u, i) => (
                    <option key={i} value={u.name || u.username}>
                      {u.name || u.username} ({u.roles[0]?.replace('_', ' ')})
                    </option>
                  ))}
              </select>
              <ChevronDown
                size={14}
                style={{
                  position: 'absolute',
                  right: '12px',
                  top: '50%',
                  transform: 'translateY(-50%)',
                  color: 'var(--text-secondary)',
                  pointerEvents: 'none',
                }}
              />
            </div>
          </div>
          <div
            className="form-group-premium"
            style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: '20px',
            }}
          >
            <div>
              <label>Capacity (Beds)</label>
              <input
                type="number"
                className="setup-input-premium"
                style={{ width: '100%', marginTop: '10px' }}
                value={deptFormData.totalBedsCapacity}
                onChange={(e) =>
                  setDeptFormData({
                    ...deptFormData,
                    totalBedsCapacity: parseInt(e.target.value) || 0,
                  })
                }
              />
            </div>
            <div>
              <label>Contact Phone</label>
              <input
                type="text"
                className="setup-input-premium"
                style={{ width: '100%', marginTop: '10px' }}
                value={deptFormData.contactPhone}
                onChange={(e) =>
                  setDeptFormData({
                    ...deptFormData,
                    contactPhone: e.target.value,
                  })
                }
                placeholder="+91-..."
              />
            </div>
          </div>
        </div>

        <div className="modal-footer-premium">
          <button className="btn-secondary-glass" onClick={onClose}>
            CANCEL
          </button>
          <button className="btn-primary-glass" onClick={onSubmit}>
            ADD DEPARTMENT
          </button>
        </div>
      </motion.div>
    </div>
  );
};