// T2 Falcon Admin — Add User multi-step flow

const { useState: useStateU, useRef: useRefU, useEffect: useEffectU } = React;

const STEPS = [
{ id: 'personal', label: 'Personal Information' },
{ id: 'role', label: 'Role & Status' },
{ id: 'permissions', label: 'Permissions & Privilege' }];


// ===== Step progress bar (matches Add Client stepper styling) =====
const StepBar = ({ current, maxStep = 0, onJump }) => {
  const pct = current / (STEPS.length - 1) * 100;
  const reached = Math.max(current, maxStep);
  return (
    <div className="ac-stepper">
      <div className="ac-stepper-track">
        <div className="ac-stepper-fill" style={{ width: `${pct}%` }} />
        {STEPS.map((s, i) => {
          const state = i < current ? 'done' : i === current ? 'active' : 'idle';
          const clickable = onJump && i <= reached && i !== current;
          return (
            <button
              key={s.id}
              type="button"
              className={`ac-stepper-dot ${state}`}
              style={{ left: `${i / (STEPS.length - 1) * 100}%`, cursor: clickable ? 'pointer' : 'default' }}
              onClick={() => clickable && onJump(i)}
              aria-label={s.label}>
              {state === 'done' ?
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg> :
              state === 'active' ?
              <span className="ac-stepper-dot-pulse" /> :
              null}
            </button>);

        })}
      </div>
      <div className="ac-stepper-labels">
        {STEPS.map((s, i) => {
          const clickable = onJump && i <= reached && i !== current;
          return (
            <span
              key={s.id}
              className={`ac-step-label ${i === current ? 'active' : ''} ${i < current ? 'done' : ''} ${clickable ? 'is-clickable' : ''}`}
              onClick={() => clickable && onJump(i)}
              style={{ left: `${i / (STEPS.length - 1) * 100}%` }}>
              {s.label}
            </span>);
        })}
      </div>
    </div>);

};


// ===== Step 1: Personal Information =====
const Step1 = ({ data, onChange, openOtp, showEmailError }) => {
  const fileRef = useRefU(null);
  return (
    <div className="au-step-content">
      {/* Avatar upload */}
      <div className="au-avatar-row">
        <div className="au-avatar-left">
          <div className="au-avatar-circle">
            {data.photo ?
            <img src={data.photo} alt="avatar" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '50%' }} /> :

            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0d3f44" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="8" r="4" /><path d="M4 20c0-4 4-6 8-6s8 2 8 6" />
              </svg>
            }
            {data.photo && <>
              <button
                type="button"
                className="au-avatar-edit"
                aria-label="Edit photo"
                onClick={(e) => {e.stopPropagation();fileRef.current?.click();}}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M12 20h9" /><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
                </svg>
              </button>
              <button
                type="button"
                className="au-avatar-delete"
                aria-label="Remove photo"
                onClick={(e) => {e.stopPropagation();onChange('photo', '');}}>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="6" y1="6" x2="18" y2="18" /><line x1="6" y1="18" x2="18" y2="6" />
                </svg>
              </button>
            </>}
          </div>
          <div className="au-avatar-label">
            User Picture
            <span className="sub">PNG, JPG up to 2MB</span>
          </div>
        </div>
        <div className="au-avatar-right">
          <span className="au-drag-hint">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 16 12 12 8 16" /><line x1="12" y1="12" x2="12" y2="21" /><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" /></svg>
            Drag a photo here or
          </span>
          <button type="button" className="btn btn-primary" onClick={() => fileRef.current.click()}>Upload Photo</button>
          <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }}
          onChange={(e) => {
            const f = e.target.files[0];
            if (f) {const r = new FileReader();r.onload = (ev) => onChange('photo', ev.target.result);r.readAsDataURL(f);}
          }} />
        </div>
      </div>

      <div className="au-divider" />

      {/* Form rows */}
      <div className="au-form-grid au-form-grid-3">
        <div className="au-field">
          <label className="au-label">First Name <span className="req">*</span></label>
          <input className="au-input" placeholder="e.g. Hajeer" value={data.firstName} onChange={(e) => onChange('firstName', e.target.value)} />
        </div>
        <div className="au-field">
          <label className="au-label">Last Name <span className="req">*</span></label>
          <input className="au-input" placeholder="e.g. Al-Saud" value={data.lastName} onChange={(e) => onChange('lastName', e.target.value)} />
        </div>
        <div className="au-field">
          <label className="au-label">User Name <span className="req">*</span></label>
          <input className="au-input" placeholder="hajeer" value={data.userName} onChange={(e) => onChange('userName', e.target.value)} />
        </div>
        <div className="au-field">
          <label className="au-label">National ID / Iqama</label>
          <input className="au-input" placeholder="10-digit number" value={data.nationalId} onChange={(e) => onChange('nationalId', e.target.value)} />
        </div>
        <div className="au-field">
          <label className="au-label">Phone Number <span className="req">*</span></label>
          <PhoneInput
            data={data}
            onChange={onChange} />
          
        </div>
        <div className="au-field">
          <label className="au-label">Email Address <span className="req">*</span></label>
          <EmailInput
            value={data.email}
            onChange={(v) => onChange('email', v)} />
          
        </div>
      </div>
    </div>);

};

