agentic.email/frontend/src/components/AddEmployeeForm.jsx

import { Info, Lock, Mail, Plus, User, UsersRound } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { createOrgMember, createOrgSection, listOrgSections } from "../api";

const EMAIL_LOCAL_PATTERN = /^[A-Za-z0-9](?:[A-Za-z0-9._-]{0,62}[A-Za-z0-9])?$/;

function RequiredLabel({ children }) {
  return (
    <>
      {children}
      <span className="add-user-required" aria-hidden="true">*</span>
    </>
  );
}

function SetupField({ label, error, children, hint }) {
  return (
    <div className={`add-user-field${error ? " has-error" : ""}`}>
      {label && <span className="add-user-label">{label}</span>}
      {children}
      {hint && <small className="add-user-hint">{hint}</small>}
      {error && <span className="add-user-error" role="alert">{error}</span>}
    </div>
  );
}

function InputWrap({ icon: Icon, children }) {
  return (
    <div className="add-user-input-wrap">
      <Icon size={18} className="add-user-field-icon" aria-hidden="true" />
      {children}
    </div>
  );
}

function validateForm(form, companyDomain) {
  const errors = {};
  if (!form.first_name.trim()) errors.first_name = "Please enter a first name.";
  if (!form.last_name.trim()) errors.last_name = "Please enter a last name.";
  const local = form.email_local.trim();
  if (!local) {
    errors.email_local = "Please enter a work email address.";
  } else if (!EMAIL_LOCAL_PATTERN.test(local)) {
    errors.email_local = "Enter a valid email address before @.";
  }
  if (!form.send_invitation && !form.password.trim()) {
    errors.password = "Please set an initial password.";
  }
  if (form.send_invitation) {
    const invite = form.invitation_email.trim();
    if (!invite) {
      errors.invitation_email = "Please enter a personal email for the invitation.";
    } else if (invite.endsWith(`@${companyDomain}`)) {
      errors.invitation_email = "Use a personal email, not your company domain.";
    }
  }
  return errors;
}

