{% extends "base.html" %}
{% block title %}설정 — CPGuard{% endblock %}

{% block head %}
<style>
  .set-wrap { max-width: 720px; }
  .keyrow { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
  .keyrow .top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .keyrow .name { font-weight: 650; }
  .pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius:0; }
  .pill.on { background: color-mix(in srgb, var(--low) 18%, transparent); color: var(--low); }
  .pill.off { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
  .keyrow .cur { color: var(--muted); font-family: Consolas, monospace; font-size: 12px; margin-left: auto; }
  .keyrow input[type=password], .keyrow input[type=text] {
    width: 100%; background: var(--sunken); color: var(--fg); border: 1px solid var(--line);
    border-radius:0; padding: 9px 11px; font-size: 13px; font-family: Consolas, monospace; }
  .keyrow .clr { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12px; color: var(--muted); cursor: pointer; }
  .modelrow { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
  .modelrow label { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
  .modelrow input { flex: 1; background: var(--sunken); color: var(--fg); border: 1px solid var(--line); border-radius:0; padding: 7px 10px; font-size: 12.5px; font-family: Consolas, monospace; }
  .note { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin-top: 4px; }
  .gbtn { margin-left: 6px; padding: 3px 10px; font-size: 11.5px; border-radius:0; cursor: pointer;
    border: 1px solid var(--line); background: transparent; color: var(--accent); font-weight: 600; }
  .gbtn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .modal-ov { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center;
    background: var(--overlay); padding: 20px; }
  .modal-ov.on { display: flex; }
  .modal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--elev-2);
    max-width: 480px; width: 100%; max-height: 86vh; overflow: auto; padding: 22px 26px; }
  .modal h3 { margin: 0 0 4px; font-size: 17px; }
  .modal .sub { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
  .modal ol { padding-left: 20px; margin: 0 0 14px; line-height: 1.85; font-size: 13.5px; }
  .modal ol code { font-family: Consolas, monospace; font-size: 12px; background: var(--sunken);
    border: 1px solid var(--line); border-radius:0; padding: 1px 5px; }
  .modal .tip { font-size: 12.5px; color: var(--muted); background: var(--sunken); border: 1px solid var(--line);
    border-left: 2px solid var(--accent); border-radius:0; padding: 10px 12px; line-height: 1.6; }
  .modal .m-actions { display: flex; gap: 10px; margin-top: 16px; align-items: center; }
</style>
{% endblock %}

{% block content %}
<div class="set-wrap">
  <h1 style="font-size:20px;margin:0 0 4px">설정</h1>
  <p class="note" style="margin-bottom:20px">
    LLM 트리아지·AI 분석에 쓸 API 키를 넣습니다. 키는 이 PC의
    <code>~/.cpguard/config.json</code> 에만 저장되고(권한 축소), 외부로 전송되지 않습니다.
    저장 즉시 적용되며 재시작이 필요 없습니다.
  </p>

  <form method="post" action="{% url 'settings' %}">
    {% csrf_token %}
    {% for r in rows %}
    <div class="keyrow">
      <div class="top">
        <span class="name">{{ r.label }}</span>
        {% if r.set %}<span class="pill on">설정됨</span>{% else %}<span class="pill off">미설정</span>{% endif %}
        <button type="button" class="gbtn" data-guide="{{ r.pname }}">발급 가이드</button>
        <span class="cur">{% if r.masked %}{{ r.masked }}{% else %}—{% endif %}</span>
      </div>
      <input type="password" name="{{ r.env }}" autocomplete="off" spellcheck="false"
             placeholder="{% if r.set %}변경하려면 새 키 입력 (비우면 유지){% else %}{{ r.env }} 값 입력{% endif %}">
      {% if r.set %}
      <label class="clr"><input type="checkbox" name="clear_{{ r.env }}"> 이 키 삭제</label>
      {% endif %}
      <div class="modelrow">
        <label>모델</label>
        <input list="ml_{{ r.pname }}" name="model_{{ r.pname }}" value="{{ r.model }}" autocomplete="off" spellcheck="false"
               placeholder="기본: {{ r.model_default }} (비우면 기본 사용)">
        <datalist id="ml_{{ r.pname }}">{% for m in r.model_options %}<option value="{{ m }}"></option>{% endfor %}</datalist>
      </div>
    </div>
    {% endfor %}

    {% for e in extras %}
    <div class="keyrow">
      <div class="top">
        <span class="name">{{ e.label }}</span>
        {% if e.set %}<span class="pill on">설정됨</span>{% else %}<span class="pill off">선택</span>{% endif %}
      </div>
      <input type="text" name="{{ e.env }}" value="{{ e.value }}" autocomplete="off" spellcheck="false"
             placeholder="wrkspc_ 로 시작하는 ID (이름 'Default' 아님)">
      {% if e.set %}
      <label class="clr"><input type="checkbox" name="clear_{{ e.env }}"> 삭제</label>
      {% endif %}
      <div class="note" style="margin-top:6px">
        <b>이름이 아니라 ID</b> 입니다 — <code>wrkspc_01AbCd…</code> 형식.
        <code>console.anthropic.com</code> → <b>Settings → Workspaces</b> 의 <b>ID 열</b>에서 복사하세요
        (<code>Default</code> 는 이름이라 안 됩니다).
        <br>더 쉬운 방법: 키를 <b>특정 워크스페이스로 제한</b>해 새로 발급하면 이 값이 아예 필요 없습니다.
      </div>
    </div>
    {% endfor %}

    <div class="keyrow" style="margin-top:22px">
      <div class="top">
        <span class="name">보고서 정보</span>
        <span class="note" style="margin:0 0 0 6px;font-size:12px">PDF 표지·개정이력에 들어갑니다. 비우면 기본값(CPGuard)</span>
      </div>
      {% for f in report_fields %}
      <div class="modelrow">
        <label style="width:110px">{{ f.label }}</label>
        <input type="text" name="report_{{ f.key }}" value="{{ f.value }}" autocomplete="off" spellcheck="false"
               placeholder="{{ f.placeholder }}" style="font-family:inherit">
      </div>
      {% endfor %}
    </div>

    <div style="display:flex;gap:10px;align-items:center;margin-top:16px">
      <button class="btn" type="submit">저장</button>
      <a class="btn ghost" href="/">홈으로</a>
      <span class="note" style="margin:0">
        사용 가능: {% if providers %}<b>{{ providers|join:", " }}</b>{% else %}없음 — 위에 키를 넣어 활성화하세요{% endif %}
      </span>
    </div>
  </form>

  <p class="note" style="margin-top:22px">
    키 발급 위치 — Claude: <code>console.anthropic.com</code> ·
    OpenAI: <code>platform.openai.com/api-keys</code> ·
    Gemini: <code>aistudio.google.com/apikey</code>.
    환경변수(<code>ANTHROPIC_API_KEY</code> 등)가 이미 설정돼 있으면 그쪽이 우선합니다.
  </p>
</div>

<!-- 프로바이더별 API 키 발급 가이드 팝업 -->
<div class="modal-ov" id="guide-ov">
  <div class="modal" id="guide-claude" hidden>
    <h3>Claude (Anthropic) API 키 발급</h3>
    <div class="sub">유료(선불) · 가입 시 초기 무료 크레딧 제공</div>
    <ol>
      <li><code>console.anthropic.com</code> 접속 → 로그인/가입(이메일 또는 Google)</li>
      <li>좌측 <b>Settings → API keys</b> (바로가기: <code>console.anthropic.com/settings/keys</code>)</li>
      <li>우상단 <b>Create Key</b> → 키 이름 입력 → 생성</li>
      <li>키를 <b>복사</b>(한 번만 표시됨) → 위 <b>Claude</b> 칸에 붙여넣고 저장</li>
    </ol>
    <div class="tip">결제/크레딧을 등록해야 실제 호출이 됩니다(Billing).
      <br><b>가장 쉬운 해결:</b> 키 생성 시 <b>특정 워크스페이스로 제한(Default 등)</b>해서 발급하면
      워크스페이스 ID 가 필요 없습니다.
      <br><code>anthropic-workspace-id is required</code> 오류(신원 연동 키)면, 아래 칸에
      <b>워크스페이스 ID</b> 를 넣으세요 — <b>이름(Default)이 아니라</b> <code>wrkspc_…</code> 형식 ID.
      Settings → Workspaces 의 <b>ID 열</b>에서 복사합니다.</div>
    <div class="m-actions"><a class="btn" href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener">콘솔 열기 ↗</a><button class="btn ghost" data-close type="button">닫기</button></div>
  </div>

  <div class="modal" id="guide-gemini" hidden>
    <h3>Gemini (Google) API 키 발급</h3>
    <div class="sub">무료 티어로 바로 사용 가능 — 처음 테스트에 추천</div>
    <ol>
      <li><code>aistudio.google.com/apikey</code> 접속 → Google 계정 로그인</li>
      <li>최초 접속 시 <b>약관 동의</b> · 지역 확인</li>
      <li><b>Create API key</b> → 새 프로젝트(권장) 또는 기존 프로젝트 선택</li>
      <li>생성된 키 <b>복사</b> → 위 <b>Gemini</b> 칸에 붙여넣고 저장</li>
    </ol>
    <div class="tip">결제 등록 없이 무료 티어로 즉시 동작합니다. 트리아지 첫 테스트에 가장 편합니다.</div>
    <div class="m-actions"><a class="btn" href="https://aistudio.google.com/apikey" target="_blank" rel="noopener">AI Studio 열기 ↗</a><button class="btn ghost" data-close type="button">닫기</button></div>
  </div>

  <div class="modal" id="guide-openai" hidden>
    <h3>ChatGPT (OpenAI) API 키 발급</h3>
    <div class="sub">선불 결제 필요 — 크레딧 없으면 호출이 실패합니다</div>
    <ol>
      <li><code>platform.openai.com/api-keys</code> 접속 → 로그인</li>
      <li><b>Create new secret key</b> → 이름·권한 선택 → 생성</li>
      <li>키 <b>복사</b>(한 번만 표시됨) → 위 <b>ChatGPT</b> 칸에 붙여넣고 저장</li>
      <li><b>Settings → Billing</b> 에서 카드 등록 + 선불 크레딧 충전(<code>$5</code> 이상)</li>
    </ol>
    <div class="tip">크레딧을 넣지 않으면 rate limit 이 매우 낮거나 호출이 막힙니다. $5 충전 시 Tier 1 로 올라갑니다.</div>
    <div class="m-actions"><a class="btn" href="https://platform.openai.com/api-keys" target="_blank" rel="noopener">플랫폼 열기 ↗</a><button class="btn ghost" data-close type="button">닫기</button></div>
  </div>
</div>

<script>
(function () {
  var ov = document.getElementById('guide-ov');
  var modals = ov.querySelectorAll('.modal');
  function open(name) {
    modals.forEach(function (m) { m.hidden = (m.id !== 'guide-' + name); });
    ov.classList.add('on');
  }
  function close() { ov.classList.remove('on'); }
  document.querySelectorAll('.gbtn').forEach(function (b) {
    b.addEventListener('click', function () { open(b.dataset.guide); });
  });
  ov.querySelectorAll('[data-close]').forEach(function (b) { b.addEventListener('click', close); });
  ov.addEventListener('click', function (e) { if (e.target === ov) close(); });
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
})();
</script>
<div class="card">
  <h2>보고서 양식</h2>
  <p class="muted" style="font-size:12.5px">발주처마다 요구가 다르고 사업별로 양식이 쌓입니다.
     어떤 절을 넣을지 저장해 두고 산출물을 내보낼 때 고릅니다.</p>
  {% if templates %}
  <table style="margin-bottom:14px">
    <tr><th>이름</th><th>상세</th><th>소스</th><th>의견</th><th>제외</th><th>기준목록</th><th>대상현황</th><th></th></tr>
    {% for t in templates %}
    <tr>
      <td><b>{{ t.name }}</b>{% if t.references %} <span class="muted">· {{ t.references }}</span>{% endif %}</td>
      <td>{% if t.include_detail %}✔{% else %}—{% endif %}</td>
      <td>{% if t.include_source %}✔{% else %}—{% endif %}</td>
      <td>{% if t.include_comment %}✔{% else %}—{% endif %}</td>
      <td>{% if t.include_exclusions %}✔{% else %}—{% endif %}</td>
      <td>{% if t.include_rule_list %}✔{% else %}—{% endif %}</td>
      <td>{% if t.include_scope %}✔{% else %}—{% endif %}</td>
      <td style="text-align:right"><form method="post" action="{% url 'report_templates' %}" style="display:inline">{% csrf_token %}
        <input type="hidden" name="delete" value="{{ t.pk }}"><button class="btn ghost" type="submit">삭제</button></form></td>
    </tr>
    {% endfor %}
  </table>
  {% endif %}
  <form method="post" action="{% url 'report_templates' %}" style="display:grid;gap:8px;max-width:760px">{% csrf_token %}
    <input name="name" placeholder="양식 이름 — 예: 행안부2021(소스 포함)" required>
    <input name="title_override" placeholder="표지 제목 (비우면 기본)">
    <input name="header_note" placeholder="표지 머리말 (선택)">
    <input name="references" placeholder="점검 기준 id, 쉼표 — 예: mois,efs (비우면 내보낼 때 고른 기준)">
    <div style="display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px" class="muted">
      <label><input type="checkbox" name="include_detail" checked> 상세 결과</label>
      <label><input type="checkbox" name="include_source" checked> 소스·흐름 포함</label>
      <label><input type="checkbox" name="include_comment"> 진단원 의견 포함</label>
      <label><input type="checkbox" name="include_exclusions" checked> 제외 정보</label>
      <label><input type="checkbox" name="include_rule_list" checked> 분석 기준</label>
      <label><input type="checkbox" name="include_scope" checked> 분석 대상 현황</label>
    </div>
    <div><button class="btn" type="submit">저장</button>
      <span class="muted" style="font-size:11px;margin-left:8px">같은 이름이면 덮어씁니다</span></div>
  </form>
</div>
{% endblock %}