// ===== Step 2: Role & Status =====
const Step2 = ({ data, onChange }) =>
<div className="au-step-content">
    <div className="au-form-grid au-form-grid-2">
      <div className="au-field">
        <label className="au-label">User Status</label>
        <div className="au-select-wrap">
          <select className="au-select" value={data.status} disabled>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
            <option value="suspended">Suspended</option>
            <option value="pending">Pending</option>
          </select>
          <IcChevronDown size={14} stroke={2} className="au-select-chevron" />
        </div>
      </div>
      <div className="au-field">
        <label className="au-label">User Role</label>
        <div className="au-select-wrap">
          <select className="au-select" value={data.role} onChange={(e) => onChange('role', e.target.value)}>
            <option value="system_admin">System Admin</option>
            <option value="operation">Operation</option>
            <option value="products">Products</option>
            <option value="support">Support</option>
            <option value="viewer">Viewer</option>
          </select>
          <IcChevronDown size={14} stroke={2} className="au-select-chevron" />
        </div>
      </div>
    </div>
  </div>;


// ===== Step 3: Permissions & Privilege =====
const CHECKER_OPTIONS = [
{ value: 'none', label: 'None' },
{ value: 'level1', label: 'Checker Level One' },
{ value: 'level2', label: 'Checker Level Two' }];


const Step3 = ({ data, onChange }) =>
<div className="au-step-content">
    {/* Assigned Permission Group */}
    <div className="au-perm-section">
      <label className="au-label au-perm-label">Assigned Permission Group</label>
      <div className="au-select-wrap au-perm-select-wrap">
        <select className="au-select" value={data.permGroup} onChange={(e) => onChange('permGroup', e.target.value)}>
          <option value="admin">Admin Group</option>
          <option value="readonly">Read Only Group</option>
          <option value="ops">Operations Group</option>
          <option value="support">Support Group</option>
        </select>
        <IcChevronDown size={14} stroke={2} className="au-select-chevron" />
      </div>
    </div>

    <div className="au-divider" />

    {/* CommChannel Checker Level */}
    <div className="au-perm-section">
      <div className="au-checker-title">CommChannel Checker Level</div>
      <div className="au-checker-table">
        {[
      { id: 'whatsapp', label: 'WhatsApp' },
      { id: 'voice', label: 'Voice' }].
      map((ch) =>
      <div key={ch.id} className="au-checker-row">
            <span className="au-checker-ch-label">{ch.label}</span>
            <div className="au-checker-options">
              {CHECKER_OPTIONS.map((opt) =>
          <label key={opt.value} className="au-radio-label">
                  <input
              type="radio"
              name={`checker-${ch.id}`}
              value={opt.value}
              checked={data[`checker_${ch.id}`] === opt.value}
              onChange={() => onChange(`checker_${ch.id}`, opt.value)}
              className="au-radio" />
            
                  <span className="au-radio-mark" />
                  <span>{opt.label}</span>
                </label>
          )}
            </div>
          </div>
      )}
      </div>
    </div>
  </div>;


