{% extends "base.html" %}
{% block title %}#{{ t.id }} {{ t.title }} — 保守デスク{% endblock %}
{% block content %}
<div class="crumb"><a href="/">← チケット一覧</a>　#{{ t.id }}</div>
<div class="head"><h1>{{ t.title }}</h1></div>

<div class="meta-line">
  <span class="badge b-{{ t.status }}">{{ STATUS_JA[t.status] }}</span>
  <form method="post" action="/tickets/{{ t.id }}" class="inline-form">
    <select name="status" onchange="this.form.submit()">
      {% for key, ja in STATUS_JA.items() %}
      <option value="{{ key }}" {{ 'selected' if t.status == key else '' }}>{{ ja }}</option>
      {% endfor %}
    </select>
  </form>
  <span class="ai-note">
    顧客: {% if customer %}<a href="/customers/{{ customer.id }}">{{ customer.name }}</a>{% if customer.system_name %}（{{ customer.system_name }}）{% endif %}{% else %}未設定{% endif %}
    　起票: {{ t.created_at }}
  </span>
</div>

<div class="tgrid">
  <div>
    <section class="card">
      <h2>内容</h2>
      <form method="post" action="/tickets/{{ t.id }}">
        <label>タイトル</label>
        <input type="text" name="title" value="{{ t.title }}" required>
        <label>内容</label>
        <textarea name="body">{{ t.body }}</textarea>
        <label>顧客</label>
        <select name="customer_id">
          <option value="">（未選択）</option>
          {% for c in customers %}
          <option value="{{ c.id }}" {{ 'selected' if t.customer_id == c.id else '' }}>{{ c.name }}</option>
          {% endfor %}
        </select>
        <label>分類</label>
        <select name="category" id="f-category">
          <option value=""></option>
          {% for cat in settings['ai.categories'].split(',') %}
          <option value="{{ cat }}" {{ 'selected' if t.category == cat else '' }}>{{ cat }}</option>
          {% endfor %}
        </select>
        <label>緊急度</label>
        <select name="urgency" id="f-urgency">
          <option value=""></option>
          {% for u in ['高', '中', '低'] %}
          <option value="{{ u }}" {{ 'selected' if t.urgency == u else '' }}>{{ u }}</option>
          {% endfor %}
        </select>
        <label>影響範囲</label>
        <input type="text" name="impact" id="f-impact" value="{{ t.impact }}">
        <div class="form-foot"><button class="btn small" type="submit">保存</button></div>
      </form>
    </section>

    <section class="card">
      <h2>障害情報（帳票に反映）</h2>
      <form method="post" action="/tickets/{{ t.id }}">
        <label>発生日時（例: 2026-08-03 03:00）</label>
        <input type="text" name="occurred_at" value="{{ t.occurred_at }}">
        <label>復旧日時</label>
        <input type="text" name="recovered_at" value="{{ t.recovered_at }}">
        <label>原因</label>
        <textarea name="cause" style="height:56px">{{ t.cause }}</textarea>
        <label>暫定対応</label>
        <textarea name="temp_fix" style="height:56px">{{ t.temp_fix }}</textarea>
        <label>恒久対応（再発防止策）</label>
        <textarea name="perm_fix" style="height:56px">{{ t.perm_fix }}</textarea>
        <div class="form-foot"><button class="btn small" type="submit">保存</button></div>
      </form>
    </section>

    <section class="card">
      <h2>対応記録</h2>
      {% if notes %}
      <ul class="timeline">
        {% for n in notes %}
        <li><time>{{ n.created_at[5:] }}</time>{% if n.kind != 'memo' %}<span class="k">{{ {'ai_reply':'AI回答案','ai_polish':'AI整形','system':'システム'}[n.kind] }}</span>{% endif %}{{ n.body }}</li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="ai-note">まだ記録がありません。1行メモから始めましょう。</p>
      {% endif %}
      <form method="post" action="/tickets/{{ t.id }}/notes" id="note-form">
        <label>記録を追加</label>
        <textarea name="body" style="height:56px" placeholder="1行メモでOK。帳票にするときはAIが整形します"></textarea>
        <div class="form-foot">
          <button class="btn ghost small" type="button" id="btn-polish">AIで経緯文に整形</button>
          <button class="btn small" type="submit">追加</button>
        </div>
      </form>
      <div class="propose" id="polish-box" hidden>
        <strong style="font-size:12.5px">整形結果（編集して保存できます）</strong>
        <form method="post" action="/tickets/{{ t.id }}/notes">
          <input type="hidden" name="kind" value="ai_polish">
          <textarea name="body" id="polish-text" style="height:120px;margin-top:8px"></textarea>
          <div class="row"><button class="btn small" type="submit">記録に保存</button></div>
        </form>
      </div>
    </section>
  </div>

  <div>
    <section class="card">
      <h2>AIアシスト</h2>
      <p class="ai-note">提案はAI、確定はあなた。適用するまで保存されません。</p>
      <div class="propose">
        <strong style="font-size:12.5px">分類の提案</strong>
        <div id="classify-out"><p class="ai-note" style="margin:.4em 0 0">「提案を出す」でカテゴリ・緊急度・影響範囲をAIが提案します。</p></div>
        <div class="row">
          <button class="btn ghost small" type="button" id="btn-classify">提案を出す</button>
          <button class="btn small" type="button" id="btn-apply" hidden>左のフォームに適用</button>
        </div>
      </div>
      <div class="propose">
        <strong style="font-size:12.5px">一次回答案</strong>
        <div id="draft-out"><p class="ai-note" style="margin:.4em 0 0">過去の類似チケットを参照して、顧客への一次回答メールを下書きします。</p></div>
        <div class="row"><button class="btn ghost small" type="button" id="btn-draft">下書きを作る</button></div>
        <form method="post" action="/tickets/{{ t.id }}/notes" id="draft-form" hidden>
          <input type="hidden" name="kind" value="ai_reply">
          <textarea name="body" id="draft-text" style="height:140px;margin-top:8px"></textarea>
          <div class="row"><button class="btn small" type="submit">記録に保存</button></div>
        </form>
      </div>
    </section>

    <section class="card">
      <h2>類似チケット</h2>
      {% if similar %}
      <ul class="similar">
        {% for s in similar %}
        <li><a href="/tickets/{{ s.id }}">#{{ s.id }} {{ s.title }}</a>
          <span class="m">{{ STATUS_JA[s.status] }}・{{ s.updated_at[:10] }}{% if s.customer_name %}・{{ s.customer_name }}{% endif %}</span></li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="ai-note">類似するチケットはまだ見つかりません。</p>
      {% endif %}
    </section>

    <section class="card">
      <h2>帳票を作る</h2>
      <div class="repbtns">
        {% for kind in ('incident', 'work') %}
        <form method="post" action="/tickets/{{ t.id }}/reports/{{ kind }}">
          <label>{{ KIND_JA[kind] }}のテンプレート</label>
          <select name="template_id">
            <option value="">既定（{{ report_tpl[kind].default_name }}）</option>
            <option value="builtin">標準テンプレート</option>
            {% for tp in report_tpl[kind].options %}
            <option value="{{ tp.id }}">{{ tp.name }}{% if tp.customer_id %}（この顧客専用）{% endif %}</option>
            {% endfor %}
          </select>
          <div class="form-foot" style="margin-top:8px">
            <button class="btn {{ 'ghost' if kind == 'work' else '' }}" type="submit">{{ KIND_JA[kind] }}を生成（Excel / PDF）</button>
          </div>
        </form>
        {% endfor %}
      </div>
      <p class="ai-note" style="margin-top:8px">生成結果は<a href="/reports">帳票一覧</a>から。テンプレートの追加は<a href="/templates">帳票マスタ</a>で。</p>
    </section>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function(){
  var tid = {{ t.id }};
  var lastClassify = null;

  document.getElementById('btn-classify').addEventListener('click', async function(){
    var data = await aiPost('/api/tickets/' + tid + '/ai/classify', this);
    var out = document.getElementById('classify-out');
    if (data.ok) {
      lastClassify = data;
      out.innerHTML = '<pre>分類: ' + esc(data.category) + '\n緊急度: ' + esc(data.urgency) +
        '\n影響範囲: ' + esc(data.impact) + '\n理由: ' + esc(data.reason) + '</pre>';
      document.getElementById('btn-apply').hidden = false;
    } else if (data.raw) {
      out.innerHTML = '<pre>' + esc(data.raw) + '</pre><p class="ai-note">JSON解析に失敗したため生テキストを表示しています（適用不可）。</p>';
    }
  });

  document.getElementById('btn-apply').addEventListener('click', function(){
    if (!lastClassify) return;
    setSelect('f-category', lastClassify.category);
    setSelect('f-urgency', lastClassify.urgency);
    document.getElementById('f-impact').value = lastClassify.impact || '';
    toast('フォームに適用しました。「保存」で確定します。');
  });

  document.getElementById('btn-draft').addEventListener('click', async function(){
    var data = await aiPost('/api/tickets/' + tid + '/ai/draft_reply', this);
    if (data.ok) {
      document.getElementById('draft-out').innerHTML = '';
      document.getElementById('draft-text').value = data.text;
      document.getElementById('draft-form').hidden = false;
    }
  });

  document.getElementById('btn-polish').addEventListener('click', async function(){
    var data = await aiPost('/api/tickets/' + tid + '/ai/polish', this);
    if (data.ok) {
      document.getElementById('polish-text').value = data.text;
      document.getElementById('polish-box').hidden = false;
    }
  });

  function setSelect(id, value){
    var el = document.getElementById(id);
    for (var i = 0; i < el.options.length; i++) {
      if (el.options[i].value === value) { el.selectedIndex = i; return; }
    }
  }
  function esc(s){
    return String(s == null ? '' : s).replace(/[&<>"']/g, function(c){
      return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];
    });
  }
})();
</script>
{% endblock %}