import json
import os
import urllib.request
import urllib.error

OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY")
OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")

# 実際に使えるモデルIDに置き換える
MODEL_MAP = {
    "gpt-5.6": "gpt-5.6",
    "gpt-5.4-mini": "gpt-5.4-mini",
}

# チェックリスト(出典: 首相官邸「災害の備えチェックリスト」非常用持ち出し袋)
# https://www.kantei.go.jp/jp/content/000182715.pdf
CHECKLIST = [
    "水",
    "食品(ご飯・レトルト食品・ビスケット・チョコ・乾パンなど、最低3日分)",
    "防災用ヘルメット・防災ずきん",
    "衣類・下着",
    "レインウェア",
    "紐なしのズック靴",
    "懐中電灯",
    "携帯ラジオ",
    "予備電池・携帯充電器",
    "マッチ・ろうそく",
    "救急用品(ばんそうこう・包帯・消毒液・常備薬など)",
    "使い捨てカイロ",
    "ブランケット",
    "軍手",
    "洗面用具",
    "歯ブラシ・歯磨き粉",
    "タオル",
    "ペン・ノート",
    "マスク",
    "手指消毒用アルコール",
    "石けん・ハンドソープ",
    "ウェットティッシュ",
    "体温計",
    "貴重品(通帳・現金・パスポート・運転免許証・診察券・マイナンバーカードなど)",
]

_HTML_CACHE = None


def _load_html():
    global _HTML_CACHE
    if _HTML_CACHE is None:
        html_path = os.path.join(os.path.dirname(__file__), "index.html")
        with open(html_path, "r", encoding="utf-8") as f:
            _HTML_CACHE = f.read()
    return _HTML_CACHE


def _response(status, body, content_type="application/json"):
    if content_type == "application/json" and not isinstance(body, str):
        body = json.dumps(body, ensure_ascii=False)
    return {
        "statusCode": status,
        "headers": {"Content-Type": content_type},
        "body": body,
        "isBase64Encoded": False,
    }


def _build_prompt():
    items_desc = "\n".join(f"- {item}" for item in CHECKLIST)
    total = len(CHECKLIST)
    return (
        "あなたは防災袋(非常用持ち出し袋)の中身をチェックするアシスタントです。"
        f"次のチェックリスト(全{total}項目)をもとに、画像に写っている中身を評価してください。\n\n"
        f"{items_desc}\n\n"
        "判定の際は、項目名と完全に一致しなくても、同等の役割を果たす類似品があれば"
        "揃っているとみなしてください(例:懐中電灯の代わりのランタンやスマホのライト、"
        "マッチの代わりのライターなど)。"
        "また、箱やパッケージに入っていて中身が直接見えない場合でも、"
        "箱の印字・ラベルの文字から中身が判別できればそれも揃っているとみなしてください。\n\n"
        "回答は次の構成の簡潔な日本語の文章にしてください(JSONは使わない)。\n"
        "1. 簡潔な一言のリード文(自由)\n"
        f"2. 次の文を、実際に数えた不足項目数をXに入れて必ずそのまま含める:"
        f"「災害の『備え』チェックリストと比較すると、{total}アイテム中X個が不足しているようです。"
        "詳細は以下のとおりです。」\n"
        "3. 不足している項目の詳細(簡潔な自由文)\n"
        f"4. 次の文を、Yに{total}から不足項目数を引いた数を入れて必ずそのまま含める:"
        "「他のY個アイテムは準備OKでした。」"
    )


