// corp-docs.jsx — 법인 문서함 (Corporate Documents Cabinet)
// design handoff (claude.ai/design 2026-05-05) 의 corp-docs.jsx port.
// Phase E2 (2026-05-07) — Paperless 실연동 + drawer 메타데이터 편집 UI 추가.
// PUT /api/corp-docs/{paperlessId}/meta endpoint 호출 후 window.location.reload().

const { useState, useMemo } = React;

const CORP_DOCS = (window.__CORP_DOCS_DATA__ && window.__CORP_DOCS_DATA__.documents) || [];
const ACCESS_HISTORY = (window.__CORP_DOCS_DATA__ && window.__CORP_DOCS_DATA__.accessHistory) || [];
const SITE_TITLE = (window.__CORP_DOCS_DATA__ && window.__CORP_DOCS_DATA__.siteTitle) || '결재일보';
const TODAY_LABEL = (window.__CORP_DOCS_DATA__ && window.__CORP_DOCS_DATA__.todayLabel) || '';

// ─── CSRF + PUT helper (admin.jsx 패턴 일관) ───
const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

async function putMeta(paperlessId, payload) {
  const res = await window.fetch(`/api/corp-docs/${paperlessId}/meta`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': CSRF_TOKEN,
    },
    body: JSON.stringify(payload),
  });
  if (!res.ok) {
    const err = await res.json().catch(() => ({}));
    const error = new Error(err.error || `PUT 실패 (${res.status})`);
    error.status = res.status;
    throw error;
  }
  return res.json();
}

// CorpDocument.Id = "paperless-{int}" (PaperlessDocumentRegistry 매핑) →
// PUT endpoint 의 {paperlessDocumentId:int} 로 변환.
function extractPaperlessId(docId) {
  const m = /^paperless-(\d+)$/.exec(docId || '');
  return m ? Number(m[1]) : null;
}

const DOC_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "showAccessLog": true
}/*EDITMODE-END*/;

const STATUS_LABEL = {
  verified: { label: '유효', tone: 'positive' },
  expiring: { label: '만료 임박', tone: 'urgent' },
  expired:  { label: '만료', tone: 'negative' },
  missing:  { label: '미등록', tone: 'neutral' },
};

function StatusBadge({ status }) {
  const cfg = STATUS_LABEL[status] || STATUS_LABEL.missing;
  return <span className={`cd-badge cd-badge-${cfg.tone}`}>{cfg.label}</span>;
}

function DocMasthead() {
  return (
    <header className="cd-masthead">
      <div className="cd-mast-top">
        <a href="/" className="cd-back">← {SITE_TITLE}</a>
        <span className="cd-mast-rule" />
        <span className="cd-mast-meta">附錄 · 庶務</span>
        <span className="cd-mast-rule" />
        <span className="cd-mast-meta">{TODAY_LABEL}</span>
      </div>
      <div className="cd-title-row">
        <h1 className="cd-title">법&nbsp;&nbsp;인&nbsp;&nbsp;문&nbsp;&nbsp;서&nbsp;&nbsp;함</h1>
      </div>
      <div className="cd-mast-bot">
        <span>CORPORATE · 文書庫</span>
        <span className="cd-mast-motto">「중요 문서는 한 곳에. 결재는 본보(本報)로.」</span>
        <span>paperless.kr 연동</span>
      </div>
    </header>
  );
}

function DocCard({ doc, onSelect, isSelected }) {
  const cfg = STATUS_LABEL[doc.status] || STATUS_LABEL.missing;
  return (
    <article
      className={`cd-card ${isSelected ? 'is-selected' : ''} cd-card-${cfg.tone}`}
      onClick={() => onSelect(doc.id)}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelect(doc.id); } }}
    >
      <div className="cd-card-head">
        <div className="cd-seal">{doc.seal}</div>
        <div className="cd-card-id">
          <div className="cd-code">{doc.code} · {doc.category}</div>
          <div className="cd-name">{doc.name}</div>
          <div className="cd-name-en">{doc.nameEn}</div>
        </div>
        <StatusBadge status={doc.status} />
      </div>
      <dl className="cd-meta-list">
        <div>
          <dt>발급</dt>
          <dd>{doc.issuer}</dd>
        </div>
        <div>
          <dt>발급일</dt>
          <dd>{doc.issued || '—'}</dd>
        </div>
        {doc.expires && (
          <div>
            <dt>만료</dt>
            <dd className={doc.status === 'expired' || doc.status === 'expiring' ? 'cd-warn' : ''}>{doc.expires}</dd>
          </div>
        )}
      </dl>
      <footer className="cd-card-foot">
        <span className={`cd-pl ${doc.paperless.connected ? 'is-on' : 'is-off'}`}>
          <span className="cd-pl-dot" />
          {doc.paperless.connected ? 'paperless 연동' : '미연동'}
        </span>
        <span className="cd-files">파일 {doc.files}</span>
      </footer>
    </article>
  );
}

