import React from "react";
import { useNavigate } from "react-router-dom";
import Button from "../../../common/Button";
import UserInfoCard from "./UserInfoCard";
import AccessControlSection from "./AccessControlSection";
import PersonalInfoSection from "./PersonalInfoSection";
import OrganizationInfoSection from "./OrganizationInfoSection";
import "../styles/UserProfileForm.css";

const UserProfileForm = ({
  formData,
  departments,
  countries,
  locations,
  roles,
  accountStatuses,
  loading,
  error,
  onInputChange,
  onRoleChange,
  onSubmit,
}) => {
  const navigate = useNavigate();

  return (
    <div className="form-section">
      <div className="form-header user-profile-form-header">
        <h1 className="user-profile-form-title">Update User</h1>
        <Button
          variant="close"
          onClick={() => navigate("/user-create")}
          icon={
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M18 6L6 18M6 6L18 18"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          }
        />
      </div>

      <form className="user-form" onSubmit={onSubmit}>
        {error && <div className="user-profile-error">{error}</div>}

        <UserInfoCard
          employeeName={formData.employee_name}
          employeeId={formData.employee_id}
        />

        <div className="input-group" style={{ marginBottom: "2rem" }}>
          <label htmlFor="employee_id" className="input-label">
            Employee ID
          </label>
          <input
            type="text"
            id="employee_id"
            name="employee_id"
            className="input-field user-profile-disabled-input"
            value={formData.employee_id}
            disabled
          />
          <small className="user-profile-disabled-hint">
            Employee ID cannot be changed
          </small>
        </div>

        <AccessControlSection
          formData={formData}
          accountStatuses={accountStatuses}
          roles={roles}
          onInputChange={onInputChange}
          onRoleChange={onRoleChange}
        />

        <PersonalInfoSection formData={formData} onInputChange={onInputChange} />

        <OrganizationInfoSection
          formData={formData}
          departments={departments}
          countries={countries}
          locations={locations}
          onInputChange={onInputChange}
        />

        <div className="form-actions">
          <Button
            type="button"
            variant="secondary"
            onClick={() => navigate("/user-create")}
            disabled={loading}
          >
            Cancel
          </Button>
          <Button type="submit" variant="primary" disabled={loading}>
            {loading ? "Updating..." : "Update User"}
          </Button>
        </div>
      </form>
    </div>
  );
};

export default UserProfileForm;