def _call_openai(model_label, image_data_url):
    if not OPENAI_API_KEY:
        raise RuntimeError("OPENAI_API_KEY is not configured on the Lambda")

    model_id = MODEL_MAP.get(model_label)
    if not model_id:
        raise ValueError(f"Unknown model: {model_label}")

    payload = {
        "model": model_id,
        "instructions": _build_prompt(),
        "input": [
            {
                "role": "user",
                "content": [
                    {"type": "input_image", "image_url": image_data_url},
                ],
            },
        ],
    }

    req = urllib.request.Request(
        f"{OPENAI_API_BASE}/responses",
        data=json.dumps(payload).encode("utf-8"),
        headers={
            "Content-Type": "application/json",
            "Authorization": f"Bearer {OPENAI_API_KEY}",
        },
        method="POST",
    )

    try:
        with urllib.request.urlopen(req, timeout=80) as resp:
            data = json.loads(resp.read().decode("utf-8"))
    except urllib.error.HTTPError as e:
        detail = e.read().decode("utf-8", errors="replace")
        raise RuntimeError(f"OpenAI API error {e.code}: {detail}") from e

    for item in data.get("output", []):
        if item.get("type") == "message":
            for part in item.get("content", []):
                if part.get("type") == "output_text":
                    return part.get("text", "")
    raise RuntimeError(f"Unexpected response from OpenAI: {data}")


def lambda_handler(event, context):
    request_context = event.get("requestContext", {})
    http = request_context.get("http", {})
    method = http.get("method", "GET")
    path = event.get("rawPath", "/")

    if method == "GET" and (path == "/" or path == "/index.html"):
        return _response(200, _load_html(), content_type="text/html; charset=utf-8")

    if method == "POST" and path == "/analyze":
        try:
            body = event.get("body", "{}") or "{}"
            payload = json.loads(body)
            image_data_url = payload.get("image")
            model_label = payload.get("model")

            if not image_data_url:
                return _response(400, {"error": "image is required"})
            if model_label not in MODEL_MAP:
                return _response(400, {"error": f"invalid model: {model_label}"})

            text = _call_openai(model_label, image_data_url)
            return _response(200, {"text": text})
        except Exception as e:
            return _response(500, {"error": str(e)})

    return _response(404, {"error": "not found"})

import json
import os
import urllib.request
import urllib.error

OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY")
OPENAI_API_BASE = os.environ.get("OPENAI_API_BASE", "https://api.openai.com/v1")

# 実際に使えるモデルIDに置き換える
MODEL_MAP = {
    "gpt-5.6": "gpt-5.6",
    "gpt-5.4-mini": "gpt-5.4-mini",
}

# チェックリスト(出典: 首相官邸「災害の備えチェックリスト」非常用持ち出し袋)
# https://www.kantei.go.jp/jp/content/000182715.pdf
CHECKLIST = [
    "水",
    "食品(ご飯・レトルト食品・ビスケット・チョコ・乾パンなど、最低3日分)",
    "防災用ヘルメット・防災ずきん",
    "衣類・下着",
    "レインウェア",
    "紐なしのズック靴",
    "懐中電灯",
    "携帯ラジオ",
    "予備電池・携帯充電器",
    "マッチ・ろうそく",
    "救急用品(ばんそうこう・包帯・消毒液・常備薬など)",
    "使い捨てカイロ",
    "ブランケット",
    "軍手",
    "洗面用具",
    "歯ブラシ・歯磨き粉",
    "タオル",
    "ペン・ノート",
    "マスク",
    "手指消毒用アルコール",
    "石けん・ハンドソープ",
    "ウェットティッシュ",
    "体温計",
    "貴重品(通帳・現金・パスポート・運転免許証・診察券・マイナンバーカードなど)",
]

_HTML_CACHE = None


def _load_html():
    global _HTML_CACHE
    if _HTML_CACHE is None:
        html_path = os.path.join(os.path.dirname(__file__), "index.html")
        with open(html_path, "r", encoding="utf-8") as f:
            _HTML_CACHE = f.read()
    return _HTML_CACHE


def _response(status, body, content_type="application/json"):
    if content_type == "application/json" and not isinstance(body, str):
        body = json.dumps(body, ensure_ascii=False)
    return {
        "statusCode": status,
        "headers": {"Content-Type": content_type},
        "body": body,
        "isBase64Encoded": False,
    }


