/* Admin — 회원(사이트 로그인) 관리 */

function genPassword() {
  const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#%^&*';
  const arr = new Uint32Array(20);
  crypto.getRandomValues(arr);
  let out = '';
  for (let i = 0; i < 20; i++) out += alphabet[arr[i] % alphabet.length];
  return out;
}

const ACCOUNT_TYPES = [
  { value: 'site_admin', label: 'Admin', emphasize: true },
  { value: 'admin_type', label: '관리자용' },
  { value: 'teacher_age1', label: '선생님용 (만 1세)' },
  { value: 'teacher_age2', label: '선생님용 (만 2세)' },
  { value: 'parent_age1', label: '부모용 (만 1세)' },
  { value: 'parent_age2', label: '부모용 (만 2세)' },
];
const EMPHASIS_COLOR = '#e5484d';

function emptyForm() {
  return { email: '', password: '', name: '', org_name: '', org_address: '', org_phone: '', account_types: ['parent_age1'] };
}

function MembersScreen() {
  const [members, setMembers] = React.useState(null);
  const [form, setForm] = React.useState(emptyForm);
  const [editingId, setEditingId] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const [created, setCreated] = React.useState(null);
  const [error, setError] = React.useState('');
  const [q, setQ] = React.useState('');
  const [typeFilter, setTypeFilter] = React.useState('');

  const reload = React.useCallback(() => { listMembers().then(setMembers); }, []);
  React.useEffect(() => { reload(); }, [reload]);

  const hasType = (m, ...types) => (m.account_types || []).some((t) => types.includes(t));
  const stats = React.useMemo(() => {
    const list = members || [];
    return {
      total: list.length,
      admin: list.filter((m) => hasType(m, 'admin_type')).length,
      teacher: list.filter((m) => hasType(m, 'teacher_age1', 'teacher_age2')).length,
      parent: list.filter((m) => hasType(m, 'parent_age1', 'parent_age2')).length,
    };
  }, [members]);

  const filtered = React.useMemo(() => {
    const list = members || [];
    const qq = q.trim().toLowerCase();
    return list.filter((m) => {
      const matchesType = !typeFilter || hasType(m, typeFilter);
      const matchesQ = !qq || [m.name, m.email, m.org_name].some((s) => (s || '').toLowerCase().includes(qq));
      return matchesType && matchesQ;
    });
  }, [members, q, typeFilter]);

  const setField = (field, value) => setForm((f) => ({ ...f, [field]: value }));
  const toggleType = (value) => {
    const willCheck = !form.account_types.includes(value);
    if (value === 'site_admin' && willCheck) {
      const ok = window.confirm('Admin 권한을 부여하면 이 회원이 admin.html 관리자 페이지 전체에 접근할 수 있게 됩니다. 계속하시겠습니까?');
      if (!ok) return;
    }
    setForm((f) => ({
      ...f,
      account_types: willCheck ? [...f.account_types, value] : f.account_types.filter((v) => v !== value),
    }));
  };

  const startEdit = (m) => {
    setEditingId(m.id);
    setCreated(null);
    setError('');
    setForm({
      email: m.email, password: '', name: m.name, org_name: m.org_name,
      org_address: m.org_address, org_phone: m.org_phone,
      account_types: (m.account_types && m.account_types.length) ? m.account_types : ['parent_age1'],
    });
  };

  const cancelEdit = () => {
    setEditingId(null);
    setForm(emptyForm());
    setError('');
  };

  const save = async () => {
    setError('');
    if (!editingId && !form.email.trim()) { setError('이메일(아이디)을 입력해 주세요.'); return; }
    if (!form.account_types.length) { setError('계정 권한을 하나 이상 선택해 주세요.'); return; }
    setSaving(true);

    if (editingId) {
      const ok = await updateMember(editingId, {
        name: form.name, org_name: form.org_name, org_address: form.org_address,
        org_phone: form.org_phone, account_types: form.account_types,
        ...(form.password.trim() ? { password: form.password.trim() } : {}),
      });
      setSaving(false);
      if (ok) { cancelEdit(); reload(); }
      else setError('수정에 실패했습니다.');
      return;
    }

    const password = form.password.trim() || genPassword();
    const member = await createMember({
      email: form.email.trim(), password,
      name: form.name, org_name: form.org_name, org_address: form.org_address,
      org_phone: form.org_phone, account_types: form.account_types,
    });
    setSaving(false);
    if (member) {
      setCreated({ email: member.email, password });
      setForm(emptyForm());
      reload();
    } else {
      setError('회원 생성에 실패했습니다. 이미 등록된 이메일인지 확인해 주세요.');
    }
  };

  return (
    <div>
      <div className="admin-topbar">
        <div><h1>회원 관리</h1><p>사이트에 로그인할 수 있는 회원 계정을 관리합니다.</p></div>
      </div>

      <div className="admin-stats">
        <div className="admin-stat"><div className="lbl">전체 회원</div><div className="val">{stats.total}</div></div>
        <div className="admin-stat"><div className="lbl">관리자용</div><div className="val">{stats.admin}</div></div>
        <div className="admin-stat"><div className="lbl">선생님용</div><div className="val">{stats.teacher}</div><div className="delta" style={{ color: 'var(--muted)' }}>만 1세 · 만 2세 합산</div></div>
        <div className="admin-stat"><div className="lbl">부모용</div><div className="val">{stats.parent}</div><div className="delta" style={{ color: 'var(--muted)' }}>만 1세 · 만 2세 합산</div></div>
      </div>

      {created && (
        <div className="admin-panel" style={{ background: 'var(--primary-tint)', color: 'var(--primary-strong)' }}>
          <b>✅ 계정이 생성되었습니다.</b> 아래 정보를 복사해 회원에게 전달해 주세요 (다시 표시되지 않습니다).
          <div style={{ marginTop: 10, fontFamily: 'ui-monospace, monospace', fontSize: 14, background: 'var(--surface)', borderRadius: 10, padding: '10px 14px', color: 'var(--ink)' }}>
            이메일: {created.email}<br/>
            비밀번호: {created.password}
          </div>
        </div>
      )}

      <div className="admin-panel">
        <div className="admin-panel-head">
          <h3>{editingId ? '회원 정보 수정' : '새 회원 추가'}</h3>
          {editingId && <span className="hint">{form.email}</span>}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <div className="form-field">
            <label>이메일 (아이디)</label>
            <input type="email" placeholder="member@example.com" value={form.email} disabled={!!editingId}
                   onChange={(e) => setField('email', e.target.value)} />
          </div>
          <div className="form-field">
            <label>비밀번호 <span className="hint">{editingId ? '변경 시에만 입력' : '비워두면 자동 생성'}</span></label>
            <input type="text" placeholder={editingId ? '변경하지 않으려면 비워두세요' : '비워두면 자동 생성됩니다'}
                   value={form.password} onChange={(e) => setField('password', e.target.value)} />
          </div>
          <div className="form-field">
            <label>이름</label>
            <input type="text" placeholder="홍길동" value={form.name} onChange={(e) => setField('name', e.target.value)} />
          </div>
          <div className="form-field">
            <label>기관명</label>
            <input type="text" placeholder="모모테리 어린이집" value={form.org_name} onChange={(e) => setField('org_name', e.target.value)} />
          </div>
          <div className="form-field">
            <label>기관 연락처</label>
            <input type="text" placeholder="02-1234-5678" value={form.org_phone} onChange={(e) => setField('org_phone', e.target.value)} />
          </div>
          <div className="form-field">
            <label>기관 주소</label>
            <input type="text" placeholder="서울시 강남구 ..." value={form.org_address} onChange={(e) => setField('org_address', e.target.value)} />
          </div>
          <div className="form-field" style={{ gridColumn: '1 / -1' }}>
            <label>계정 권한 <span className="hint">중복 선택 가능</span></label>
            <div className="pill-select">
              {ACCOUNT_TYPES.map((t) => {
                const checked = form.account_types.includes(t.value);
                const emphasize = !!t.emphasize;
                return (
                  <button key={t.value} type="button" className={checked ? 'active' : ''} onClick={() => toggleType(t.value)}
                          style={{
                            display: 'inline-flex', alignItems: 'center', gap: 7,
                            ...(emphasize ? {
                              border: '1.5px solid ' + EMPHASIS_COLOR,
                              background: checked ? EMPHASIS_COLOR : 'transparent',
                              color: checked ? '#fff' : EMPHASIS_COLOR,
                            } : {}),
                          }}>
                    <span style={{
                      width: 15, height: 15, borderRadius: 4, flex: 'none', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      border: '1.5px solid ' + (checked ? '#fff' : (emphasize ? EMPHASIS_COLOR : 'var(--line)')),
                      background: checked ? 'rgba(255,255,255,.25)' : 'transparent',
                    }}>
                      {checked && (
                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                      )}
                    </span>
                    {t.label}
                  </button>
                );
              })}
            </div>
          </div>
        </div>

        {error && <p style={{ color: '#c0392b', fontSize: 13, fontWeight: 700, marginTop: 4 }}>{error}</p>}

        <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
          <button className="btn btn-primary" disabled={saving} onClick={save}>
            {saving ? '저장 중…' : editingId ? '수정 완료' : '+ 회원 추가'}
          </button>
          {editingId && <button className="btn btn-ghost" onClick={cancelEdit}>취소</button>}
        </div>
      </div>

      <div className="admin-panel">
        <div className="admin-panel-head">
          <h3>회원 목록{members ? ` (${filtered.length}/${members.length})` : ''}</h3>
          <div className="admin-toolbar">
            <input className="admin-input" placeholder="이름·이메일·기관 검색" value={q} onChange={(e) => setQ(e.target.value)} />
            <select className="admin-select" value={typeFilter} onChange={(e) => setTypeFilter(e.target.value)}>
              <option value="">전체 권한</option>
              {ACCOUNT_TYPES.map((t) => (<option key={t.value} value={t.value}>{t.label}</option>))}
            </select>
          </div>
        </div>
        {members === null ? (
          <p style={{ color: 'var(--muted)', fontSize: 14 }}>불러오는 중…</p>
        ) : members.length === 0 ? (
          <p style={{ color: 'var(--muted)', fontSize: 14 }}>등록된 회원이 없습니다.</p>
        ) : filtered.length === 0 ? (
          <p style={{ color: 'var(--muted)', fontSize: 14, padding: '16px 0' }}>조건에 맞는 회원이 없습니다.</p>
        ) : (
          <table className="admin-table">
            <thead><tr><th>이름</th><th>이메일</th><th>권한</th><th>기관명</th><th>가입일</th><th></th></tr></thead>
            <tbody>
              {filtered.map((m) => (
                <tr key={m.id}>
                  <td><b>{m.name || '-'}</b></td>
                  <td>{m.email}</td>
                  <td>
                    {(m.account_types && m.account_types.length) ? (
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                        {m.account_types.map((v) => {
                          const t = ACCOUNT_TYPES.find((x) => x.value === v) || { label: v };
                          const emphasize = !!t.emphasize;
                          return (
                            <span key={v} style={{
                              fontSize: 11.5, fontWeight: 800, padding: '3px 8px', borderRadius: 999,
                              border: '1.5px solid ' + (emphasize ? EMPHASIS_COLOR : 'var(--line)'),
                              color: emphasize ? EMPHASIS_COLOR : 'var(--muted)',
                              background: emphasize ? 'rgba(229,72,77,.08)' : 'transparent',
                            }}>{t.label}</span>
                          );
                        })}
                      </div>
                    ) : '-'}
                  </td>
                  <td>{m.org_name || '-'}</td>
                  <td style={{ color: 'var(--muted)' }}>{String(m.created_at).slice(0, 10)}</td>
                  <td>
                    <div className="row-actions">
                      <button className="icon-btn" onClick={() => startEdit(m)}><Ico d={ICONS.edit} size={15}/></button>
                      <button className="icon-btn" onClick={async () => { if (await deleteMember(m.id)) reload(); }}><Ico d={ICONS.trash} size={15}/></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { MembersScreen });