function MetaEditor({ doc, onCancel }) {
  // 7 fields (Q11 lock-in 6 + Phase E3 §4.4 Slug 1) — 기존 doc 값 default. 빈 문자열 = "삭제 의도"로 백엔드 nullable upsert.
  const [draft, setDraft] = useState({
    code: doc.code ?? '',
    nameEn: doc.nameEn ?? '',
    category: doc.category ?? '',
    issuer: doc.issuer ?? '',
    note: doc.note ?? '',
    seal: doc.seal ?? '',
    slug: doc.slug ?? '',
  });
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState(null);

  const set = (key) => (e) => setDraft(d => ({ ...d, [key]: e.target.value }));

  const onSave = async () => {
    const paperlessId = extractPaperlessId(doc.id);
    if (paperlessId == null) {
      setSaveError('paperless 문서 ID를 추출할 수 없습니다.');
      return;
    }
    setSaving(true);
    setSaveError(null);
    try {
      await putMeta(paperlessId, {
        code: draft.code || null,
        nameEn: draft.nameEn || null,
        category: draft.category || null,
        issuer: draft.issuer || null,
        note: draft.note || null,
        seal: draft.seal || null,
        slug: draft.slug || null,
      });
      // pessimistic update — 단순성 + 정확성 (status/source 등 server-side 매핑 필드 새로 fetch).
      window.location.reload();
    } catch (e) {
      setSaveError(e.message || '저장 실패');
      setSaving(false);
    }
  };

  return (
    <div className="cd-detail-section cd-meta-edit">
      <h3>메타데이터 편집</h3>
      {saveError && <div className="cd-meta-err">⚠ {saveError}</div>}
      <div className="cd-reg-row">
        <div className="cd-reg-field">
          <label>분류 코드 (code)</label>
          <input
            type="text"
            maxLength={32}
            value={draft.code}
            onChange={set('code')}
            placeholder="예: BIZ-LIC"
          />
        </div>
        <div className="cd-reg-field">
          <label>URL slug (slug)</label>
          <input
            type="text"
            maxLength={64}
            value={draft.slug}
            onChange={set('slug')}
            placeholder="biz-license, bank-book 등 URL slug"
          />
        </div>
      </div>
      <div className="cd-reg-field">
        <label>분류 (category)</label>
        <input
          type="text"
          maxLength={64}
          value={draft.category}
          onChange={set('category')}
          placeholder="예: 사업자"
        />
      </div>
      <div className="cd-reg-field">
        <label>영문명 (nameEn)</label>
        <input
          type="text"
          maxLength={256}
          value={draft.nameEn}
          onChange={set('nameEn')}
          placeholder="예: Business Registration Certificate"
        />
      </div>
      <div className="cd-reg-field">
        <label>발급기관 (issuer)</label>
        <input
          type="text"
          maxLength={256}
          value={draft.issuer}
          onChange={set('issuer')}
          placeholder="예: 국세청"
        />
      </div>
      <div className="cd-reg-row">
        <div className="cd-reg-field" style={{ flex: 1 }}>
          <label>비고 (note)</label>
          <textarea
            maxLength={1024}
            rows={3}
            value={draft.note}
            onChange={set('note')}
            placeholder="자유 메모 (최대 1024자)"
          />
        </div>
        <div className="cd-reg-field cd-meta-seal">
          <label>인장 (seal)</label>
          <input
            type="text"
            maxLength={4}
            value={draft.seal}
            onChange={set('seal')}
            placeholder="예: 印"
          />
        </div>
      </div>
      <div className="cd-meta-edit-foot">
        <button className="cd-btn cd-btn-ghost" type="button" onClick={onCancel} disabled={saving}>
          취소
        </button>
        <button className="cd-btn cd-btn-primary" type="button" onClick={onSave} disabled={saving}>
          {saving ? '저장 중…' : '저장'}
        </button>
      </div>
    </div>
  );
}