// ===== Sending Credentials modal =====
const DELIVERY_OPTIONS = [
{
  id: 'email', label: 'Send via Email',
  icon: <img src="admin/assets/send-email.svg" alt="" draggable="false" />
},
{
  id: 'sms', label: 'Send via SMS',
  icon: <img src="admin/assets/send-sms.svg" alt="" draggable="false" />
},
{
  id: 'both', label: 'Both, SMS and Email',
  icon: <img src="admin/assets/send-both.svg" alt="" draggable="false" />
}];


const CredentialsModal = ({ onCancel, onSend, userName, phone, email }) => {
  const [delivery, setDelivery] = useStateU('email');
  const options = [
  { id: 'email', label: 'Send via Email', src: 'admin/assets/send-email.svg' },
  { id: 'sms', label: 'Send via SMS', src: 'admin/assets/send-sms.svg' },
  { id: 'both', label: 'Both, SMS and Email', src: 'admin/assets/send-both.svg' }];

  return (
    <div className="ac-modal-overlay" onClick={onCancel}>
      <div className="ac-modal ac-send-modal" onClick={(e) => e.stopPropagation()}>
        <button className="ac-modal-close" type="button" onClick={onCancel} aria-label="Close">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6L18 18M18 6L6 18" /></svg>
        </button>
        <div className="ac-modal-head">
          <h3 className="ac-modal-title">Sending Credentials</h3>
          <p className="ac-modal-sub">An email and/or SMS with the username and password will be sent to the account owner</p>
        </div>
        <div className="ac-send-section">
          <div className="ac-send-label">Delivery method:</div>
          <div className="ac-send-options">
            {options.map((o) =>
            <button key={o.id} type="button" className={`ac-send-card ${delivery === o.id ? 'is-selected' : ''}`} onClick={() => setDelivery(o.id)}>
              <div className="ac-send-radio">
                <span className="ac-send-radio-outer">
                  {delivery === o.id && <span className="ac-send-radio-inner" />}
                </span>
                <span className="ac-send-card-label">{o.label}</span>
              </div>
              <div className="ac-send-illo"><img src={o.src} alt="" draggable="false" /></div>
            </button>
            )}
          </div>
        </div>
        <div className="ac-send-summary">
          <div className="ac-send-summary-item">
            <span className="ac-send-summary-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="8" r="3.5" /><path d="M5 20a7 7 0 0 1 14 0" strokeLinecap="round" /></svg>
            </span>
            <div>
              <div className="ac-send-summary-key">Account owner</div>
              <div className="ac-send-summary-val">{userName || 'Jawad Lababneh'}</div>
            </div>
          </div>
          <div className="ac-send-summary-item">
            <span className="ac-send-summary-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="6" y="3" width="12" height="18" rx="2" /><circle cx="12" cy="18" r="0.8" fill="currentColor" /></svg>
            </span>
            <div>
              <div className="ac-send-summary-key">Phone Number</div>
              <div className="ac-send-summary-val">{phone || '966567415590'}</div>
            </div>
          </div>
          <div className="ac-send-summary-item">
            <span className="ac-send-summary-icon">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="6" width="18" height="13" rx="2" /><path d="M3 8l9 6 9-6" /></svg>
            </span>
            <div>
              <div className="ac-send-summary-key">Email</div>
              <div className="ac-send-summary-val">{email || 'j.lababneh@t2.sa'}</div>
            </div>
          </div>
        </div>
        <div className="ac-modal-actions">
          <button className="btn btn-link" type="button" onClick={onCancel}>Cancel</button>
          <button className="btn btn-primary" type="button" onClick={onSend}>Send Credentials</button>
        </div>
      </div>
    </div>);

};

// ===== Success Modal =====
const UserSuccessModal = ({ onClose }) => {
  return (
    <div className="ac-modal-overlay" onClick={onClose}>
      <div className="ac-modal ac-success-modal" onClick={(e) => e.stopPropagation()}>
        <button className="ac-modal-close" type="button" onClick={onClose} aria-label="Close">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6L18 18M18 6L6 18" /></svg>
        </button>
        <div className="ac-success-illo"><img src="admin/assets/successfully.svg" alt="" draggable="false" /></div>
        <div className="ac-success-title">Completed successfully</div>
        <div className="ac-success-sub">Credentials sent to the user</div>
      </div>
    </div>);

};

