import React from 'react';
import { motion } from 'framer-motion';
import { X, Eye, EyeOff, User, Shield, Briefcase, FileText } from 'lucide-react';

interface StaffModalProps {
  isOpen: boolean;
  onClose: () => void;
  staffFormData: any;
  setStaffFormData: (data: any) => void;
  rolesList: any[];
  showPassword: boolean;
  setShowPassword: (show: boolean) => void;
  onSubmit: () => void;
  isEditing?: boolean;
}

export const StaffModal: React.FC<StaffModalProps> = ({
  isOpen,
  onClose,
  staffFormData,
  setStaffFormData,
  rolesList,
  showPassword,
  setShowPassword,
  onSubmit,
  isEditing = false,
}) => {
  if (!isOpen) return null;

  const role = staffFormData.role || 'ED_DOCTOR';

  const renderRoleSpecificFields = () => {
    switch (role) {
      case 'ED_DOCTOR':
        return (
          <>
            <div className="form-group-premium">
              <label>Specialization</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.specialization || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, specialization: e.target.value })}
                placeholder="e.g. Emergency Medicine"
              />
            </div>
            <div className="form-group-premium">
              <label>License Number</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.license_number || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, license_number: e.target.value })}
                placeholder="e.g. MC-998877"
              />
            </div>
            <div className="form-group-premium">
              <label>Department</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.department || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, department: e.target.value })}
                placeholder="e.g. Emergency Operations"
              />
            </div>
            <div className="form-group-premium">
              <label>Designation</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.designation || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, designation: e.target.value })}
                placeholder="e.g. ERCP Specialist"
              />
            </div>
            <div className="form-group-premium">
              <label>Shift Schedule</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.shift || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, shift: e.target.value })}
                placeholder="e.g. Rotational"
              />
            </div>
          </>
        );

      case 'Hospital Coordinator':
        return (
          <>
            <div className="form-group-premium">
              <label>Department</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.department || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, department: e.target.value })}
                placeholder="e.g. Triage Section"
              />
            </div>
            <div className="form-group-premium">
              <label>Designation</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.designation || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, designation: e.target.value })}
                placeholder="e.g. Quick Response Lead"
              />
            </div>
            <div className="form-group-premium">
              <label>Shift Schedule</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.shift || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, shift: e.target.value })}
                placeholder="e.g. DAY"
              />
            </div>
            <div className="form-group-premium">
              <label>Languages Spoken (comma separated)</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.languages || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, languages: e.target.value })}
                placeholder="e.g. English, Tamil, Hindi"
              />
            </div>
          </>
        );

      case 'Hospital Nurse':
        return (
          <>
            <div className="form-group-premium">
              <label>Employee ID</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.employee_id || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, employee_id: e.target.value })}
                placeholder="e.g. MIO-N005"
              />
            </div>
            <div className="form-group-premium">
              <label>Organization ID</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.org_id || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, org_id: e.target.value })}
                placeholder="Auto-populated if left blank"
              />
            </div>
            <div className="form-group-premium">
              <label>Department</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.department || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, department: e.target.value })}
                placeholder="e.g. Emergency Room (ER)"
              />
            </div>
            <div className="form-group-premium">
              <label>Designation</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.designation || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, designation: e.target.value })}
                placeholder="e.g. Staff Nurse (Grade II)"
              />
            </div>
            <div className="form-group-premium">
              <label>Shift Schedule</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.shift || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, shift: e.target.value })}
                placeholder="e.g. NIGHT"
              />
            </div>
            <div className="form-group-premium">
              <label>Assigned Floor / Ward</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.assigned_floor || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, assigned_floor: e.target.value })}
                placeholder="e.g. 2nd Floor - Trauma Wing"
              />
            </div>
            <div className="form-group-premium">
              <label>Languages Spoken (comma separated)</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.languages || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, languages: e.target.value })}
                placeholder="e.g. English, Tamil"
              />
            </div>
          </>
        );

      default:
        // Generic fallback fields
        return (
          <>
            <div className="form-group-premium">
              <label>Department</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.department || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, department: e.target.value })}
              />
            </div>
            <div className="form-group-premium">
              <label>Designation</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.designation || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, designation: e.target.value })}
              />
            </div>
            <div className="form-group-premium">
              <label>Shift Schedule</label>
              <input
                type="text"
                className="setup-input-premium"
                value={staffFormData.shift || ''}
                onChange={(e) => setStaffFormData({ ...staffFormData, shift: e.target.value })}
              />
            </div>
          </>
        );
    }
  };

  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"
        style={{ maxWidth: '800px', width: '90%' }} // Made wider for two columns
      >
        <div className="modal-header-premium">
          <h3>{isEditing ? 'Update Personnel' : 'New Staff Registration'}</h3>
          <button className="modal-close-btn" onClick={onClose}>
            <X size={18} />
          </button>
        </div>

        <div className="setup-form-modern" style={{ maxHeight: '65vh', overflowY: 'auto', padding: '24px' }}>
          
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px' }}>
            
            {/* LEFT COLUMN: Identity & Auth */}
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '14px', paddingBottom: '8px', borderBottom: '1px solid var(--card-border)' }}>
                <User size={16} style={{ color: 'var(--accent-cyan)' }} /> <h4 style={{ margin: 0, fontSize: '0.8rem', textTransform: 'uppercase', color: 'var(--text-secondary)', fontWeight: 600, letterSpacing: '0.04em' }}>Identity & Access</h4>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                <div className="form-group-premium">
                  <label>Full Name</label>
                  <input
                    type="text"
                    className="setup-input-premium"
                    value={staffFormData.name}
                    onChange={(e) => setStaffFormData({ ...staffFormData, name: e.target.value })}
                    placeholder="e.g. Dr. John Smith"
                  />
                </div>
                <div className="form-group-premium">
                  <label>Organizational Role</label>
                  <select
                    className="setup-input-premium"
                    value={staffFormData.role}
                    onChange={(e) => setStaffFormData({ ...staffFormData, role: e.target.value })}
                  >
                    {rolesList.length > 0 ? (
                      rolesList.map((r: any) => (
                        <option key={r.id} value={r.name}>
                          {r.name}
                        </option>
                      ))
                    ) : (
                      <>
                        <option value="ED_DOCTOR">ED_DOCTOR</option>
                        <option value="Hospital Coordinator">Hospital Coordinator</option>
                        <option value="Hospital Nurse">Hospital Nurse</option>
                      </>
                    )}
                  </select>
                </div>
                <div className="form-group-premium">
                  <label>Email Address</label>
                  <input
                    type="email"
                    className="setup-input-premium"
                    value={staffFormData.email}
                    onChange={(e) => setStaffFormData({ ...staffFormData, email: e.target.value })}
                    placeholder="e.g. jsmith@hospital.com"
                  />
                </div>
                <div className="form-group-premium">
                  <label>Phone Number</label>
                  <input
                    type="text"
                    className="setup-input-premium"
                    value={staffFormData.phone}
                    onChange={(e) => setStaffFormData({ ...staffFormData, phone: e.target.value })}
                    placeholder="e.g. +919876543210"
                  />
                </div>
                <div className="form-group-premium">
                  <label>System Username</label>
                  <input
                    type="text"
                    className="setup-input-premium"
                    value={staffFormData.username}
                    onChange={(e) => setStaffFormData({ ...staffFormData, username: e.target.value })}
                    placeholder="e.g. jsmith.ed"
                    autoComplete="new-password"
                  />
                </div>
                <div className="form-group-premium">
                  <label>{isEditing ? 'New Password (leave blank to keep current)' : 'Temporary Password'}</label>
                  <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
                    <input
                      type={showPassword ? 'text' : 'password'}
                      className="setup-input-premium"
                      style={{ width: '100%', paddingRight: '40px' }}
                      value={staffFormData.password || ''}
                      onChange={(e) => setStaffFormData({ ...staffFormData, password: e.target.value })}
                      placeholder={isEditing ? 'Enter new password...' : 'Password'}
                      autoComplete="new-password"
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      style={{
                        position: 'absolute', right: '14px', top: '50%', transform: 'translateY(-50%)',
                        background: 'none', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer', padding: 0, display: 'flex',
                      }}
                    >
                      {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                    </button>
                  </div>
                </div>
              </div>
            </div>

            {/* RIGHT COLUMN: Role Specific Data */}
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '14px', paddingBottom: '8px', borderBottom: '1px solid var(--card-border)' }}>
                <Briefcase size={16} style={{ color: 'var(--accent-cyan)' }} /> <h4 style={{ margin: 0, fontSize: '0.8rem', textTransform: 'uppercase', color: 'var(--text-secondary)', fontWeight: 600, letterSpacing: '0.04em' }}>Professional Details</h4>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                {renderRoleSpecificFields()}
              </div>
            </div>

          </div>
        </div>

        <div className="modal-footer-premium">
          <button className="btn-secondary-glass" onClick={onClose}>
            Cancel
          </button>
          <button className="btn-primary-glass" onClick={onSubmit}>
            {isEditing ? 'Update Personnel' : 'Register Personnel'}
          </button>
        </div>
      </motion.div>
    </div>
  );
};