function DocDetail({ doc, showLog }) {
  const [editingMeta, setEditingMeta] = useState(false);

  // 선택된 doc 이 바뀌면 편집 모드 자동 종료 (다른 문서 클릭 시 폼 닫힘).
  React.useEffect(() => {
    setEditingMeta(false);
  }, [doc?.id]);

  if (!doc) {
    return (
      <aside className="cd-detail cd-detail-empty">
        <div className="cd-empty-mark">文</div>
        <p className="cd-empty-msg">좌측에서 문서를 선택하세요.</p>
        <p className="cd-empty-sub">중요 문서는 paperless.kr 와 자동 동기화되며, 결재 시 AI가 자동으로 첨부합니다.</p>
      </aside>
    );
  }
  const canEditMeta = extractPaperlessId(doc.id) != null;
  return (
    <aside className="cd-detail">
      <div className="cd-detail-head">
        <div className="cd-detail-kicker">{doc.code}</div>
        <h2 className="cd-detail-title">{doc.name}</h2>
        <div className="cd-detail-en">{doc.nameEn}</div>
      </div>
      <dl className="cd-detail-grid">
        <div><dt>분류</dt><dd>{doc.category}</dd></div>
        <div><dt>상태</dt><dd><StatusBadge status={doc.status} /></dd></div>
        <div><dt>발급기관</dt><dd>{doc.issuer}</dd></div>
        <div><dt>발급일</dt><dd>{doc.issued || '—'}</dd></div>
        <div><dt>만료일</dt><dd>{doc.expires || '없음'}</dd></div>
        <div><dt>파일 수</dt><dd>{doc.files} 부</dd></div>
      </dl>

      <div className="cd-detail-section">
        <h3>paperless.kr 연동</h3>
        <div className="cd-pl-card">
          <div className="cd-pl-row">
            <span className="cd-pl-lbl">상태</span>
            <span className={`cd-pl ${doc.paperless.connected ? 'is-on' : 'is-off'}`}>
              <span className="cd-pl-dot" />
              {doc.paperless.connected ? '연동됨' : '미연동'}
            </span>
          </div>
          {doc.paperless.connected && (
            <>
              <div className="cd-pl-row">
                <span className="cd-pl-lbl">최근 동기화</span>
                <span className="cd-pl-val">{doc.paperless.lastSync}</span>
              </div>
              <div className="cd-pl-row">
                <span className="cd-pl-lbl">출처</span>
                <span className="cd-pl-val">{doc.paperless.source}</span>
              </div>
            </>
          )}
        </div>
      </div>

      <div className="cd-detail-section">
        <h3>비고</h3>
        <p className="cd-note">{doc.note}</p>
      </div>

      {showLog && (
        <div className="cd-detail-section">
          <h3>최근 사용 이력</h3>
          <p className="cd-log">{doc.accessLog}</p>
        </div>
      )}

      {editingMeta && <MetaEditor doc={doc} onCancel={() => setEditingMeta(false)} />}

      <div className="cd-detail-actions">
        <button className="cd-btn cd-btn-ghost">미리보기</button>
        <button className="cd-btn cd-btn-ghost">다운로드</button>
        {canEditMeta && !editingMeta && (
          <button
            className="cd-btn cd-btn-ghost"
            type="button"
            onClick={() => setEditingMeta(true)}
          >
            메타데이터 편집
          </button>
        )}
        <button className="cd-btn cd-btn-primary">새 파일 등록</button>
      </div>
    </aside>
  );
}