def _build_prompt():
    items_desc = "\n".join(f"- {item}" for item in CHECKLIST)
    total = len(CHECKLIST)
    return (
        "あなたは防災袋(非常用持ち出し袋)の中身をチェックするアシスタントです。"
        f"次のチェックリスト(全{total}項目)をもとに、画像に写っている中身を評価してください。\n\n"
        f"{items_desc}\n\n"
        "判定の際は、項目名と完全に一致しなくても、同等の役割を果たす類似品があれば"
        "揃っているとみなしてください(例:懐中電灯の代わりのランタンやスマホのライト、"
        "マッチの代わりのライターなど)。"
        "また、箱やパッケージに入っていて中身が直接見えない場合でも、"
        "箱の印字・ラベルの文字から中身が判別できればそれも揃っているとみなしてください。\n\n"
        "回答は次の構成の簡潔な日本語の文章にしてください(JSONは使わない)。\n"
        "1. 簡潔な一言のリード文(自由)\n"
        f"2. 次の文を、実際に数えた不足項目数をXに入れて必ずそのまま含める:"
        f"「災害の『備え』チェックリストと比較すると、{total}アイテム中X個が不足しているようです。"
        "詳細は以下のとおりです。」\n"
        "3. 不足している項目の詳細(簡潔な自由文)\n"
        f"4. 次の文を、Yに{total}から不足項目数を引いた数を入れて必ずそのまま含める:"
        "「他のY個アイテムは準備OKでした。」"
    )


def _call_openai(model_label, image_data_url):
    if not OPENAI_API_KEY:
        raise RuntimeError("OPENAI_API_KEY is not configured on the Lambda")

    model_id = MODEL_MAP.get(model_label)
    if not model_id:
        raise ValueError(f"Unknown model: {model_label}")

    payload = {
        "model": model_id,
        "instructions": _build_prompt(),
        "input": [
            {
                "role": "user",
                "content": [
                    {"type": "input_image", "image_url": image_data_url},
                ],
            },
        ],
    }

    req = urllib.request.Request(
        f"{OPENAI_API_BASE}/responses",
        data=json.dumps(payload).encode("utf-8"),
        headers={
            "Content-Type": "application/json",
            "Authorization": f"Bearer {OPENAI_API_KEY}",
        },
        method="POST",
    )

    try:
        with urllib.request.urlopen(req, timeout=80) as resp:
            data = json.loads(resp.read().decode("utf-8"))
    except urllib.error.HTTPError as e:
        detail = e.read().decode("utf-8", errors="replace")
        raise RuntimeError(f"OpenAI API error {e.code}: {detail}") from e

    for item in data.get("output", []):
        if item.get("type") == "message":
            for part in item.get("content", []):
                if part.get("type") == "output_text":
                    return part.get("text", "")
    raise RuntimeError(f"Unexpected response from OpenAI: {data}")


def lambda_handler(event, context):
    request_context = event.get("requestContext", {})
    http = request_context.get("http", {})
    method = http.get("method", "GET")
    path = event.get("rawPath", "/")

    if method == "GET" and (path == "/" or path == "/index.html"):
        return _response(200, _load_html(), content_type="text/html; charset=utf-8")

    if method == "POST" and path == "/analyze":
        try:
            body = event.get("body", "{}") or "{}"
            payload = json.loads(body)
            image_data_url = payload.get("image")
            model_label = payload.get("model")

            if not image_data_url:
                return _response(400, {"error": "image is required"})
            if model_label not in MODEL_MAP:
                return _response(400, {"error": f"invalid model: {model_label}"})

            text = _call_openai(model_label, image_data_url)
            return _response(200, {"text": text})
        except Exception as e:
            return _response(500, {"error": str(e)})

    return _response(404, {"error": "not found"})

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>防災袋 中身チェック</title>
<style>
  :root {
    --bg: #e8f5ea;
    --card: #ffffff;
    --accent: #f5b301;
    --accent-dark: #d99a00;
    --text: #2b2622;
    --muted: #7a7268;
    --ok: #2f8f4e;
    --ng: #c0392b;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
  html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  }
  #app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .screen { display: none; flex-direction: column; flex: 1; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .screen.active { display: flex; }

  h1 { font-size: 22px; margin: 12px 0 4px; }
  h2 { font-size: 15px; margin: 24px 0 10px; color: var(--muted); }
  p.sub { color: var(--muted); margin: 0 0 8px; font-size: 14px; }

  .model-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .model-option.selected { border-color: var(--accent); }
  .model-option input { width: 20px; height: 20px; accent-color: var(--accent); }
  .model-option .label { font-size: 16px; font-weight: 600; }

  button {
    font: inherit;
    border: none;
    border-radius: 14px;
    padding: 16px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
  }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-secondary { background: var(--card); color: var(--text); border: 2px solid #ddd6cb; }
  .btn-block { width: 100%; }

  .spacer { flex: 1; }

  #video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 16px;
  }
  #video, #captured { width: 100%; height: 100%; object-fit: cover; display: block; }

  .shutter-row { display: flex; justify-content: center; margin-top: 20px; }
  #shutter {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--accent);
    padding: 0;
  }
  #shutter:active { background: #eee; }

  .btn-row { display: flex; gap: 12px; margin-top: 16px; }
  .btn-row button { flex: 1; }

  #camera-error { display: none; color: var(--ng); font-size: 14px; margin-top: 16px; text-align: center; }

  #loading { display: none; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; }
  #loading.active { display: flex; }
  .spinner {
    width: 22px; height: 22px;
    border: 3px solid #e2dccf;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  #result-box {
    margin-top: 24px;
    background: var(--card);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
  }
  #result-box.error { color: var(--ng); }

  .topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .topbar button { padding: 8px 14px; font-size: 14px; }
