// modals.jsx — Application modal (full ATS form) + Admin login modal.

function Scrim({ open, onClose, children, compact }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  return (
    <div className={'scrim' + (open ? ' open' : '')} onMouseDown={(e) => {
      if (e.target === e.currentTarget) onClose();
    }}>
      <div className={'modal glass-strong' + (compact ? ' compact' : '')}>
        <button className="modal-x" onClick={onClose} aria-label="Close">
          <Icons.x width="16" height="16" />
        </button>
        {children}
      </div>
    </div>);

}

// ── Application Form ─────────────────────────────────────────
// Mirrors production schema: full main-player fields + up to 5 additional players.

const blankPlayer = () => ({
  player_name: '',
  furnace_level: '',
  power_level: '',
  x_coordinate: '',
  y_coordinate: ''
});

const blankApplication = () => ({
  player_name: '',
  state_number: '',
  furnace_level: '',
  power_level: '',
  alliance_name: '',
  alliance_rank: '',
  x_coordinate: '',
  y_coordinate: '',
  discord_username: '',
  telegram_username: '',
  notes: '',
  preferred_alliance_id: '',
  additional_players: []
});

function Toggle({ value, onChange, label }) {
  return (
    <button type="button"
    className={'toggle' + (value ? ' on' : '')}
    onClick={() => onChange(!value)}
    aria-pressed={value}>
      <span className="toggle-thumb" />
      <span className="toggle-label">{label || (value ? 'Yes' : 'No')}</span>
    </button>);

}

function FieldError({ msg }) {
  if (!msg) return null;
  return <span className="field-err">{msg}</span>;
}

function validateMain(form) {
  const e = {};
  if (!form.player_name) e.player_name = 'Required';else
  if (form.player_name.length > 50) e.player_name = 'Max 50 chars';
  if (!form.state_number) e.state_number = 'Required';else
  {
    const n = Number(form.state_number);
    if (!Number.isInteger(n) || n < 1 || n > 9999) e.state_number = '1–9999';
  }
  if (!form.furnace_level) e.furnace_level = 'Required';
  if (!form.power_level) e.power_level = 'Required';
  if (form.x_coordinate !== '') {
    const n = Number(form.x_coordinate);
    if (!Number.isInteger(n) || n < 0 || n > 1199) e.x_coordinate = '0–1199';
  }
  if (form.y_coordinate !== '') {
    const n = Number(form.y_coordinate);
    if (!Number.isInteger(n) || n < 0 || n > 1199) e.y_coordinate = '0–1199';
  }
  if (form.alliance_name && form.alliance_name.length > 100) e.alliance_name = 'Max 100 chars';
  if (form.discord_username && form.discord_username.length > 100) e.discord_username = 'Max 100 chars';
  if (form.telegram_username && form.telegram_username.length > 100) e.telegram_username = 'Max 100 chars';
  if (!form.discord_username && !form.telegram_username) e.discord_username = 'Provide Discord or Telegram';
  return e;
}

function validatePlayer(p, idx) {
  const e = {};
  if (!p.player_name) e.player_name = 'Required';else
  if (p.player_name.length > 50) e.player_name = 'Max 50';
  if (!p.furnace_level) e.furnace_level = 'Required';
  if (!p.power_level) e.power_level = 'Required';
  if (p.x_coordinate !== '') {
    const n = Number(p.x_coordinate);
    if (!Number.isInteger(n) || n < 0 || n > 1199) e.x_coordinate = '0–1199';
  }
  if (p.y_coordinate !== '') {
    const n = Number(p.y_coordinate);
    if (!Number.isInteger(n) || n < 0 || n > 1199) e.y_coordinate = '0–1199';
  }
  return e;
}

