// === 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 style={{ marginTop: 6, paddingTop: 12, borderTop: "1px dashed var(--border)" }}>
            <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8, color: "var(--text-muted)" }}>
              ISVM 신규 등록 시 사용할 기본값 (배송/A&S — 기준상품에서 안 가져옴)
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              <Field label="A/S 전화번호">
                <input className="input font-mono" placeholder="1588-0000"
                       value={creds.naver_as_phone || ""}
                       onChange={e => update({ naver_as_phone: e.target.value.trim() })} />
              </Field>
              <Field label="기본 배송비 (원)">
                <input className="input font-mono" placeholder="3000" type="number"
                       value={creds.naver_base_fee == null ? "" : creds.naver_base_fee}
                       onChange={e => update({ naver_base_fee: parseInt(e.target.value) || 0 })} />
              </Field>
              <Field label="무료배송 조건 금액 (이상 무료)">
                <input className="input font-mono" placeholder="50000" type="number"
                       value={creds.naver_free_amount == null ? "" : creds.naver_free_amount}
                       onChange={e => update({ naver_free_amount: parseInt(e.target.value) || 0 })} />
              </Field>
              <Field label="도서/산간 추가요금 (원)">
                <input className="input font-mono" placeholder="5000" type="number"
                       value={creds.naver_remote_fee == null ? "" : creds.naver_remote_fee}
                       onChange={e => update({ naver_remote_fee: parseInt(e.target.value) || 0 })} />
              </Field>
            </div>
            <div className="text-xs muted" style={{ marginTop: 6 }}>
              미입력 시 기본값 사용: A/S 1588-0000, 배송비 3,000원, 무료배송 50,000원 이상, 도서/산간 +5,000원, 택배사 로젠택배
            </div>
          </div>
        </div>
      </div>

      {/* Supabase (매입처/Model 같은 사용자 메타 저장) */}
      <div className="card" style={{ marginBottom: 12 }}>
        <div className="card-header">
          <div style={{ width: 28, height: 28, borderRadius: 7, background: "#3ecf8e", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 12 }}>S</div>
          <div className="card-title">Supabase (사용자 메타데이터 저장)</div>
          <span className="right text-xs muted">미입력 시 브라우저 localStorage 사용 (다른 PC 동기화 X)</span>
        </div>
        <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <Field label="Supabase Project URL">
            <input className="input font-mono" placeholder="https://xxxx.supabase.co"
                   value={creds.supabase_url || ""}
                   onChange={e => update({ supabase_url: e.target.value.trim() })} />
          </Field>
          <Field label="Supabase anon key (public)">
            <input className="input font-mono" type={showSecret ? "text" : "password"}
                   placeholder="eyJhbGc..."
                   value={creds.supabase_anon_key || ""}
                   onChange={e => update({ supabase_anon_key: e.target.value.trim() })} />
            <div className="text-xs muted" style={{ marginTop: 4 }}>
              anon key는 브라우저용 공개 키 — Supabase RLS 정책으로 보호됩니다.
              service_role key는 절대 입력하지 마세요.
            </div>
          </Field>
          <div style={{ background: "rgba(62, 207, 142, 0.08)", padding: "10px 12px", borderRadius: 6, fontSize: 12, lineHeight: 1.6 }}>
            <strong>저장 대상:</strong> 상품 관리의 <strong>매입처 / Model</strong> (네이버 API 미지원 → 우리가 별도 보관)
            <br/><strong>다른 PC 동기화:</strong> 같은 URL/key 입력만 하면 자동 동기화
          </div>
        </div>
      </div>

      {/* 로젠택배 Open API */}
      <div className="card" style={{ marginBottom: 12 }}>
        <div className="card-header">
          <div style={{ width: 28, height: 28, borderRadius: 7, background: "#f59e0b", color: "white", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 12 }}>L</div>
          <div className="card-title">로젠택배 Open API (선택)</div>
          <span className="right text-xs muted">미입력 시 XLSX 다운로드 방식만 사용 가능</span>
        </div>
        <div className="card-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <Field label="연동업체코드 (userId, 8자)">
            <input className="input font-mono" placeholder="10358007"
                   value={creds.logen_user_id || ""}
                   onChange={e => update({ logen_user_id: e.target.value.trim() })} />
          </Field>
          <Field label="거래처코드 (custCd, 8자)">
            <input className="input font-mono" placeholder="20179999"
                   value={creds.logen_cust_cd || ""}
                   onChange={e => update({ logen_cust_cd: e.target.value.trim() })} />
          </Field>
          <Field label="환경">
            <div className="seg" style={{ width: "fit-content" }}>
              <button className={"seg-btn " + ((creds.logen_env || "prod") === "prod" ? "active" : "")}
                      onClick={() => update({ logen_env: "prod" })}>운영 (openapi.ilogen.com)</button>
              <button className={"seg-btn " + (creds.logen_env === "dev" ? "active" : "")}
                      onClick={() => update({ logen_env: "dev" })}>개발 (topenapi.ilogen.com)</button>
            </div>
          </Field>
          <div style={{ background: "rgba(245, 158, 11, 0.08)", padding: "10px 12px", borderRadius: 6, fontSize: 12 }}>
            <strong>로젠 API 연동 안내</strong>
            <ul style={{ margin: "6px 0 0", paddingLeft: 18, lineHeight: 1.6 }}>
              <li>userId/custCd는 로젠택배와 API 연동 계약 시 발급됩니다 (☎ 1588-9988)</li>
              <li>입력 안 해도 OK — 입력 시 송장 출력 화면에서 "로젠 API로 발급" 버튼 활성화</li>
              <li>먼저 개발 환경으로 테스트한 후 운영으로 전환하는 것을 권장</li>
            </ul>
          </div>
        </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;