import React from "react";
import Button from "../../../common/Button";
import RoleDropdown from "../common/RoleDropdown";
import CountryDropdown from "../common/CountryDropdown";
import "../styles/UserCreateForm.css";

const UserCreateForm = ({
  formData,
  departments,
  countries,
  locations,
  roles,
  loading,
  loadingRoles,
  onInputChange,
  onRoleChange,
  onImageChange,
  imageInputRef,
  onSubmit,
  onClearForm,
}) => {
  return (
    <form onSubmit={onSubmit}>
      <div className="form-grid">
        <div className="form-group">
          <label htmlFor="employee_id" className="form-label">
            Employee ID <span style={{ color: "red" }}>*</span>
          </label>
          <input
            type="text"
            id="employee_id"
            name="employee_id"
            className="form-input"
            placeholder="e.g., EMP004"
            value={formData.employee_id}
            onChange={onInputChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="employee_name" className="form-label">
            Employee Name <span style={{ color: "red" }}>*</span>
          </label>
          <input
            type="text"
            id="employee_name"
            name="employee_name"
            className="form-input"
            placeholder="Full Name"
            value={formData.employee_name}
            onChange={onInputChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="email_id" className="form-label">
            Email ID <span style={{ color: "red" }}>*</span>
          </label>
          <input
            type="email"
            id="email_id"
            name="email_id"
            className="form-input"
            placeholder="Email Address"
            value={formData.email_id}
            onChange={onInputChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="phonenumber" className="form-label">
            Phone Number <span style={{ color: "red" }}>*</span>
          </label>
          <input
            type="tel"
            id="phonenumber"
            name="phonenumber"
            className="form-input"
            placeholder="Phone Number"
            value={formData.phonenumber}
            onChange={onInputChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="password" className="form-label">
            Password <span style={{ color: "red" }}>*</span>
          </label>
          <input
            type="password"
            id="password"
            name="password"
            className="form-input"
            placeholder="Password"
            value={formData.password}
            onChange={onInputChange}
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="user_image" className="form-label">
            User Image <span style={{ color: "#737373", fontSize: "0.9em", fontWeight: "normal" }}>(optional)</span>
          </label>
          <input
            ref={imageInputRef}
            type="file"
            id="user_image"
            name="user_image"
            className="form-input user-image-input"
            accept="image/jpeg,image/png,image/gif,image/webp"
            onChange={onImageChange}
          />
          <p className="user-image-hint">
            Maximum file size: 20 KB. Accepted formats: JPEG, PNG, GIF, WebP.
          </p>
          {formData.user_image_preview && (
            <div className="user-image-preview-wrap">
              <img
                src={formData.user_image_preview}
                alt="Preview"
                className="user-image-preview"
              />
            </div>
          )}
        </div>
        <div className="form-group">
          <label htmlFor="country_id" className="form-label">
            Country <span style={{ color: "red" }}>*</span>
          </label>
          <CountryDropdown
            countries={countries}
            value={formData.country_id}
            onChange={(countryId) =>
              onInputChange({
                target: { name: "country_id", value: countryId || "" },
              })
            }
          />
        </div>
        <div className="form-group">
          <label htmlFor="location_id" className="form-label">
            Site <span style={{ color: "red" }}>*</span>
          </label>
          <select
            id="location_id"
            name="location_id"
            className="form-input"
            value={formData.location_id}
            onChange={onInputChange}
            disabled={!formData.country_id || locations.length === 0}
            required
          >
            <option value="">
              {!formData.country_id
                ? "Select Country first"
                : locations.length === 0
                ? "No site available"
                : "Select Site"}
            </option>
            {locations.map((loc) => (
              <option key={loc.location_id} value={loc.location_id}>
                {loc.location_name}
              </option>
            ))}
          </select>
        </div>
        <div className="form-group">
          <label htmlFor="department_id" className="form-label">
            Work area <span style={{ color: "red" }}>*</span>
          </label>
          <select
            id="department_id"
            name="department_id"
            className="form-input"
            value={formData.department_id}
            onChange={onInputChange}
            disabled={!formData.location_id || departments.length === 0}
            required
          >
            <option value="">
              {!formData.location_id
                ? "Select site first"
                : departments.length === 0
                ? "No work area available"
                : "Select Work area"}
            </option>
            {departments.map((dept) => (
              <option key={dept.department_id} value={dept.department_id}>
                {dept.department_name}
              </option>
            ))}
          </select>
        </div>
        <div className="form-group">
          <label htmlFor="role_ids" className="form-label">
            Roles <span style={{ color: "red" }}>*</span>
          </label>
          <RoleDropdown
            roles={roles}
            value={formData.role_ids[0] ?? ""}
            onChange={onRoleChange}
            loading={loadingRoles}
          />
        </div>
      </div>
      <div className="form-actions">
        <Button
          type="button"
          variant="secondary"
          onClick={onClearForm}
          disabled={loading}
        >
          Clear Form
        </Button>
        <Button type="submit" variant="primary" disabled={loading}>
          {loading ? "Creating..." : "Submit"}
        </Button>
      </div>
    </form>
  );
};

export default UserCreateForm;