function ApplicationModal({ open, onClose, lang }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState(blankApplication());
  const [errors, setErrors] = React.useState({});
  const [playerErrors, setPlayerErrors] = React.useState({});
  const [alliances, setAlliances] = React.useState([]);

  React.useEffect(() => {
    if (open) {
      setSubmitted(false);
      setForm(blankApplication());
      setErrors({});
      setPlayerErrors({});
      if (window.ATS) ATS.loadAlliances().then(setAlliances).catch(() => {});
    }
  }, [open]);

  React.useEffect(() => {
    if (!submitted) return;
    const t = setTimeout(onClose, 3000);
    return () => clearTimeout(t);
  }, [submitted, onClose]);

  const set = (k) => (e) => setForm({ ...form, [k]: e?.target ? e.target.value : e });
  const setPlayer = (idx, k) => (e) => {
    const v = e?.target ? e.target.value : e;
    const next = form.additional_players.map((p, i) => i === idx ? { ...p, [k]: v } : p);
    setForm({ ...form, additional_players: next });
  };
  const addPlayer = () => {
    if (form.additional_players.length >= 5) return;
    setForm({ ...form, additional_players: [...form.additional_players, blankPlayer()] });
  };
  const removePlayer = (idx) => {
    setForm({ ...form, additional_players: form.additional_players.filter((_, i) => i !== idx) });
  };

  const submit = (e) => {
    e.preventDefault();
    const eMain = validateMain(form);
    const ePlayers = {};
    form.additional_players.forEach((p, i) => {
      const eP = validatePlayer(p, i);
      if (Object.keys(eP).length) ePlayers[i] = eP;
    });
    setErrors(eMain);setPlayerErrors(ePlayers);
    if (Object.keys(eMain).length || Object.keys(ePlayers).length) {
      const firstErr = document.querySelector('.field-err');
      if (firstErr) firstErr.closest('.form-row, .form-cell')?.scrollIntoView({ block: 'center' });
      return;
    }
    if (window.ATS) {
      ATS.addApplication({
        player_name: form.player_name,
        state_number: Number(form.state_number),
        furnace_level: form.furnace_level,
        power_level: form.power_level,
        alliance_name: form.alliance_name,
        alliance_rank: form.alliance_rank,
        x_coordinate: form.x_coordinate === '' ? null : Number(form.x_coordinate),
        y_coordinate: form.y_coordinate === '' ? null : Number(form.y_coordinate),
        discord_username: form.discord_username || '',
        telegram_username: form.telegram_username || '',
        notes: form.notes,
        preferred_alliance_id: form.preferred_alliance_id ? Number(form.preferred_alliance_id) : null,
        language: lang || 'en',
        additional_players: form.additional_players.map((p) => ({
          player_name: p.player_name,
          furnace_level: p.furnace_level,
          power_level: p.power_level,
          hero_level: Number(p.hero_level),
          chiefs_paid: p.chiefs_paid,
          x_coordinate: p.x_coordinate === '' ? null : Number(p.x_coordinate),
          y_coordinate: p.y_coordinate === '' ? null : Number(p.y_coordinate)
        }))
      });
    }
    setSubmitted(true);
  };

  const FURNACE = window.ATS ? ATS.FURNACE_LEVELS : ['25', '26', '27', '28'];
  const RANKS = window.ATS ? ATS.ALLIANCE_RANKS : ['R1', 'R2', 'R3', 'R4', 'R5'];

  return (
    <Scrim open={open} onClose={onClose}>
      {!submitted ?
      <>
          <span className="eyebrow">Transfer application</span>
          <h2 style={{ marginTop: 12 }}>Apply to State 3802</h2>
          <p className="sub">All required fields marked with *. A Transfer Manager will reach out on the contact you provide.</p>

          <form className="form-grid" onSubmit={submit} noValidate>
            <h4 className="form-section-h">Your player</h4>

            <div className="form-row">
              <label htmlFor="pname">Player name * <span className="hint-inline">Unicode OK</span></label>
              <input id="pname" value={form.player_name} onChange={set('player_name')}
            maxLength={50} placeholder="네뷸라캣 / KaiserBolt / محمد" />
              <FieldError msg={errors.player_name} />
            </div>

            <div className="form-row two">
              <div className="form-row">
                <label htmlFor="state">State # *</label>
                <input id="state" inputMode="numeric" pattern="[0-9]*"
              value={form.state_number} onChange={set('state_number')}
              placeholder="1247" />
                <FieldError msg={errors.state_number} />
              </div>
              <div className="form-row">
                <label htmlFor="furnace">Furnace level *</label>
                <select id="furnace" value={form.furnace_level} onChange={set('furnace_level')}>
                  <option value="">Select…</option>
                  {FURNACE.map((f) => <option key={f} value={f}>{f}</option>)}
                </select>
                <FieldError msg={errors.furnace_level} />
              </div>
            </div>

            <div className="form-row">
              <label htmlFor="power">Power level *</label>
              <input id="power" value={form.power_level} onChange={set('power_level')}
            placeholder="22M" />
              <FieldError msg={errors.power_level} />
            </div>

            <div className="form-row two">
              <div className="form-row">
                <label htmlFor="all">Current alliance</label>
                <input id="all" value={form.alliance_name} onChange={set('alliance_name')}
              maxLength={100} placeholder="BlazeMark" />
                <FieldError msg={errors.alliance_name} />
              </div>
              <div className="form-row">
                <label htmlFor="rank">Alliance rank</label>
                <select id="rank" value={form.alliance_rank} onChange={set('alliance_rank')}>
                  <option value="">—</option>
                  {RANKS.map((r) => <option key={r} value={r}>{r}</option>)}
                </select>
              </div>
            </div>

            <div className="form-row two">
              <div className="form-row">
                <label htmlFor="cx">X coordinate <span className="hint-inline">0–1199</span></label>
                <input id="cx" inputMode="numeric" pattern="[0-9]*"
              value={form.x_coordinate} onChange={set('x_coordinate')}
              placeholder="612" />
                <FieldError msg={errors.x_coordinate} />
              </div>
              <div className="form-row">
                <label htmlFor="cy">Y coordinate <span className="hint-inline">0–1199</span></label>
                <input id="cy" inputMode="numeric" pattern="[0-9]*"
              value={form.y_coordinate} onChange={set('y_coordinate')}
              placeholder="480" />
                <FieldError msg={errors.y_coordinate} />
              </div>
            </div>

            <div className="form-row two">
              <div className="form-row">
                <label htmlFor="dc">Discord username</label>
                <input id="dc" value={form.discord_username} onChange={set('discord_username')}
              maxLength={100} placeholder="@kaiserbolt" />
                <FieldError msg={errors.discord_username} />
              </div>
              <div className="form-row">
                <label htmlFor="tg">Telegram username</label>
                <input id="tg" value={form.telegram_username || ''} onChange={set('telegram_username')}
              maxLength={100} placeholder="@kaiserbolt" />
                <span className="hint">Provide either Discord or Telegram (or both).</span>
              </div>
            </div>

            <div className="form-row">
              <label htmlFor="pref">Preferred alliance</label>
              <select id="pref" value={form.preferred_alliance_id} onChange={set('preferred_alliance_id')}>
                <option value="">No preference — assign me</option>
                {alliances.filter((a) => a.is_recruiting).map((a) =>
              <option key={a.id} value={a.id}>{a.name} · {a.power_requirement}</option>
              )}
              </select>
            </div>

            <div className="form-row">
              <label htmlFor="notes">Notes</label>
              <textarea id="notes" value={form.notes} onChange={set('notes')}
            placeholder="Anything we should know? Referrals, prior alliances, language preference…" />
            </div>

            {/* Additional players */}
            <div className="addp-wrap">
              <div className="addp-head">
                <h4 className="form-section-h" style={{ margin: 0 }}>
                  Additional players <span className="hint-inline">({form.additional_players.length}/5)</span>
                </h4>
                <button type="button" className="btn btn-ghost btn-sm" onClick={addPlayer}
              disabled={form.additional_players.length >= 5}>
                  <Icons.plus width="13" height="13" /> Add player
                </button>
              </div>
              {form.additional_players.length === 0 &&
            <div className="addp-empty">
                  Transferring with friends? Add up to 5 — we'll review and try to keep your group together.
                </div>
            }
              {form.additional_players.map((p, idx) => {
              const errs = playerErrors[idx] || {};
              return (
                <div key={idx} className="addp-card">
                    <div className="addp-card-head">
                      <span className="addp-num">Player {idx + 2}</span>
                      <button type="button" className="addp-del" onClick={() => removePlayer(idx)} aria-label="Remove player">
                        <Icons.x width="14" height="14" />
                      </button>
                    </div>
                    <div className="form-row">
                      <label>Name *</label>
                      <input value={p.player_name} onChange={setPlayer(idx, 'player_name')} maxLength={50} />
                      <FieldError msg={errs.player_name} />
                    </div>
                    <div className="form-row two">
                      <div className="form-row">
                        <label>Furnace *</label>
                        <select value={p.furnace_level} onChange={setPlayer(idx, 'furnace_level')}>
                          <option value="">—</option>
                          {FURNACE.map((f) => <option key={f} value={f}>{f}</option>)}
                        </select>
                        <FieldError msg={errs.furnace_level} />
                      </div>
                      <div className="form-row">
                        <label>Power *</label>
                        <input value={p.power_level} onChange={setPlayer(idx, 'power_level')} placeholder="14M" />
                        <FieldError msg={errs.power_level} />
                      </div>
                    </div>
                    <div className="form-row two">
                      <div className="form-row">
                        <label>X coord</label>
                        <input inputMode="numeric" value={p.x_coordinate} onChange={setPlayer(idx, 'x_coordinate')} placeholder="0–1199" />
                        <FieldError msg={errs.x_coordinate} />
                      </div>
                      <div className="form-row">
                        <label>Y coord</label>
                        <input inputMode="numeric" value={p.y_coordinate} onChange={setPlayer(idx, 'y_coordinate')} placeholder="0–1199" />
                        <FieldError msg={errs.y_coordinate} />
                      </div>
                    </div>
                  </div>);

            })}
            </div>

            <button type="submit" className="btn btn-primary modal-submit">
              Submit application <Icons.arrow width="16" height="16" />
            </button>
            <p className="discord-note">
              On submit your application is logged — a Transfer Manager will reach out on the contact you provided.
            </p>
          </form>
        </> :

      <div className="success">
          <div className="check"><Icons.check width="32" height="32" /></div>
          <h3>Application received.</h3>
          <p>Logged in our queue — a Transfer Manager will reach out.<br />Closing this in 3 seconds…</p>
        </div>
      }
    </Scrim>);

}