</style>

<div id="app">

  <section id="screen-home" class="screen active">
    <h1>防災袋 中身チェック</h1>
    <p class="sub">カメラで防災袋の中身を撮影して、AIが持ち物をチェックします。</p>

    <h2>AIモデル</h2>
    <div id="model-list"></div>

    <div class="spacer"></div>
    <button class="btn-primary btn-block" id="start-btn">撮影をはじめる</button>
  </section>

  <section id="screen-viewfinder" class="screen">
    <div class="topbar">
      <button class="btn-secondary" id="back-home-btn">← ホーム</button>
    </div>
    <h1>撮影</h1>
    <p class="sub">防災袋の中身が画面に収まるように撮影してください。</p>

    <div id="video-wrap">
      <video id="video" autoplay playsinline muted></video>
      <img id="captured" alt="撮影した写真" hidden>
    </div>
    <canvas id="canvas" hidden></canvas>

    <div class="shutter-row" id="shutter-row">
      <button id="shutter" aria-label="撮影"></button>
    </div>

    <div class="btn-row" id="capture-actions" hidden>
      <button class="btn-secondary" id="retake-btn">撮り直す</button>
      <button class="btn-primary" id="send-btn">送信</button>
    </div>

    <div id="camera-error"></div>

    <div id="loading">
      <div class="spinner"></div>
      <span>AIが確認しています…</span>
    </div>

    <div id="result-box" hidden></div>
  </section>

</div>