function AccessHistory() {
  return (
    <section className="cd-history">
      <div className="cd-history-head">
        <h3>최근 30일 사용 이력</h3>
        <span className="cd-history-meta">총 {ACCESS_HISTORY.length}건 · AI 자동 첨부 포함</span>
      </div>
      <table className="cd-history-table">
        <thead>
          <tr>
            <th>일시</th>
            <th>요청자</th>
            <th>문서</th>
            <th>사용 목적</th>
          </tr>
        </thead>
        <tbody>
          {ACCESS_HISTORY.map((a, i) => (
            <tr key={i}>
              <td className="cd-mono">{a.timestamp}</td>
              <td>{a.actor}</td>
              <td className="cd-doc-cell">{a.document}</td>
              <td className="cd-purpose">{a.purpose}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  );
}

function RegisterPanel({ onClose }) {
  return (
    <div className="cd-reg-back" onClick={onClose}>
      <div className="cd-reg" onClick={(e) => e.stopPropagation()}>
        <header className="cd-reg-head">
          <div>
            <div className="cd-reg-kicker">登 · 錄</div>
            <h2 className="cd-reg-title">새 문서 등록</h2>
          </div>
          <button className="cd-reg-x" onClick={onClose}>✕</button>
        </header>
        <div className="cd-reg-body">
          <div className="cd-reg-field">
            <label>문서 종류</label>
            <select>
              <option>사업자 등록증</option>
              <option>통장 사본</option>
              <option>대표 신분증 사본</option>
              <option>인감 증명서</option>
              <option>납세 증명서</option>
              <option>법인 등기부등본</option>
              <option>기타</option>
            </select>
          </div>
          <div className="cd-reg-row">
            <div className="cd-reg-field">
              <label>발급일</label>
              <input type="date" defaultValue={(window.__CORP_DOCS_DATA__ && window.__CORP_DOCS_DATA__.todayIso) || ''} />
            </div>
            <div className="cd-reg-field">
              <label>만료일 (선택)</label>
              <input type="date" />
            </div>
          </div>
          <div className="cd-reg-field">
            <label>발급기관</label>
            <input type="text" placeholder="예: 국세청, 신한은행, 동주민센터" />
          </div>
          <div className="cd-reg-drop">
            <div className="cd-reg-drop-mark">⇪</div>
            <div className="cd-reg-drop-text">
              <strong>파일을 끌어 놓거나 클릭하여 업로드</strong>
              <span>PDF, JPG, PNG · 최대 20MB · OCR 자동 처리됨</span>
            </div>
          </div>
          <label className="cd-reg-check">
            <input type="checkbox" defaultChecked />
            <span>paperless.kr 로 자동 백업 및 향후 갱신본 자동 수신</span>
          </label>
          <label className="cd-reg-check">
            <input type="checkbox" defaultChecked />
            <span>주민번호·계좌번호 등 개인정보 자동 마스킹</span>
          </label>
        </div>
        <footer className="cd-reg-foot">
          <button className="cd-btn cd-btn-ghost" onClick={onClose}>취소</button>
          <button className="cd-btn cd-btn-primary" onClick={onClose}>등록</button>
        </footer>
      </div>
    </div>
  );
}

function CorpDocs() {
  const [tweaks, setTweak] = useTweaks(DOC_TWEAK_DEFAULTS);
  const [filter, setFilter] = useState('all');
  const [selected, setSelected] = useState(CORP_DOCS.length > 0 ? CORP_DOCS[0].id : null);
  const [registerOpen, setRegisterOpen] = useState(false);

  React.useEffect(() => {
    document.body.dataset.theme = tweaks.dark ? 'dark' : 'light';
    document.body.classList.add('gazette-body');
    return () => document.body.classList.remove('gazette-body');
  }, [tweaks.dark]);

  const filtered = useMemo(() => {
    if (filter === 'all') return CORP_DOCS;
    if (filter === 'attention') return CORP_DOCS.filter(d => d.status === 'expired' || d.status === 'expiring' || !d.paperless.connected);
    return CORP_DOCS.filter(d => d.category === filter);
  }, [filter]);

  const doc = CORP_DOCS.find(d => d.id === selected);

  const counts = {
    all: CORP_DOCS.length,
    attention: CORP_DOCS.filter(d => d.status === 'expired' || d.status === 'expiring' || !d.paperless.connected).length,
  };

  return (
    <div className="gazette">
      <div className="gazette-page cd-page">
        <DocMasthead />

        <section className="cd-toolbar">
          <div className="cd-tabs">
            <button className={`cd-tab ${filter === 'all' ? 'is-active' : ''}`} onClick={() => setFilter('all')}>
              전체 <span className="cd-tab-count">{counts.all}</span>
            </button>
            <button className={`cd-tab ${filter === 'attention' ? 'is-active' : ''}`} onClick={() => setFilter('attention')}>
              조치 필요 <span className="cd-tab-count cd-tab-warn">{counts.attention}</span>
            </button>
            {['사업자', '금융', '대표', '법인', '세무'].map(c => (
              <button key={c} className={`cd-tab ${filter === c ? 'is-active' : ''}`} onClick={() => setFilter(c)}>
                {c}
              </button>
            ))}
          </div>
          <button className="cd-btn cd-btn-primary" onClick={() => setRegisterOpen(true)}>
            + 새 문서 등록
          </button>
        </section>

        <section className="cd-layout">
          <div className="cd-list">
            {filtered.map(d => (
              <DocCard key={d.id} doc={d} onSelect={setSelected} isSelected={selected === d.id} />
            ))}
            {filtered.length === 0 && (
              <div className="cd-empty-list">해당 분류의 문서가 없습니다.</div>
            )}
          </div>
          <DocDetail doc={doc} showLog={tweaks.showAccessLog} />
        </section>

        <AccessHistory />

        <footer className="cd-foot">
          <div className="cd-foot-line" />
          <div className="cd-foot-row">
            <span>PurchaseAgent · 법인문서함</span>
            <span>모든 문서는 paperless.kr 와 매일 03:00 동기화되며 AES-256 암호화 저장됩니다.</span>
            <span>발행 · 사장실 · 비매품</span>
          </div>
        </footer>
      </div>

      {registerOpen && <RegisterPanel onClose={() => setRegisterOpen(false)} />}

      <TweaksPanel>
        <TweakSection label="테마" />
        <TweakToggle label="다크 모드" value={tweaks.dark} onChange={(v) => setTweak('dark', v)} />
        <TweakSection label="상세 패널" />
        <TweakToggle
          label="사용 이력 표시"
          value={tweaks.showAccessLog}
          onChange={(v) => setTweak('showAccessLog', v)}
        />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CorpDocs />);