// ── Admin Login modal ───────────────────────────────────────
function AdminModal({ open, onClose }) {
  const [err, setErr] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [pass, setPass] = React.useState('');

  React.useEffect(() => {
    if (open) {setErr('');setEmail('');setPass('');}
  }, [open]);

  const submit = async (e) => {
    e.preventDefault();
    if (!email || !pass) {setErr('Both fields required.');return;}
    if (!window.ATS) { window.location.href = 'admin.html'; return; }
    try {
      const res = await fetch('/api/custom-login', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password: pass }),
      });
      if (!res.ok) { setErr('Invalid credentials'); return; }
      const data = await res.json();
      // Fetch fresh session
      const sessionRes = await fetch('/api/auth/session', { credentials: 'include' });
      const sessionData = await sessionRes.json();
      if (!sessionData?.user) { setErr('Could not establish session'); return; }
      const session = {
        email: sessionData.user.email,
        name: sessionData.user.name,
        role: sessionData.user.role || 'staff',
        id: sessionData.user.id,
        at: Date.now(),
      };
      ATS.setSession(session);
      // web_admin and higher can edit this page directly — stay here, light up the pill
      if (ATS.roleAtLeast(session.role, 'web_admin')) {
        window.dispatchEvent(new CustomEvent('4wos:session'));
        onClose();
        return;
      }
      // staff and others go to the admin dashboard (their work lives there)
      window.location.href = 'admin.html';
    } catch (e) {
      setErr('Login failed: ' + e.message);
    }
  };

  return (
    <Scrim open={open} onClose={onClose} compact>
      <div className="admin-badge">
        <Icons.lock width="11" height="11" style={{ verticalAlign: '-1px', marginRight: 4 }} />
        Admin access
      </div>
      <h2>Officer log in</h2>
      <p className="sub">
        Mock login. <code className="hint-code">kai@4wos.com</code> = web admin (edit in place),{' '}
        <code className="hint-code">liz@4wos.com</code> = admin (review &amp; approve),{' '}
        <code className="hint-code">admin@4wos.com</code> = super admin.
      </p>
      <form className="form-grid" onSubmit={submit}>
        <div className="form-row">
          <label htmlFor="email">Email</label>
          <input id="email" type="email" required value={email}
          onChange={(e) => setEmail(e.target.value)} placeholder="admin@4wos.com" />
        </div>
        <div className="form-row">
          <label htmlFor="pass">Password</label>
          <input id="pass" type="password" required value={pass}
          onChange={(e) => setPass(e.target.value)} placeholder="••••••••" />
        </div>
        {err &&
        <div style={{ padding: '10px 14px', borderRadius: 10,
          background: 'rgba(248, 113, 113, 0.1)', border: '1px solid rgba(248, 113, 113, 0.3)',
          color: '#fecaca', fontSize: '0.85rem' }}>
            {err}
          </div>
        }
        <button type="submit" className="btn btn-primary modal-submit">Log in</button>
        <a href="#" onClick={(e) => e.preventDefault()}
        style={{ fontSize: '0.85rem', color: 'var(--text-faint)', textAlign: 'center', textDecoration: 'none' }}>
          Forgot password?
        </a>
      </form>
    </Scrim>);

}

Object.assign(window, { Scrim, ApplicationModal, AdminModal, JoinModal: ApplicationModal });