/* Admin — 다운로드 자료 관리 (목록 + 콘텐츠 1건에 대해 가이드북/월간/주간/일간 파일 연결) */

function emptyDownloadsForm() {
  return DOWNLOAD_KINDS.map((k) => ({ kind: k, file_url: '', file_label: '' }));
}

/* shared row editor: URL/표시이름 입력 + 실제 파일 업로드 버튼 (Supabase Storage) */
function DownloadsFieldsEditor({ downloads, setDownloads }) {
  const [uploading, setUploading] = React.useState({});
  const fileInputs = React.useRef({});
  const update = (kind, field, value) => setDownloads((prev) => prev.map((d) => (d.kind === kind ? { ...d, [field]: value } : d)));

  const pickFile = async (kind, file) => {
    setUploading((u) => ({ ...u, [kind]: true }));
    const result = await uploadDownloadFile(kind, file);
    setUploading((u) => ({ ...u, [kind]: false }));
    if (result) {
      update(kind, 'file_url', result.url);
      update(kind, 'file_label', result.label);
    } else {
      alert('파일 업로드에 실패했습니다.');
    }
  };

  return (
    <React.Fragment>
      {downloads.map((d) => (
        <div key={d.kind} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 1fr auto', gap: 10, marginBottom: 10, alignItems: 'center' }}>
          <span style={{ fontSize: 13, fontWeight: 800, color: 'var(--muted)' }}>{d.kind}</span>
          <input className="admin-input" style={{ width: '100%' }} type="text" value={d.file_url}
                 placeholder="파일 URL (PDF 등)" onChange={(e) => update(d.kind, 'file_url', e.target.value)} />
          <input className="admin-input" style={{ width: '100%' }} type="text" value={d.file_label}
                 placeholder="표시 이름 (예: 3월_가이드북.pdf)" onChange={(e) => update(d.kind, 'file_label', e.target.value)} />
          <div>
            <input type="file" style={{ display: 'none' }} ref={(el) => { fileInputs.current[d.kind] = el; }}
                   onChange={(e) => {
                     const file = e.target.files && e.target.files[0];
                     e.target.value = '';
                     if (file) pickFile(d.kind, file);
                   }} />
            <button type="button" className="btn btn-ghost btn-sm" disabled={!!uploading[d.kind]}
                    onClick={() => fileInputs.current[d.kind] && fileInputs.current[d.kind].click()}>
              {uploading[d.kind] ? '업로드 중…' : '파일 업로드'}
            </button>
          </div>
        </div>
      ))}
    </React.Fragment>
  );
}