// ===== Main Add User Flow =====
const AddUserFlow = ({ onClose, t, pushToast, node }) => {
  const [step, setStep] = useStateU(0);
  const [maxStep, setMaxStep] = useStateU(0); // furthest step reached, used for stepper jump-back
  const [showCreds, setShowCreds] = useStateU(false);
  const [showSuccess, setShowSuccess] = useStateU(false);
  const [otpChannel, setOtpChannel] = useStateU(null); // 'phone' | 'email' | null
  const [showEmailError, setShowEmailError] = useStateU(false);
  const [form, setForm] = useStateU({
    photo: '', firstName: '', lastName: '', userName: '', password: '#123455',
    nationalId: '',
    phoneCountry: 'SA', phone: '', phoneVerified: false,
    email: '', emailVerified: false,
    status: 'active', role: 'system_admin',
    permGroup: 'admin',
    checker_whatsapp: 'level2',
    checker_voice: 'level1'
  });

  const update = (key, val) => setForm((f) => ({ ...f, [key]: val }));

  const handleNext = () => {
    if (step < STEPS.length - 1) {
      const nextStep = step + 1;
      setStep(nextStep);
      setMaxStep((m) => Math.max(m, nextStep));
    } else {
      setShowCreds(true);
    }
  };
  const jumpToStep = (i) => {
    if (i <= maxStep) setStep(i);
  };
  const openOtp = (channel) => {
    if (channel === 'phone' && !form.phone) return;
    if (channel === 'email' && !form.email) return;
    setOtpChannel(channel);
  };
  const handlePrev = () => {if (step > 0) setStep((s) => s - 1);};
  const isLast = step === STEPS.length - 1;

  return (
    <>
      {otpChannel &&
      <OtpModal
        channel={otpChannel}
        target={otpChannel === 'phone' ?
        `${(COUNTRIES.find((c) => c.code === (form.phoneCountry || 'SA')) || {}).dial || '+966'} ${form.phone}` :
        form.email}
        onClose={() => setOtpChannel(null)}
        onSuccess={() => {
          if (otpChannel === 'phone') update('phoneVerified', true);else
          {update('emailVerified', true);setShowEmailError(false);}
          setOtpChannel(null);
        }} />

      }
      {showCreds &&
      <CredentialsModal
        onCancel={() => setShowCreds(false)}
        onSend={() => {setShowCreds(false);setShowSuccess(true);}}
        userName={form.firstName ? `${form.firstName} ${form.lastName}` : undefined}
        phone={form.phone}
        email={form.email} />

      }
      {showSuccess &&
      <UserSuccessModal onClose={() => {
        setShowSuccess(false);
        pushToast('User created & credentials sent ✓');
        onClose();
      }} />
      }
      <div className="ac-page">
        {/* Top bar */}
        <div className="ac-topbar">
          <div className="ac-topbar-brand">
            {node && node.brand ?
            <BrandLogo brand={node.brand} size={32} /> :

            <T2Mark size={30} />
            }
            <span className="ac-brand-name">{node ? node.name : 'Falcon'}</span>
          </div>
          <div className="ac-topbar-actions">
            <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
            {step > 0 && <button className="btn btn-secondary" onClick={handlePrev}>Previous</button>}
            <button className="btn btn-primary" onClick={handleNext}>{isLast ? 'Finish' : 'Next'}</button>
          </div>
        </div>

        {/* Content area */}
        <div className="ac-body">
          <div className="ac-card">
            {/* Heading */}
            <div className="ac-card-head">
              <div className="ac-card-title">Add New User</div>
              <div className="ac-step-counter">step <strong>{step + 1}/{STEPS.length}</strong></div>
            </div>

            {/* Stepper */}
            <StepBar current={step} maxStep={maxStep} onJump={jumpToStep} />

            {/* Step pane */}
            {step === 0 && <Step1 data={form} onChange={update} openOtp={openOtp} showEmailError={showEmailError} />}
            {step === 1 && <Step2 data={form} onChange={update} />}
            {step === 2 && <Step3 data={form} onChange={update} />}
          </div>
        </div>
      </div>
    </>);

};

window.AddUserFlow = AddUserFlow;