// === API 설정 화면 ===
const { useState: useStateSet } = React;

function SettingsScreen() {
  const [creds, setCreds] = useStateSet(window.API.loadCreds());
  const [showSecret, setShowSecret] = useStateSet(false);
  const [confirmClear, setConfirmClear] = useStateSet(false);

  const update = (patch) => setCreds(prev => ({ ...prev, ...patch }));
  const save = () => { window.API.saveCreds(creds); window.toast("자격증명이 브라우저에 저장되었습니다"); };
  const clear = () => { window.API.clearCreds(); setCreds({}); setConfirmClear(false); window.toast("자격증명이 삭제되었습니다"); };

  return (
    <div className="page" style={{ maxWidth: 880 }}>
      <div className="page-header">
        <h1 className="page-title">API 설정</h1>
        <p className="page-desc">ISVM 및 네이버 커머스 API 자격증명을 관리합니다</p>
      </div>

      {/* Security warning */}
      <div className="card" style={{ marginBottom: 12, borderColor: "var(--warning)", background: "rgba(245, 158, 11, 0.05)" }}>
        <div className="card-body" style={{ padding: 16, display: "flex", gap: 12 }}>
          <div style={{ width: 32, height: 32, borderRadius: 8, background: "rgba(245, 158, 11, 0.15)", color: "var(--warning)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>⚠️</div>
          <div>
            <div style={{ fontWeight: 600, marginBottom: 4 }}>보안 주의사항</div>
            <ul className="text-sm" style={{ margin: 0, paddingLeft: 18, color: "var(--text-muted)", lineHeight: 1.7 }}>
              <li>자격증명은 <strong>이 브라우저의 localStorage에만</strong> 저장됩니다 — 서버나 코드에 저장되지 않습니다.</li>
              <li>네이버 client_secret은 <strong>절대 브라우저에서 직접 사용하지 마세요</strong>. 서버 프록시에서만 사용해야 합니다.</li>
              <li>채팅, GitHub, 공개된 곳에 시크릿이 노출된 경우 <strong>즉시 재발급</strong>하세요.</li>
              <li>공유 PC에서는 작업 후 반드시 <strong>"전체 삭제"</strong>를 누르세요.</li>
            </ul>
          </div>
        </div>
      </div>

      {/* ISVM */}
      <div className="card" style={{ marginBottom: 12 }}>
        <div className="card-header">
          <div style={{ width: 28, height: 28, borderRadius: 7, background: "linear-gradient(135deg, #6366f1, #8b5cf6)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 12 }}>IS</div>
          <div className="card-title">ISVM Crawler API</div>
          <span className="right text-xs muted">자격증명 불필요 (CORS 화이트리스트만)</span>
        </div>
        <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <Field label="API Base URL">
            <input className="input font-mono" value={window.API.ISVM_BASE} readOnly />
          </Field>
          <div className="text-xs muted">
            ISVM 서버는 인증 없이 동작하며, 호출 도메인이 서버측 CORS 화이트리스트에 등록되어 있어야 합니다.
          </div>
        </div>
      </div>

      {/* Naver */}
      <div className="card" style={{ marginBottom: 12 }}>
        <div className="card-header">
          <div style={{ width: 28, height: 28, borderRadius: 7, background: "var(--accent)", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 12 }}>N</div>
          <div className="card-title">네이버 커머스 API</div>
        </div>
        <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <Field label="애플리케이션 ID (client_id)">
            <input className="input font-mono" placeholder="2Xic..."
                   value={creds.naver_client_id || ""}
                   onChange={e => update({ naver_client_id: e.target.value.trim() })} />
          </Field>
          <Field label="애플리케이션 시크릿 (client_secret) — 서버 프록시에만 전달됩니다">
            <div className="row gap-2">
              <input className="input font-mono"
                     type={showSecret ? "text" : "password"}
                     placeholder="$2a$04$..."
                     value={creds.naver_client_secret || ""}
                     onChange={e => update({ naver_client_secret: e.target.value.trim() })} />
              <button className="btn" onClick={() => setShowSecret(s => !s)}>
                {showSecret ? <><window.I.X size={14} /> 숨기기</> : <><window.I.Eye size={14} /> 보기</>}
              </button>
            </div>
          </Field>
          <div style={{ background: "var(--accent-soft)", padding: "10px 12px", borderRadius: 6, fontSize: 12 }}>
            <strong>왜 프록시가 필요한가?</strong>
            <ol style={{ margin: "6px 0 0", paddingLeft: 18 }}>
              <li>네이버 OAuth 토큰 발급은 <code>bcrypt(client_id + "_" + timestamp, client_secret)</code> 서명을 요구합니다 → 시크릿이 노출됩니다</li>
              <li>네이버는 호출 IP를 화이트리스트로 검증합니다 (브라우저 IP는 매번 바뀜)</li>
              <li>브라우저 CORS 정책으로 직접 호출이 차단됩니다</li>
            </ol>
          </div>
          <Field label="자체 백엔드 프록시 URL (필수)">
            <input className="input font-mono" placeholder="https://your-server.com/api/naver"
                   value={creds.proxy_url || ""}
                   onChange={e => update({ proxy_url: e.target.value.trim() })} />
            <div className="text-xs muted" style={{ marginTop: 4 }}>
              브라우저는 이 URL로만 요청합니다. 프록시 서버가 client_secret을 보관하고 네이버 API에 서명된 요청을 전달합니다.
            </div>
          </Field>
          <Field label="스토어 ID (smartstoreId, 선택)">
            <input className="input font-mono" placeholder="smartfarm-2024"
                   value={creds.smartstore_id || ""}
                   onChange={e => update({ smartstore_id: e.target.value.trim() })} />
          </Field>
        </div>
      </div>

      <div className="row gap-2">
        <button className="btn btn-primary" onClick={save}><window.I.Check size={14} /> 저장</button>
        <button className="btn btn-danger" onClick={() => setConfirmClear(true)}>
          <window.I.Trash size={14} /> 전체 삭제
        </button>
        <div className="right text-xs muted">localStorage 키: <code>smartfarm.creds.v1</code></div>
      </div>

      <Modal open={confirmClear} onClose={() => setConfirmClear(false)} title="자격증명 삭제 확인"
             footer={<>
               <button className="btn" onClick={() => setConfirmClear(false)}>취소</button>
               <button className="btn btn-danger" onClick={clear}>삭제</button>
             </>}>
        <div className="text-sm">
          이 브라우저에 저장된 모든 자격증명이 삭제됩니다. 작업을 마친 공유 PC에서 반드시 실행하세요.
        </div>
      </Modal>
    </div>
  );
}

window.SettingsScreen = SettingsScreen;