// ============ 어드민 패널 ============
const AdminLogin = ({ onAuth }) => {
  const [pw, setPw] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      await Api.login(pw);
      onAuth();
    } catch (err) {
      setError(err.message || '비밀번호가 올바르지 않습니다.');
      setTimeout(() => setError(''), 2200);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="container" style={{maxWidth: 480, paddingTop: 80}}>
      <div className="card" style={{padding: 32}}>
        <div className="center" style={{
          width: 56, height: 56, borderRadius: 14,
          background: 'color-mix(in oklab, var(--leader) 15%, transparent)',
          border: '1px solid color-mix(in oklab, var(--leader) 40%, transparent)',
          color: 'var(--leader)', margin: '0 auto 20px'
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
          </svg>
        </div>
        <h2 style={{textAlign: 'center', fontFamily: 'Rajdhani, sans-serif', fontWeight: 700, fontSize: 24, marginBottom: 8}}>어드민 인증</h2>
        <p style={{textAlign: 'center', color: 'var(--text-dim)', fontSize: 14, marginBottom: 24}}>관리자 비밀번호를 입력하세요.</p>
        <form onSubmit={submit}>
          <input className="input" type="password" placeholder="비밀번호"
                 value={pw} onChange={e => setPw(e.target.value)} autoFocus/>
          {error && <div style={{marginTop: 10, color: 'var(--danger)', fontSize: 13}}>{error}</div>}
          <button type="submit" className="btn primary" disabled={loading} style={{width: '100%', marginTop: 16, justifyContent: 'center'}}>
            {loading ? '확인 중...' : '인증하기'}
          </button>
        </form>
      </div>
    </div>
  );
};

// 승/패 개별 입력 → 승률 자동 계산
const WinLossInput = ({ wins, losses, onChangeWins, onChangeLosses }) => {
  const matches = (wins ?? 0) + (losses ?? 0);
  const winRate = matches > 0 ? Math.round(((wins ?? 0) / matches) * 100) : null;

  const parse = (v) => v === '' ? 0 : Math.max(0, Math.floor(Number(v)));

  return (
    <div className="wl-block">
      <div className="wl-block-head">
        <label className="label" style={{marginBottom: 0}}>팀 전적 (승/패)</label>
        <div className="wl-preview mono">
          승률 <b>{winRate != null ? `${winRate}%` : '—'}</b>
        </div>
      </div>
      <div className="wl-inputs">
        <div className="wl-field">
          <span className="wl-field-tag" style={{color: 'var(--mint)'}}>WIN</span>
          <input className="input mono wl-num" type="number" min="0" step="1"
                 value={wins ?? 0}
                 placeholder="0"
                 onChange={e => onChangeWins(parse(e.target.value))}/>
          <span className="wl-suffix">회</span>
        </div>
        <div className="wl-divider">:</div>
        <div className="wl-field">
          <span className="wl-field-tag" style={{color: 'var(--danger)'}}>LOSE</span>
          <input className="input mono wl-num" type="number" min="0" step="1"
                 value={losses ?? 0}
                 placeholder="0"
                 onChange={e => onChangeLosses(parse(e.target.value))}/>
          <span className="wl-suffix">회</span>
        </div>
      </div>
      <div style={{marginTop: 8, fontSize: 11, color: 'var(--text-mute)'}}>
        내전 참여 <span className="mono" style={{color: 'var(--text-dim)'}}>{matches}</span>회 (승 + 패)
      </div>
    </div>
  );
};

// 킬/데스 개별 입력 → K/D 자동 계산 + 랭크 미리보기
const KDInput = ({ label, kills, deaths, onChangeKills, onChangeDeaths }) => {
  const kd = computeKD(kills, deaths);
  const rank = kdToRank(kd);

  const parse = (v) => v === '' ? null : Math.max(0, Math.floor(Number(v)));

  return (
    <div className="kd-block">
      <div className="kd-block-head">
        <label className="label" style={{marginBottom: 0}}>{label}</label>
        <div className="row gap-2">
          <div className="kd-preview mono">
            K/D <b>{kd != null ? kd.toFixed(2) : '—'}</b>
          </div>
          <RankChip rank={rank}/>
        </div>
      </div>
      <div className="kd-inputs">
        <div className="kd-field">
          <span className="kd-field-tag" style={{color: 'var(--mint)'}}>KILL</span>
          <input className="input mono kd-num" type="number" min="0" step="1"
                 value={kills ?? ''}
                 placeholder="0"
                 onChange={e => onChangeKills(parse(e.target.value))}/>
          <span className="kd-suffix">회</span>
        </div>
        <div className="kd-divider">/</div>
        <div className="kd-field">
          <span className="kd-field-tag" style={{color: 'var(--danger)'}}>DEATH</span>
          <input className="input mono kd-num" type="number" min="0" step="1"
                 value={deaths ?? ''}
                 placeholder="0"
                 onChange={e => onChangeDeaths(parse(e.target.value))}/>
          <span className="kd-suffix">회</span>
        </div>
      </div>
    </div>
  );
};

const MemberEditor = ({ member, allMembers, onSave, onDelete, onCancel, saving }) => {
  const [draft, setDraft] = React.useState(member);
  React.useEffect(() => { setDraft(member); }, [member?.id]);

  const set = (k, v) => setDraft(d => ({...d, [k]: v}));
  const overall = calcOverall(draft);
  const matches = getMatches(draft);

  // 팀장 후보 목록 (자기 자신 제외)
  const leaderOptions = allMembers.filter(m => m.isLeader && m.id !== draft.id);

  return (
    <div className="admin-editor">
      <div className="row between mb-6">
        <div>
          <div style={{fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginBottom: 4}}>
            {draft.id?.startsWith('new-') ? '새 멤버 추가' : '멤버 편집'}
          </div>
          <h2 style={{fontFamily: 'Rajdhani, sans-serif', fontWeight: 700, fontSize: 24}}>
            {draft.name || '(이름 없음)'}
          </h2>
        </div>
        {!draft.id?.startsWith('new-') && (
          <button className="btn danger sm" onClick={() => {
            if (confirm(`"${draft.name}" 멤버를 삭제하시겠습니까?`)) onDelete(draft.id);
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
            삭제
          </button>
        )}
      </div>

      {/* 기본 정보 */}
      <div className="mb-6">
        <div style={{fontSize: 12, letterSpacing: '0.15em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 12, fontWeight: 600}}>
          기본 정보
        </div>
        <div className="form-grid">
          <div>
            <label className="label">이름</label>
            <input className="input" placeholder="멤버 이름" value={draft.name || ''} onChange={e => set('name', e.target.value)}/>
          </div>
          <div>
            <label className="label">모스트 캐릭터</label>
            <input className="input" placeholder="예: 레이서" value={draft.most || ''} onChange={e => set('most', e.target.value)}/>
          </div>
          <div style={{gridColumn: '1 / -1'}}>
            <label className="checkbox-wrap">
              <input type="checkbox" checked={!!draft.isLeader} onChange={e => set('isLeader', e.target.checked)}/>
              <div>
                <div style={{fontWeight: 600, fontSize: 14}}>팀장으로 지정</div>
                <div style={{fontSize: 12, color: 'var(--text-mute)', marginTop: 2}}>팀장은 보라색 테두리로 표시되며 팀 편성 뷰에 노출됩니다.</div>
              </div>
            </label>
          </div>
          {!draft.isLeader && (
            <div style={{gridColumn: '1 / -1'}} className="team-select-wrap">
              <label className="label">소속 팀 (팀장 지정)</label>
              <select className="select" value={draft.teamLeaderId || ''} onChange={e => set('teamLeaderId', e.target.value || null)}>
                <option value="">미배정</option>
                {leaderOptions.map(l => <option key={l.id} value={l.id}>{l.name} 팀</option>)}
              </select>
            </div>
          )}
        </div>
      </div>

      {/* 팀 전적 (승/패) */}
      <div className="mb-6">
        <div style={{fontSize: 12, letterSpacing: '0.15em', color: 'var(--accent)', textTransform: 'uppercase', marginBottom: 12, fontWeight: 600}}>
          팀 전적
        </div>
        <WinLossInput
          wins={draft.wins} losses={draft.losses}
          onChangeWins={v => set('wins', v)}
          onChangeLosses={v => set('losses', v)}/>
        {matches <= 1 && (
          <div style={{marginTop: 10, fontSize: 12, color: 'var(--warn)'}}>
            <b>배치중:</b> 2회차부터 종합 랭크가 산정됩니다.
          </div>
        )}
      </div>

      {/* 랭크 데이터 */}
      <div className="mb-6">
        <div className="row between" style={{marginBottom: 12}}>
          <div style={{fontSize: 12, letterSpacing: '0.15em', color: 'var(--accent)', textTransform: 'uppercase', fontWeight: 600}}>
            세부 랭크 데이터
          </div>
          <div style={{fontSize: 11, color: 'var(--text-mute)'}}>
            <span className="mono">K/D = 킬 ÷ 데스</span> · 랭크는 자동 산정
          </div>
        </div>
        <div className="kd-grid">
          <KDInput label="원형 경기장"
                   kills={draft.circleKills} deaths={draft.circleDeaths}
                   onChangeKills={v => set('circleKills', v)}
                   onChangeDeaths={v => set('circleDeaths', v)}/>
          <KDInput label="망자의 미궁"
                   kills={draft.mazeKills} deaths={draft.mazeDeaths}
                   onChangeKills={v => set('mazeKills', v)}
                   onChangeDeaths={v => set('mazeDeaths', v)}/>
          <KDInput label="대맵"
                   kills={draft.mapKills} deaths={draft.mapDeaths}
                   onChangeKills={v => set('mapKills', v)}
                   onChangeDeaths={v => set('mapDeaths', v)}/>
          <div className="kd-block">
            <div className="kd-block-head">
              <label className="label" style={{marginBottom: 0}}>팀워크</label>
              <div style={{fontSize: 11, color: 'var(--text-mute)'}}>어드민 지정</div>
            </div>
            <select className="select" value={draft.teamworkRank || ''} onChange={e => set('teamworkRank', e.target.value || null)}>
              <option value="">선택 안 함</option>
              {RANK_ORDER.map(r => <option key={r} value={r}>{r} 랭크</option>)}
            </select>
          </div>
        </div>
      </div>

      {/* 종합 랭크 (Read-only) */}
      <div>
        <div style={{fontSize: 12, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginBottom: 12, fontWeight: 600}}>
          자동 산정 · 수정 불가
        </div>
        <div className="readonly-rank">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{color: 'var(--text-mute)'}}>
            <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
          </svg>
          <div style={{flex: 1}}>
            <div style={{fontSize: 13, color: 'var(--text-dim)', marginBottom: 4}}>종합 랭크</div>
            <div className="lock">4개 세부 랭크 자동 합산 결과 · Read-only</div>
          </div>
          <RankChip rank={overall} size="lg"/>
        </div>
      </div>

      {/* Actions */}
      <div className="row gap-3 mt-6" style={{justifyContent: 'flex-end'}}>
        <button className="btn ghost" onClick={onCancel}>취소</button>
        <button className="btn primary" disabled={saving} onClick={() => onSave(draft)}>{saving ? '저장 중...' : '저장'}</button>
      </div>
    </div>
  );
};

const Toast = ({ message, type }) => (
  <div className={`toast ${type || ''}`}>{message}</div>
);

const AdminPage = ({ members, refreshMembers, onLogout }) => {
  const [selectedId, setSelectedId] = React.useState(members[0]?.id || null);
  const [saving, setSaving] = React.useState(false);
  const [toast, setToast] = React.useState(null);

  const showToast = (message, type) => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 2200);
  };

  const selected = selectedId?.startsWith('new-')
    ? { id: selectedId, name: '', most: '', isLeader: false, wins: 0, losses: 0,
        circleKills: null, circleDeaths: null,
        mazeKills: null, mazeDeaths: null,
        mapKills: null, mapDeaths: null,
        teamworkRank: null, teamLeaderId: null }
    : members.find(m => m.id === selectedId);

  const startNew = () => setSelectedId('new-' + Date.now());

  const save = async (draft) => {
    setSaving(true);
    try {
      if (draft.id?.startsWith('new-')) {
        const res = await Api.addMember(draft);
        await refreshMembers();
        setSelectedId(res.id);
        showToast('멤버가 추가되었습니다.', 'success');
      } else {
        await Api.updateMember(draft.id, draft);
        await refreshMembers();
        showToast('저장되었습니다.', 'success');
      }
    } catch (err) {
      showToast(err.message || '저장에 실패했습니다.', 'danger');
    } finally {
      setSaving(false);
    }
  };

  const remove = async (id) => {
    try {
      await Api.deleteMember(id);
      const next = members.filter(m => m.id !== id);
      await refreshMembers();
      setSelectedId(next[0]?.id || null);
      showToast('삭제되었습니다.', 'success');
    } catch (err) {
      showToast(err.message || '삭제에 실패했습니다.', 'danger');
    }
  };

  const handleReset = async () => {
    if (!confirm('데이터를 초기값으로 리셋합니다. 계속할까요?')) return;
    try {
      await Api.resetData();
      await refreshMembers();
      setSelectedId(null);
      showToast('초기화되었습니다.', 'success');
    } catch (err) {
      showToast(err.message || '리셋에 실패했습니다.', 'danger');
    }
  };

  const handleLogout = async () => {
    try { await Api.logout(); } catch {}
    onLogout();
  };

  return (
    <div className="container-wide">
      <div className="page-header">
        <div className="row between">
          <div>
            <div className="accent-line"/>
            <h1>어드민 패널</h1>
            <p className="sub">멤버 정보 및 랭크 데이터 관리</p>
          </div>
          <div className="row gap-2">
            <button className="btn primary sm" onClick={startNew}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
              멤버 추가
            </button>
            <button className="btn sm" onClick={handleReset}>리셋</button>
            <button className="btn ghost sm" onClick={handleLogout}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
              로그아웃
            </button>
          </div>
        </div>
      </div>

      <div className="admin-shell">
        <div className="admin-list-card">
          <div style={{padding: '8px 10px', fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', fontWeight: 600}}>
            멤버 ({members.length})
          </div>
          <div className="stack" style={{maxHeight: 'calc(100vh - 260px)', overflowY: 'auto'}}>
            {members.map(m => {
              const overall = calcOverall(m);
              return (
                <div key={m.id}
                     className={`admin-list-item ${m.isLeader ? 'leader' : ''} ${selectedId === m.id ? 'active' : ''}`}
                     onClick={() => setSelectedId(m.id)}>
                  <span className="dot"/>
                  <div style={{flex: 1, minWidth: 0}}>
                    <div style={{fontSize: 14, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{m.name}</div>
                    <div style={{fontSize: 11, color: 'var(--text-mute)'}}>{m.most} · {getMatches(m)}회</div>
                  </div>
                  <RankChip rank={overall}/>
                </div>
              );
            })}
            {selectedId?.startsWith('new-') && (
              <div className="admin-list-item active">
                <span className="dot" style={{background: 'var(--accent)'}}/>
                <div style={{flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--accent)'}}>새 멤버 추가 중...</div>
              </div>
            )}
          </div>
        </div>

        {selected ? (
          <MemberEditor
            member={selected}
            allMembers={members}
            saving={saving}
            onSave={save}
            onDelete={remove}
            onCancel={() => setSelectedId(members[0]?.id || null)}
          />
        ) : (
          <div className="admin-editor center" style={{minHeight: 300}}>
            <div style={{textAlign: 'center', color: 'var(--text-mute)'}}>
              좌측에서 멤버를 선택하거나 새로 추가하세요.
            </div>
          </div>
        )}
      </div>

      {toast && <Toast message={toast.message} type={toast.type}/>}
    </div>
  );
};

window.AdminLogin = AdminLogin;
window.AdminPage = AdminPage;