export default function AddEmployeeForm({
  companyDomain,
  platformDomain = "gentic.email",
  variant = "drawer",
  submitLabel = "Create user",
  onCreated,
  onCancel,
}) {
  const token = sessionStorage.getItem("agmail_access_token");
  const [sections, setSections] = useState([]);
  const [sectionsLoading, setSectionsLoading] = useState(true);
  const [showNewSection, setShowNewSection] = useState(false);
  const [newSectionName, setNewSectionName] = useState("");
  const [sectionError, setSectionError] = useState("");
  const [creatingSection, setCreatingSection] = useState(false);
  const [form, setForm] = useState({
    first_name: "",
    last_name: "",
    email_local: "",
    invitation_email: "",
    org_role: "user",
    section_id: null,
    send_invitation: true,
    force_password_change: true,
    password: "",
  });
  const [fieldErrors, setFieldErrors] = useState({});
  const [submitAttempted, setSubmitAttempted] = useState(false);
  const [status, setStatus] = useState({ loading: false, error: "" });

  useEffect(() => {
    let cancelled = false;
    setSectionsLoading(true);
    listOrgSections(token)
      .then((items) => {
        if (!cancelled) {
          setSections(items);
        }
      })
      .catch(() => {
        if (!cancelled) {
          setSections([]);
        }
      })
      .finally(() => {
        if (!cancelled) {
          setSectionsLoading(false);
        }
      });
    return () => {
      cancelled = true;
    };
  }, [token]);

  const formValid = useMemo(
    () => Object.keys(validateForm(form, companyDomain)).length === 0,
    [form, companyDomain],
  );

  function updateField(field, value) {
    setForm((current) => {
      const next = { ...current, [field]: value };
      if (submitAttempted || fieldErrors[field]) {
        const nextErrors = validateForm(next, companyDomain);
        setFieldErrors((errors) => ({ ...errors, [field]: nextErrors[field] }));
      }
      return next;
    });
  }

  function selectSection(sectionId) {
    setForm((current) => ({
      ...current,
      section_id: current.section_id === sectionId ? null : sectionId,
    }));
  }

  async function handleCreateSection() {
    const name = newSectionName.trim();
    if (!name) {
      setSectionError("Enter a section name.");
      return;
    }
    setCreatingSection(true);
    setSectionError("");
    try {
      const section = await createOrgSection({ name }, token);
      setSections((current) => [...current, section].sort((a, b) => a.name.localeCompare(b.name)));
      setForm((current) => ({ ...current, section_id: section.id }));
      setNewSectionName("");
      setShowNewSection(false);
    } catch (error) {
      setSectionError(error.message);
    } finally {
      setCreatingSection(false);
    }
  }

  async function handleSubmit(event) {
    event.preventDefault();
    setSubmitAttempted(true);
    const errors = validateForm(form, companyDomain);
    setFieldErrors(errors);
    if (Object.keys(errors).length > 0) {
      return;
    }

    setStatus({ loading: true, error: "" });
    const email = `${form.email_local.trim().toLowerCase()}@${companyDomain}`;
    try {
      const member = await createOrgMember(
        {
          first_name: form.first_name.trim(),
          last_name: form.last_name.trim(),
          email,
          invitation_email: form.send_invitation
            ? form.invitation_email.trim().toLowerCase()
            : undefined,
          section_id: form.section_id || undefined,
          org_role: form.org_role,
          send_invitation: form.send_invitation,
          force_password_change: form.send_invitation ? false : form.force_password_change,
          password: form.send_invitation ? undefined : form.password,
        },
        token,
      );
      setForm({
        first_name: "",
        last_name: "",
        email_local: "",
        invitation_email: "",
        org_role: "user",
        section_id: null,
        send_invitation: true,
        force_password_change: true,
        password: "",
      });
      setFieldErrors({});
      setSubmitAttempted(false);
      setStatus({ loading: false, error: "" });
      onCreated?.(member);
    } catch (error) {
      setStatus({ loading: false, error: error.message });
    }
  }

  const formClass = variant === "inline"
    ? "org-setup-form employee-add-form employee-add-form-inline"
    : "people-drawer-form employee-add-form";

  return (
    <form className={formClass} onSubmit={handleSubmit} noValidate>
      <div className={variant === "inline" ? "org-setup-form-shell" : "add-user-form-body"}>
        <div className="add-user-row">
          <SetupField
            label={<RequiredLabel>First name</RequiredLabel>}
            error={fieldErrors.first_name}
          >
            <InputWrap icon={User}>
              <input
                value={form.first_name}
                onChange={(event) => updateField("first_name", event.target.value)}
                placeholder="Rahul"
              />
            </InputWrap>
          </SetupField>
          <SetupField
            label={<RequiredLabel>Last name</RequiredLabel>}
            error={fieldErrors.last_name}
          >
            <InputWrap icon={User}>
              <input
                value={form.last_name}
                onChange={(event) => updateField("last_name", event.target.value)}
                placeholder="Sharma"
              />
            </InputWrap>
          </SetupField>
        </div>

        <SetupField
          label={<RequiredLabel>Work email</RequiredLabel>}
          error={fieldErrors.email_local}
          hint="This will be their login email address on your company domain."
        >
          <div className="add-user-email-field">
            <InputWrap icon={Mail}>
              <input
                value={form.email_local}
                onChange={(event) => updateField("email_local", event.target.value)}
                placeholder="rahul"
              />
            </InputWrap>
            <span>@{companyDomain}</span>
          </div>
        </SetupField>

        <SetupField
          label="Role"
          hint="User can access email. User Admin can manage people."
        >
          <InputWrap icon={Info}>
            <select
              value={form.org_role}
              onChange={(event) => updateField("org_role", event.target.value)}
            >
              <option value="user">User</option>
              <option value="admin">User Admin</option>
            </select>
          </InputWrap>
        </SetupField>

        <fieldset className="add-user-section-field">
          <legend className="add-user-label">
            <UsersRound size={18} className="add-user-field-icon add-user-legend-icon" aria-hidden="true" />
            Section
          </legend>
          <small className="add-user-hint add-user-hint-tight">
            Add to a department or team (optional). Group emails are managed under Groups.
          </small>
          <div className="people-groups-options">
            {sectionsLoading ? (
              <span className="people-section-loading">Loading sections…</span>
            ) : (
              sections.map((section) => (
                <button
                  key={section.id}
                  type="button"
                  className={`people-group-chip${form.section_id === section.id ? " active" : ""}`}
                  onClick={() => selectSection(section.id)}
                >
                  {section.name}
                </button>
              ))
            )}
            <button
              type="button"
              className="people-group-chip people-section-add"
              onClick={() => setShowNewSection((current) => !current)}
            >
              + Add section
            </button>
          </div>
          {showNewSection && (
            <div className="people-section-create">
              <input
                value={newSectionName}
                onChange={(event) => setNewSectionName(event.target.value)}
                placeholder="e.g. Marketing"
              />
              <button
                type="button"
                className="button button-outline"
                onClick={handleCreateSection}
                disabled={creatingSection}
              >
                {creatingSection ? "Creating…" : "Create"}
              </button>
            </div>
          )}
          {sectionError && <span className="add-user-error" role="alert">{sectionError}</span>}
        </fieldset>

        <div className="add-user-section-divider" aria-hidden="true" />

        <h3 className="add-user-section-title">Account setup</h3>

        <SetupField
          label={form.send_invitation ? <RequiredLabel>Invitation email</RequiredLabel> : "Invitation email"}
          error={fieldErrors.invitation_email}
          hint={`Personal email where we send the setup invite from invites@${platformDomain}.`}
        >
          <InputWrap icon={Mail}>
            <input
              type="email"
              value={form.invitation_email}
              onChange={(event) => updateField("invitation_email", event.target.value)}
              placeholder="rahul@gmail.com"
              disabled={!form.send_invitation}
            />
          </InputWrap>
        </SetupField>

        <div className="add-user-checkboxes">
          <label className="add-user-checkbox">
            <input
              type="checkbox"
              checked={form.send_invitation}
              onChange={(event) => updateField("send_invitation", event.target.checked)}
            />
            <span>
              <strong>Send invitation email</strong>
              <small>They will receive a secure link to set their password (expires in 48 hours).</small>
            </span>
          </label>
        </div>

        {!form.send_invitation && (
          <>
            <SetupField
              label={<RequiredLabel>Initial password</RequiredLabel>}
              error={fieldErrors.password}
              hint="Must include uppercase, lowercase, and a number."
            >
              <InputWrap icon={Lock}>
                <input
                  type="password"
                  value={form.password}
                  onChange={(event) => updateField("password", event.target.value)}
                  placeholder="Set an initial password"
                />
              </InputWrap>
            </SetupField>

            <label className="add-user-checkbox">
              <input
                type="checkbox"
                checked={form.force_password_change}
                onChange={(event) => updateField("force_password_change", event.target.checked)}
              />
              <span>
                <strong>Require password change on first login</strong>
                <small>User must create a new password when they sign in for the first time.</small>
              </span>
            </label>
          </>
        )}

        {status.error && <p className="form-error" role="alert">{status.error}</p>}

        <footer className={variant === "inline" ? "org-setup-actions" : "add-user-actions"}>
          {onCancel && (
            <button type="button" className="add-user-button add-user-button-cancel" onClick={onCancel}>
              Cancel
            </button>
          )}
          <button
            className="add-user-button add-user-button-submit"
            type="submit"
            disabled={!formValid || status.loading}
          >
            {status.loading ? "Creating…" : (
              variant === "inline" ? (
                <><Plus size={16} /> {submitLabel}</>
              ) : submitLabel
            )}
          </button>
        </footer>
      </div>
    </form>
  );
}