<script>
(function () {
  var MODELS = [
    { value: "gpt-5.6", label: "GPT-5.6" },
    { value: "gpt-5.4-mini", label: "GPT-5.4 mini" }
  ];
  var state = { model: MODELS[0].value, stream: null, busy: false, captured: null };

  function $(id) { return document.getElementById(id); }
  function showScreen(id) {
    document.querySelectorAll(".screen").forEach(function (el) { el.classList.remove("active"); });
    $(id).classList.add("active");
  }

  var modelList = $("model-list");
  MODELS.forEach(function (m, i) {
    var wrap = document.createElement("label");
    wrap.className = "model-option" + (i === 0 ? " selected" : "");
    wrap.innerHTML =
      '<input type="radio" name="model" value="' + m.value + '"' + (i === 0 ? " checked" : "") + '>' +
      '<span class="label">' + m.label + '</span>';
    wrap.querySelector("input").addEventListener("change", function () {
      state.model = m.value;
      document.querySelectorAll(".model-option").forEach(function (o) { o.classList.remove("selected"); });
      wrap.classList.add("selected");
    });
    modelList.appendChild(wrap);
  });

  $("start-btn").addEventListener("click", function () {
    showScreen("screen-viewfinder");
    startCamera();
  });
  $("back-home-btn").addEventListener("click", function () {
    stopCamera();
    showScreen("screen-home");
  });

  var video = $("video");
  var captured = $("captured");
  var canvas = $("canvas");
  var shutterRow = $("shutter-row");
  var captureActions = $("capture-actions");
  var sendBtn = $("send-btn");

  function pickMainBackCameraId(devices) {
    var backCams = devices.filter(function (d) {
      return d.kind === "videoinput" && /back|rear|environment/i.test(d.label);
    });
    if (!backCams.length) return null;
    var main = backCams.find(function (d) {
      return !/ultra|wide angle|telephoto|zoom/i.test(d.label);
    });
    return (main || backCams[0]).deviceId;
  }

  function startCamera() {
    $("camera-error").style.display = "none";
    showLive();
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      cameraUnavailable();
      return;
    }
    navigator.mediaDevices.getUserMedia({
      video: {
        facingMode: { ideal: "environment" },
        width: { ideal: 1920 },
        height: { ideal: 1080 }
      },
      audio: false
    }).then(function (stream) {
      return navigator.mediaDevices.enumerateDevices().then(function (devices) {
        var mainId = pickMainBackCameraId(devices);
        var currentId = stream.getVideoTracks()[0].getSettings().deviceId;
        if (!mainId || mainId === currentId) return stream;
        stream.getTracks().forEach(function (t) { t.stop(); });
        return navigator.mediaDevices.getUserMedia({
          video: {
            deviceId: { exact: mainId },
            width: { ideal: 1920 },
            height: { ideal: 1080 }
          },
          audio: false
        });
      });
    }).then(function (stream) {
      state.stream = stream;
      video.srcObject = stream;
    }).catch(cameraUnavailable);
  }

  function cameraUnavailable() {
    $("camera-error").textContent = "カメラを起動できませんでした。";
    $("camera-error").style.display = "block";
    shutterRow.hidden = true;
  }

  function stopCamera() {
    if (state.stream) {
      state.stream.getTracks().forEach(function (t) { t.stop(); });
      state.stream = null;
    }
  }

  $("shutter").addEventListener("click", function () {
    if (state.busy || !state.stream) return;
    capture();
  });

  function capture() {
    var maxDim = 1024;
    var scale = Math.min(1, maxDim / Math.max(video.videoWidth, video.videoHeight));
    canvas.width = video.videoWidth * scale;
    canvas.height = video.videoHeight * scale;
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    state.captured = canvas.toDataURL("image/jpeg", 0.75);

    captured.src = state.captured;
    captured.hidden = false;
    video.hidden = true;
    shutterRow.hidden = true;
    captureActions.hidden = false;
    sendBtn.hidden = false;
  }

  function showLive() {
    state.captured = null;
    captured.hidden = true;
    video.hidden = false;
    shutterRow.hidden = false;
    captureActions.hidden = true;
    $("result-box").hidden = true;
  }

  $("retake-btn").addEventListener("click", showLive);
  $("send-btn").addEventListener("click", function () {
    sendBtn.hidden = true;
    analyze(state.captured);
  });

  function analyze(imageDataUrl) {
    state.busy = true;
    $("loading").classList.add("active");
    $("result-box").hidden = true;

    fetch("/analyze", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ image: imageDataUrl, model: state.model })
    })
      .then(function (res) { return res.json().then(function (data) { return { ok: res.ok, data: data }; }); })
      .then(function (r) {
        if (r.ok) {
          renderResult(r.data.text, false);
        } else {
          renderResult(r.data.error || "エラーが発生しました", true);
        }
      })
      .catch(function (err) {
        renderResult("通信エラーが発生しました: " + err.message, true);
      })
      .finally(function () {
        state.busy = false;
        $("loading").classList.remove("active");
      });
  }

  function renderResult(text, isError) {
    var box = $("result-box");
    box.textContent = text;
    box.classList.toggle("error", isError);
    box.hidden = false;
  }
})();
</script>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>防災袋 中身チェック</title>
<style>
  :root {
    --bg: #e8f5ea;
    --card: #ffffff;
    --accent: #f5b301;
    --accent-dark: #d99a00;
    --text: #2b2622;
    --muted: #7a7268;
    --ok: #2f8f4e;
    --ng: #c0392b;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
  html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  }
  #app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .screen { display: none; flex-direction: column; flex: 1; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .screen.active { display: flex; }

  h1 { font-size: 22px; margin: 12px 0 4px; }
  h2 { font-size: 15px; margin: 24px 0 10px; color: var(--muted); }
  p.sub { color: var(--muted); margin: 0 0 8px; font-size: 14px; }

  .model-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 2px solid transparent;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .model-option.selected { border-color: var(--accent); }
  .model-option input { width: 20px; height: 20px; accent-color: var(--accent); }
  .model-option .label { font-size: 16px; font-weight: 600; }

  button {
    font: inherit;
    border: none;
    border-radius: 14px;
    padding: 16px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
  }
  .btn-primary { background: var(--accent); color: #fff; }
  .btn-secondary { background: var(--card); color: var(--text); border: 2px solid #ddd6cb; }
  .btn-block { width: 100%; }

  .spacer { flex: 1; }

  #video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 16px;
  }
  #video, #captured { width: 100%; height: 100%; object-fit: cover; display: block; }

  .shutter-row { display: flex; justify-content: center; margin-top: 20px; }
  #shutter {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--accent);
    padding: 0;
  }
  #shutter:active { background: #eee; }

  .btn-row { display: flex; gap: 12px; margin-top: 16px; }
  .btn-row button { flex: 1; }

  #camera-error { display: none; color: var(--ng); font-size: 14px; margin-top: 16px; text-align: center; }

  #loading { display: none; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; }
  #loading.active { display: flex; }
  .spinner {
    width: 22px; height: 22px;
    border: 3px solid #e2dccf;
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  #result-box {
    margin-top: 24px;
    background: var(--card);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-wrap;
  }
  #result-box.error { color: var(--ng); }

  .topbar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .topbar button { padding: 8px 14px; font-size: 14px; }