function DownloadsListScreen({ go }) {
  const [rows, setRows] = React.useState(null);
  const [counts, setCounts] = React.useState({});
  const [q, setQ] = React.useState('');

  const reload = React.useCallback(async () => {
    const contents = await fetchContents({ type: '수업지원자료' });
    setRows(contents);
    const { data, error } = await window.supabaseClient.from('content_downloads').select('content_id');
    if (error) { console.error(error); return; }
    const map = {};
    (data || []).forEach((d) => { map[d.content_id] = (map[d.content_id] || 0) + 1; });
    setCounts(map);
  }, []);
  React.useEffect(() => { reload(); }, [reload]);

  const filtered = (rows || []).filter((c) => c.title.includes(q) || (c.step || '').includes(q) || (c.topic || '').includes(q));

  const editTopic = (id, topic) => setRows((prev) => prev.map((r) => (r.id === id ? { ...r, topic } : r)));
  const saveTopic = async (id, topic) => {
    const ok = await updateContentTopic(id, topic);
    if (!ok) { alert('주제 저장에 실패했습니다.'); reload(); }
  };

  return (
    <div>
      <div className="admin-topbar">
        <div><h1>다운로드 자료 관리</h1><p>수업지원자료별 가이드북 · 월간 · 주간 · 일간 파일을 등록합니다.</p></div>
      </div>

      <div className="admin-panel">
        <div className="admin-panel-head">
          <h3>콘텐츠 목록 ({filtered.length})</h3>
          <div className="admin-toolbar">
            <input className="admin-input" placeholder="제목·단계·주제 검색" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
        </div>
        {rows === null ? (
          <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((r) => {
                const n = counts[r.id] || 0;
                return (
                  <tr key={r.id}>
                    <td><b>{r.title}</b></td>
                    <td>{r.step || '-'}</td>
                    <td>
                      {r.track && (
                        <span className="badge" style={{ background: r.track === '모모' ? 'color-mix(in srgb, #56abe6 16%, #fff)' : 'color-mix(in srgb, #82c247 16%, #fff)', color: r.track === '모모' ? '#357fc4' : '#4f8a1f' }}>
                          {r.track === '모모' ? 'STEP1 · 모모' : 'STEP2 · 테리'}
                        </span>
                      )}
                    </td>
                    <td>
                      <input type="text" className="admin-input" value={r.topic}
                             onChange={(e) => editTopic(r.id, e.target.value)}
                             onBlur={(e) => saveTopic(r.id, e.target.value.trim())} />
                    </td>
                    <td>
                      <span style={{
                        fontSize: 12.5, fontWeight: 800, padding: '4px 10px', borderRadius: 999,
                        background: n > 0 ? 'var(--primary-tint)' : 'var(--line)',
                        color: n > 0 ? 'var(--primary-strong)' : 'var(--muted)',
                      }}>{n}/4</span>
                    </td>
                    <td>
                      <button className="btn btn-ghost btn-sm" onClick={() => go('downloads', r.id)}>
                        <Ico d={ICONS.download} size={14}/> 관리
                      </button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

function ContentDownloadsScreen({ contentId, go }) {
  const [content, setContent] = React.useState(undefined); // undefined = loading, null = not found
  const [title, setTitle] = React.useState('');
  const [downloads, setDownloads] = React.useState(emptyDownloadsForm);
  const [saving, setSaving] = React.useState(false);
  const [saved, setSaved] = React.useState(false);
  const [error, setError] = React.useState('');

  React.useEffect(() => {
    let cancelled = false;
    setContent(undefined);
    setDownloads(emptyDownloadsForm());
    fetchContentById(contentId).then((c) => { if (!cancelled) { setContent(c); setTitle(c ? c.title : ''); } });
    fetchContentDownloads(contentId).then((rows) => {
      if (cancelled) return;
      setDownloads(DOWNLOAD_KINDS.map((k) => rows.find((r) => r.kind === k) || { kind: k, file_url: '', file_label: '' }));
    });
    return () => { cancelled = true; };
  }, [contentId]);

  const save = async () => {
    setError('');
    if (!title.trim()) { setError('제목을 입력해 주세요.'); return; }
    setSaving(true);
    setSaved(false);
    const [titleOk, downloadsOk] = await Promise.all([
      title.trim() !== content.title ? updateContentTitle(contentId, title.trim()) : Promise.resolve(true),
      saveContentDownloads(contentId, downloads),
    ]);
    setSaving(false);
    if (titleOk && downloadsOk) {
      setContent((c) => ({ ...c, title: title.trim() }));
      setSaved(true);
      setTimeout(() => setSaved(false), 2500);
    } else {
      setError('저장에 실패했습니다.');
    }
  };

  if (content === undefined) return <div className="admin-panel">불러오는 중…</div>;
  if (content === null) {
    return (
      <div className="admin-panel">
        콘텐츠를 찾을 수 없습니다.
        <div style={{ marginTop: 12 }}><button className="btn btn-ghost" onClick={() => go('dashboard')}>대시보드로</button></div>
      </div>
    );
  }

  return (
    <div>
      <div className="admin-topbar">
        <div>
          <h1>다운로드 자료 관리</h1>
          <p>{content.title}{content.step ? ' · ' + content.step : ''} 콘텐츠에 연결할 파일을 등록합니다.</p>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-ghost" onClick={() => go('downloads-list')}>목록으로</button>
          <button className="btn btn-primary" disabled={saving} onClick={save}>{saving ? '저장 중…' : '저장하기'}</button>
        </div>
      </div>

      {saved && (
        <div className="admin-panel" style={{ background: 'var(--primary-tint)', color: 'var(--primary-strong)', fontWeight: 800, textAlign: 'center' }}>
          ✅ 저장되었습니다.
        </div>
      )}

      <div className="admin-panel">
        <div className="admin-panel-head">
          <h3>콘텐츠 정보</h3>
        </div>
        <div className="form-field" style={{ marginBottom: 0 }}>
          <label>제목</label>
          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
        </div>
        {error && <p style={{ color: '#c0392b', fontSize: 13, fontWeight: 700, marginTop: 10 }}>{error}</p>}
      </div>

      <div className="admin-panel">
        <div className="admin-panel-head">
          <h3>다운로드 파일 4종</h3>
          <span className="hint">URL을 비워두면 사이트에서 해당 항목이 비활성화돼요</span>
        </div>
        <DownloadsFieldsEditor downloads={downloads} setDownloads={setDownloads} />
      </div>
    </div>
  );
}

Object.assign(window, { DownloadsFieldsEditor, DownloadsListScreen, ContentDownloadsScreen });