// ─── 데이터 추가 (업로드) 뷰 ───
const { useState: uUseState, useRef: uUseRef } = React;

const TYPE_ICON = { netbuy: I.db, aum: I.layers, flow: I.refresh };

function UploadView({ push, onUploaded, uploadHistory, setUploadHistory }) {
  const { DATA_TYPES } = window.BI;
  const [selType, setSelType] = uUseState(DATA_TYPES[0]);
  const [over, setOver] = uUseState(false);
  const [stage, setStage] = uUseState('idle'); // idle | mapping | uploading | done
  const [pct, setPct] = uUseState(0);
  const [fileName, setFileName] = uUseState('');
  const fileRef = uUseRef(null);

  // 데모용 매핑 (선택된 타입의 스키마 컬럼 ↔ 업로드 파일 컬럼)
  const MAPPINGS = {
    netbuy: [
      { src: 'CODE', dst: 'CODE', ok: true }, { src: '운용사', dst: '운용사', ok: true },
      { src: '대유형', dst: '대유형', ok: true }, { src: '1차분류', dst: '1차분류', ok: true },
      { src: '개인순매수', dst: '개인', ok: true }, { src: '기관순매수', dst: '기관', ok: true },
      { src: '외인순매수', dst: '외국인', ok: true }, { src: '비고', dst: '— (무시됨)', ok: 'skip' },
    ],
    aum: [
      { src: '기준일', dst: '기준일', ok: true }, { src: '운용사', dst: '운용사', ok: true },
      { src: '상품코드', dst: '상품코드', ok: true }, { src: '계좌유형', dst: '계좌유형', ok: true },
      { src: 'AUM', dst: 'AUM', ok: true }, { src: '계좌수', dst: '계좌수', ok: true },
    ],
    flow: [
      { src: '기준일', dst: '기준일', ok: true }, { src: 'CODE', dst: 'CODE', ok: true },
      { src: '설정액', dst: '설정액', ok: true }, { src: '환매액', dst: '환매액', ok: true },
      { src: '순유입', dst: '순유입', ok: true },
    ],
  };

  const pickFile = () => fileRef.current && fileRef.current.click();

  const beginUpload = (name) => {
    setFileName(name || `${selType.name}_업로드.xlsx`);
    setStage('mapping');
  };

  const confirmUpload = () => {
    setStage('uploading'); setPct(0);
    let p = 0;
    const t = setInterval(() => {
      p += Math.random() * 22 + 8;
      if (p >= 100) { p = 100; clearInterval(t); setTimeout(finish, 350); }
      setPct(Math.min(100, Math.round(p)));
    }, 180);
  };

  const finish = () => {
    const added = Math.floor(Math.random() * 400 + 900);
    const skipped = Math.floor(Math.random() * 4);
    const rec = { no: uploadHistory[0].no + 1, file: fileName, type: selType.name, added, skipped, status: 'ok', at: new Date().toISOString().slice(0, 16).replace('T', ' '), by: '김지원' };
    setUploadHistory([rec, ...uploadHistory]);
    setStage('done');
    push(`${fmtNum(added)}건이 ${selType.name}에 추가되었어요`);
    onUploaded && onUploaded(added);
    setTimeout(() => setStage('idle'), 1600);
  };

  const okCount = (MAPPINGS[selType.id] || []).filter((m) => m.ok === true).length;
  const skipCount = (MAPPINGS[selType.id] || []).filter((m) => m.ok === 'skip').length;

  const totalRows = window.BI.DATASETS.reduce((s, d) => s + d.rows, 0);

  return (
    <div className="upload-view">
      <div className="stat-row">
        <div className="stat-card"><div className="lab">전체 데이터 행</div><div className="val">{fmtNum(totalRows)}<span> rows</span></div><div className="delta pos">+1,240 오늘</div></div>
        <div className="stat-card"><div className="lab">데이터셋</div><div className="val">{window.BI.DATASETS.length}<span> 개</span></div><div className="delta" style={{ color: 'var(--ink-3)' }}>사전정의 유형</div></div>
        <div className="stat-card"><div className="lab">최근 업로드</div><div className="val" style={{ fontSize: 18 }}>오늘 09:12</div><div className="delta" style={{ color: 'var(--ink-3)' }}>순매수 데이터</div></div>
        <div className="stat-card"><div className="lab">이번 주 처리</div><div className="val">5,945<span> rows</span></div><div className="delta pos">정상 6 · 실패 1</div></div>
      </div>

      <div className="card" style={{ padding: 20, marginBottom: 22 }}>
        <h3 className="section-title">새 데이터 업로드</h3>
        <p className="section-sub">데이터 유형을 먼저 선택하세요. 유형별로 사전정의된 스키마에 맞춰 자동 검증·매핑됩니다.</p>

        <div className="type-row">
          {DATA_TYPES.map((t) => (
            <div key={t.id} className={'type-card' + (selType.id === t.id ? ' active' : '')} onClick={() => { setSelType(t); setStage('idle'); }}>
              <div className="check">{I.check}</div>
              <div className="top"><span className="ic">{TYPE_ICON[t.id]}</span><span className="nm">{t.name}</span></div>
              <div className="sc">{t.schema}</div>
            </div>
          ))}
        </div>

        {stage === 'idle' && (
          <div className={'dz' + (over ? ' over' : '')}
            onDragOver={(e) => { e.preventDefault(); setOver(true); }}
            onDragLeave={() => setOver(false)}
            onDrop={(e) => { e.preventDefault(); setOver(false); const f = e.dataTransfer.files[0]; beginUpload(f && f.name); }}>
            <div className="ic">{I.upload}</div>
            <h3>{selType.name} 파일을 끌어다 놓으세요</h3>
            <p>또는 파일을 선택하세요 · 지원 형식: {selType.ext} (최대 50MB)</p>
            <button className="btn btn-primary" onClick={pickFile} style={{ margin: '0 auto' }}>{I.file}파일 선택</button>
            <input ref={fileRef} type="file" hidden onChange={(e) => beginUpload(e.target.files[0] && e.target.files[0].name)} />
          </div>
        )}

        {stage === 'mapping' && (
          <>
            <div className="mapping">
              <div className="mapping-head">{I.check}<span>컬럼 자동 매핑 — {fileName}</span>
                <span style={{ marginLeft: 'auto', fontWeight: 500, color: 'var(--ink-3)' }}>
                  <span className="chip green" style={{ marginRight: 6 }}>매핑 {okCount}</span>
                  {skipCount > 0 && <span className="chip gray">무시 {skipCount}</span>}
                </span>
              </div>
              {(MAPPINGS[selType.id] || []).map((m, i) => (
                <div className="mapping-row" key={i}>
                  <span className="src">{m.src}</span>
                  <span className="arr">→</span>
                  <span className="dst">{m.dst}</span>
                  <span className="st">{m.ok === true ? <span className="chip green">{I.check}매핑됨</span> : <span className="chip gray">무시</span>}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
              <button className="btn btn-ghost" onClick={() => setStage('idle')}>취소</button>
              <button className="btn btn-primary" onClick={confirmUpload}>{I.upload}{fmtNum(1240)}건 가져오기</button>
            </div>
          </>
        )}

        {stage === 'uploading' && (
          <div className="up-progress">
            <span className="file-ic">{I.file}</span>
            <div className="info">
              <div className="nm">{fileName}</div>
              <div className="bar"><i style={{ width: pct + '%' }}></i></div>
            </div>
            <span className="pct">{pct}%</span>
          </div>
        )}

        {stage === 'done' && (
          <div className="up-progress" style={{ borderColor: 'var(--pos)', background: '#F3FBF7' }}>
            <span className="file-ic" style={{ background: '#E6F5EE', color: 'var(--pos)' }}>{I.check}</span>
            <div className="info"><div className="nm">업로드 완료</div><div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 3 }}>{selType.name}에 정상 반영되었습니다.</div></div>
          </div>
        )}
      </div>

      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ padding: '16px 20px 12px' }}>
          <h3 className="section-title">업로드 히스토리</h3>
          <p className="section-sub" style={{ margin: 0 }}>최근 데이터 적재 이력입니다.</p>
        </div>
        <div style={{ overflow: 'auto' }}>
          <table className="hist-table">
            <thead><tr><th>파일</th><th>데이터 유형</th><th className="num">추가</th><th className="num">스킵</th><th>상태</th><th>일시</th><th>담당자</th></tr></thead>
            <tbody>
              {uploadHistory.map((h) => (
                <tr key={h.no}>
                  <td><div className="hist-file">{I.file}{h.file}</div>{h.error && <div className="hist-err">{h.error}</div>}</td>
                  <td>{h.type}</td>
                  <td className="num">{h.added ? fmtNum(h.added) : '—'}</td>
                  <td className="num">{h.skipped || '—'}</td>
                  <td>{h.status === 'ok' ? <span className="chip green">{I.check}정상</span> : <span className="chip red">{I.alert}실패</span>}</td>
                  <td style={{ whiteSpace: 'nowrap', color: 'var(--ink-3)' }}>{h.at}</td>
                  <td>{h.by}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.UploadView = UploadView;