</style>

<div id="app">

  <section id="screen-home" class="screen active">
    <h1>防災袋 中身チェック</h1>
    <p class="sub">カメラで防災袋の中身を撮影して、AIが持ち物をチェックします。</p>

    <h2>AIモデル</h2>
    <div id="model-list"></div>

    <div class="spacer"></div>
    <button class="btn-primary btn-block" id="start-btn">撮影をはじめる</button>
  </section>

  <section id="screen-viewfinder" class="screen">
    <div class="topbar">
      <button class="btn-secondary" id="back-home-btn">← ホーム</button>
    </div>
    <h1>撮影</h1>
    <p class="sub">防災袋の中身が画面に収まるように撮影してください。</p>

    <div id="video-wrap">
      <video id="video" autoplay playsinline muted></video>
      <img id="captured" alt="撮影した写真" hidden>
    </div>
    <canvas id="canvas" hidden></canvas>

    <div class="shutter-row" id="shutter-row">
      <button id="shutter" aria-label="撮影"></button>
    </div>

    <div class="btn-row" id="capture-actions" hidden>
      <button class="btn-secondary" id="retake-btn">撮り直す</button>
      <button class="btn-primary" id="send-btn">送信</button>
    </div>

    <div id="camera-error"></div>

    <div id="loading">
      <div class="spinner"></div>
      <span>AIが確認しています…</span>
    </div>

    <div id="result-box" hidden></div>
  </section>

</div>

<script>
(function () {
  var MODELS = [
    { value: "gpt-5.6", label: "GPT-5.6" },
    { value: "gpt-5.4-mini", label: "GPT-5.4 mini" }
  ];
  var state = { model: MODELS[0].value, stream: null, busy: false, captured: null };

  function $(id) { return document.getElementById(id); }
  function showScreen(id) {
    document.querySelectorAll(".screen").forEach(function (el) { el.classList.remove("active"); });
    $(id).classList.add("active");
  }

  var modelList = $("model-list");
  MODELS.forEach(function (m, i) {
    var wrap = document.createElement("label");
    wrap.className = "model-option" + (i === 0 ? " selected" : "");
    wrap.innerHTML =
      '<input type="radio" name="model" value="' + m.value + '"' + (i === 0 ? " checked" : "") + '>' +
      '<span class="label">' + m.label + '</span>';
    wrap.querySelector("input").addEventListener("change", function () {
      state.model = m.value;
      document.querySelectorAll(".model-option").forEach(function (o) { o.classList.remove("selected"); });
      wrap.classList.add("selected");
    });
    modelList.appendChild(wrap);
  });

  $("start-btn").addEventListener("click", function () {
    showScreen("screen-viewfinder");
    startCamera();
  });
  $("back-home-btn").addEventListener("click", function () {
    stopCamera();
    showScreen("screen-home");
  });

  var video = $("video");
  var captured = $("captured");
  var canvas = $("canvas");
  var shutterRow = $("shutter-row");
  var captureActions = $("capture-actions");
  var sendBtn = $("send-btn");

  function pickMainBackCameraId(devices) {
    var backCams = devices.filter(function (d) {
      return d.kind === "videoinput" && /back|rear|environment/i.test(d.label);
    });
    if (!backCams.length) return null;
    var main = backCams.find(function (d) {
      return !/ultra|wide angle|telephoto|zoom/i.test(d.label);
    });
    return (main || backCams[0]).deviceId;
  }

  function startCamera() {
    $("camera-error").style.display = "none";
    showLive();
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      cameraUnavailable();
      return;
    }
    navigator.mediaDevices.getUserMedia({
      video: {
        facingMode: { ideal: "environment" },
        width: { ideal: 1920 },
        height: { ideal: 1080 }
      },
      audio: false
    }).then(function (stream) {
      return navigator.mediaDevices.enumerateDevices().then(function (devices) {
        var mainId = pickMainBackCameraId(devices);
        var currentId = stream.getVideoTracks()[0].getSettings().deviceId;
        if (!mainId || mainId === currentId) return stream;
        stream.getTracks().forEach(function (t) { t.stop(); });
        return navigator.mediaDevices.getUserMedia({
          video: {
            deviceId: { exact: mainId },
            width: { ideal: 1920 },
            height: { ideal: 1080 }
          },
          audio: false
        });
      });
    }).then(function (stream) {
      state.stream = stream;
      video.srcObject = stream;
    }).catch(cameraUnavailable);
  }

  function cameraUnavailable() {
    $("camera-error").textContent = "カメラを起動できませんでした。";
    $("camera-error").style.display = "block";
    shutterRow.hidden = true;
  }

  function stopCamera() {
    if (state.stream) {
      state.stream.getTracks().forEach(function (t) { t.stop(); });
      state.stream = null;
    }
  }

  $("shutter").addEventListener("click", function () {
    if (state.busy || !state.stream) return;
    capture();
  });

  function capture() {
    var maxDim = 1024;
    var scale = Math.min(1, maxDim / Math.max(video.videoWidth, video.videoHeight));
    canvas.width = video.videoWidth * scale;
    canvas.height = video.videoHeight * scale;
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    state.captured = canvas.toDataURL("image/jpeg", 0.75);

    captured.src = state.captured;
    captured.hidden = false;
    video.hidden = true;
    shutterRow.hidden = true;
    captureActions.hidden = false;
    sendBtn.hidden = false;
  }

  function showLive() {
    state.captured = null;
    captured.hidden = true;
    video.hidden = false;
    shutterRow.hidden = false;
    captureActions.hidden = true;
    $("result-box").hidden = true;
  }

  $("retake-btn").addEventListener("click", showLive);
  $("send-btn").addEventListener("click", function () {
    sendBtn.hidden = true;
    analyze(state.captured);
  });

  function analyze(imageDataUrl) {
    state.busy = true;
    $("loading").classList.add("active");
    $("result-box").hidden = true;

    fetch("/analyze", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ image: imageDataUrl, model: state.model })
    })
      .then(function (res) { return res.json().then(function (data) { return { ok: res.ok, data: data }; }); })
      .then(function (r) {
        if (r.ok) {
          renderResult(r.data.text, false);
        } else {
          renderResult(r.data.error || "エラーが発生しました", true);
        }
      })
      .catch(function (err) {
        renderResult("通信エラーが発生しました: " + err.message, true);
      })
      .finally(function () {
        state.busy = false;
        $("loading").classList.remove("active");
      });
  }

  function renderResult(text, isError) {
    var box = $("result-box");
    box.textContent = text;
    box.classList.toggle("error", isError);
    box.hidden = false;
  }
})();
</script>