<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>&#84;&#114;&#117;&#115;&#116; &#77;&#111;&#118;&#105;&#101; &#76;&#101;&#100;&#103;&#101;&#114; &#85;&#73;</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.cls_a1{opacity:0;transition:opacity 0.5s}
.cls_a2{opacity:1}
.cls_a3{background-color:#d4edda;border:1px solid #c3e6cb;color:#155724;padding:10px;border-radius:4px;margin-top:10px}
.cls_a4{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24;padding:10px;border-radius:4px;margin-top:10px}
.cls_a5{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404;padding:10px;border-radius:4px;margin-top:10px}
</style>
</head>
<body>
<div class="container py-4">
<h1 class="mb-4">&#84;&#114;&#117;&#115;&#116; &#77;&#111;&#118;&#105;&#101; &#76;&#101;&#100;&#103;&#101;&#114; &#85;&#73;</h1>
<!-- API Key &#12501;&#12473;&#12531;&#12523;&#12452; -->
<div class="card mb-4">
<div class="card-header">&#65;&#80;&#73; &#75;&#101;&#121; &#83;&#101;&#116;&#116;&#105;&#110;&#103;&#115;</div>
<div class="card-body">
<div class="mb-3">
<label for="id_a" class="form-label">&#83;&#101;&#116; &#65;&#80;&#73; &#75;&#101;&#121; (&#66;&#101;&#97;&#114;&#101;&#114;)</label>
<input type="text" class="form-control" id="id_a" placeholder="&#69;&#110;&#116;&#101;&#114; &#65;&#80;&#73; &#75;&#101;&#121;">
</div>
<button id="id_b" class="btn btn-primary">&#83;&#101;&#116; &#65;&#80;&#73; &#75;&#101;&#121;</button>
<button id="id_c" class="btn btn-secondary">&#67;&#108;&#101;&#97;&#114; &#65;&#80;&#73; &#75;&#101;&#121;</button>
<p class="mt-2">&#67;&#117;&#114;&#114;&#101;&#110;&#116; &#65;&#80;&#73; &#75;&#101;&#121;: <span id="id_d">&#78;&#111;&#110;&#101;</span></p>
</div>
</div>
<!-- &#12513;&#12450;&#12523;&#12540; &#12505;&#12531;&#12483;&#12540;&#12452; -->
<ul class="nav nav-tabs" id="id_e" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="id_f" data-bs-toggle="tab" data-bs-target="#id_k" type="button" role="tab">&#71;&#69;&#84; /&#118;&#101;&#114;&#105;&#102;&#121;</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="id_g" data-bs-toggle="tab" data-bs-target="#id_o" type="button" role="tab">&#80;&#79;&#83;&#84; /&#118;&#101;&#114;&#105;&#102;&#121;/&#102;&#105;&#108;&#101;</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="id_h" data-bs-toggle="tab" data-bs-target="#id_s" type="button" role="tab">&#80;&#79;&#83;&#84; /&#108;&#101;&#100;&#103;&#101;&#114;</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="id_i" data-bs-toggle="tab" data-bs-target="#id_x" type="button" role="tab">&#80;&#79;&#83;&#84; /&#108;&#101;&#100;&#103;&#101;&#114;/&#102;&#105;&#108;&#101;</button>
</li>
</ul>
<div class="tab-content mt-3" id="id_j">
<!-- GET /verify -->
<div class="tab-pane fade show active" id="id_k" role="tabpanel">
<h3>&#71;&#69;&#84; /&#118;&#101;&#114;&#105;&#102;&#121;</h3>
<form id="id_l">
<div class="mb-3">
<label for="id_m" class="form-label">&#70;&#105;&#108;&#101; &#72;&#97;&#115;&#104;</label>
<input type="text" class="form-control" id="id_m" placeholder="&#69;&#110;&#116;&#101;&#114; &#102;&#105;&#108;&#101; &#104;&#97;&#115;&#104;">
</div>
<button type="submit" class="btn btn-primary">&#86;&#101;&#114;&#105;&#102;&#121; &#76;&#101;&#100;&#103;&#101;&#114;</button>
</form>
<div id="id_n"></div>
</div>
<!-- POST /verify/file -->
<div class="tab-pane fade" id="id_o" role="tabpanel">
<h3>&#80;&#79;&#83;&#84; /&#118;&#101;&#114;&#105;&#102;&#121;/&#102;&#105;&#108;&#101;</h3>
<form id="id_p" enctype="multipart/form-data">
<div class="mb-3">
<label for="id_q" class="form-label">&#83;&#101;&#108;&#101;&#99;&#116; &#70;&#105;&#108;&#101;</label>
<input type="file" class="form-control" id="id_q">
</div>
<button type="submit" class="btn btn-primary">&#86;&#101;&#114;&#105;&#102;&#121; &#70;&#105;&#108;&#101; &#76;&#101;&#100;&#103;&#101;&#114;</button>
</form>
<div id="id_r"></div>
</div>
<!-- POST /ledger (&#70;&#105;&#108;&#101; &#72;&#97;&#115;&#104;＋&#12300;&#32222;&#12302;) -->
<div class="tab-pane fade" id="id_s" role="tabpanel">
<h3>&#80;&#79;&#83;&#84; /&#108;&#101;&#100;&#103;&#101;&#114;</h3>
<form id="id_t">
<div class="mb-3">
<label for="id_u" class="form-label">&#70;&#105;&#108;&#101; &#72;&#97;&#115;&#104;</label>
<input type="text" class="form-control" id="id_u" placeholder="&#69;&#110;&#116;&#101;&#114; &#102;&#105;&#108;&#101; &#104;&#97;&#115;&#104;">
</div>
<div class="mb-3">
<label for="id_v" class="form-label">&#65;&#116;&#116;&#114;&#105;&#98;&#117;&#116;&#101;&#115; (&#74;&#83;&#79;&#78;)</label>
<textarea class="form-control" id="id_v" rows="3" placeholder='{"property1": "value1", "property2": 123}'></textarea>
</div>
<button type="submit" class="btn btn-primary">&#82;&#101;&#103;&#105;&#115;&#116;&#101;&#114; &#76;&#101;&#100;&#103;&#101;&#114;</button>
</form>
<div id="id_w"></div>
</div>
<!-- POST /ledger/file (&#70;&#105;&#108;&#101; &#85;&#112;&#108;&#111;&#97;&#100;＋&#12300;&#32222;&#12302;) -->
<div class="tab-pane fade" id="id_x" role="tabpanel">
<h3>&#80;&#79;&#83;&#84; /&#108;&#101;&#100;&#103;&#101;&#114;/&#102;&#105;&#108;&#101;</h3>
<form id="id_y" enctype="multipart/form-data">
<div class="mb-3">
<label for="id_z" class="form-label">&#83;&#101;&#108;&#101;&#99;&#116; &#70;&#105;&#108;&#101;</label>
<input type="file" class="form-control" id="id_z">
</div>
<div class="mb-3">
<label for="id_aa" class="form-label">&#65;&#116;&#116;&#114;&#105;&#98;&#117;&#116;&#101;&#115; (&#74;&#83;&#79;&#78;)</label>
<textarea class="form-control" id="id_aa" rows="3" placeholder='{"property1": "value1", "property2": 123}'></textarea>
</div>
<button type="submit" class="btn btn-primary">&#82;&#101;&#103;&#105;&#115;&#116;&#101;&#114; &#70;&#105;&#108;&#101; &#76;&#101;&#100;&#103;&#101;&#114;</button>
</form>
<div id="id_ab"></div>
</div>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
const apiBaseUrl = "https://api.trust-movie.com";
let apiKey = null;

// API Key&#12501;&#12473;&#12531;&#12523;／&#20998;&#23398;
document.getElementById("id_b").addEventListener("click", () => {
  const input = document.getElementById("id_a").value.trim();
  if (input) {
    apiKey = input;
    document.getElementById("id_d").innerText = apiKey;
  }
});
document.getElementById("id_c").addEventListener("click", () => {
  apiKey = null;
  document.getElementById("id_a").value = "";
  document.getElementById("id_d").innerText = "None";
});

// &#82;&#101;&#115;&#112;&#111;&#110;&#115;&#101;&#12501;&#12473;&#12531;&#12483;表示用&#12501;&#12473;&#12531;&#12523;関数
function displayResponse(elementId, response, status) {
  const el = document.getElementById(elementId);
  let className = "cls_a3";
  if (status >= 400 && status < 500) {
    className = "cls_a4";
  } else if (status === 423) {
    className = "cls_a5";
  }
  el.innerHTML = '<div class="' + className + '"><pre>' +
    JSON.stringify(response, null, 2) +
    '</pre><p>Status Code: ' + status + '</p></div>';
}

// 共通の&#82;&#101;&#115;&#112;&#111;&#110;&#115;&#101;パース処理関数
async function parseResponse(res) {
  const contentType = res.headers.get("Content-Type") || "";
  if (contentType.includes("application/json")) {
    return await res.json();
  } else {
    return await res.text();
  }
}

// GET /verify の実行
document.getElementById("id_l").addEventListener("submit", async (e) => {
  e.preventDefault();
  const fileHash = document.getElementById("id_m").value.trim();
  try {
    const res = await fetch(apiBaseUrl + "/verify?fileHash=" + encodeURIComponent(fileHash));
    const data = await parseResponse(res);
    displayResponse("id_n", data, res.status);
  } catch (err) {
    displayResponse("id_n", { error: err.toString() }, 500);
  }
});

// POST /verify/file の実行（&#70;&#105;&#108;&#101; &#85;&#112;&#108;&#111;&#97;&#100;）
document.getElementById("id_p").addEventListener("submit", async (e) => {
  e.preventDefault();
  const fileInput = document.getElementById("id_q");
  if (fileInput.files.length === 0) {
    alert("Please select a file.");
    return;
  }
  const formData = new FormData();
  formData.append("file", fileInput.files[0]);
  try {
    const res = await fetch(apiBaseUrl + "/verify/file", {
      method: "POST",
      headers: apiKey ? { "Authorization": "Bearer " + apiKey } : {},
      body: formData
    });
    const data = await parseResponse(res);
    displayResponse("id_r", data, res.status);
  } catch (err) {
    displayResponse("id_r", { error: err.toString() }, 500);
  }
});

// POST /ledger の実行（&#70;&#105;&#108;&#101; &#72;&#97;&#115;&#104;＋&#12300;&#32222;&#12302;）
document.getElementById("id_t").addEventListener("submit", async (e) => {
  e.preventDefault();
  const fileHash = document.getElementById("id_u").value.trim();
  let attributes;
  try {
    attributes = JSON.parse(document.getElementById("id_v").value.trim() || "{}");
  } catch (err) {
    alert("Invalid JSON in attributes.");
    return;
  }
  try {
    const res = await fetch(apiBaseUrl + "/ledger", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        ...(apiKey ? { "Authorization": "Bearer " + apiKey } : {})
      },
      body: JSON.stringify({ fileHash, attributes })
    });
    const data = await parseResponse(res);
    displayResponse("id_w", data, res.status);
  } catch (err) {
    displayResponse("id_w", { error: err.toString() }, 500);
  }
});

// POST /ledger/file の実行（&#70;&#105;&#108;&#101; &#85;&#112;&#108;&#111;&#97;&#100;＋&#12300;&#32222;&#12302;）
document.getElementById("id_y").addEventListener("submit", async (e) => {
  e.preventDefault();
  const fileInput = document.getElementById("id_z");
  if (fileInput.files.length === 0) {
    alert("Please select a file.");
    return;
  }
  const attributesText = document.getElementById("id_aa").value.trim();
  let attributes = {};
  if (attributesText) {
    try {
      attributes = JSON.parse(attributesText);
    } catch (err) {
      alert("Invalid JSON in attributes.");
      return;
    }
  }
  const formData = new FormData();
  formData.append("file", fileInput.files[0]);
  formData.append("attributes", JSON.stringify(attributes));
  try {
    const res = await fetch(apiBaseUrl + "/ledger/file", {
      method: "POST",
      headers: apiKey ? { "Authorization": "Bearer " + apiKey } : {},
      body: formData
    });
    const data = await parseResponse(res);
    displayResponse("id_ab", data, res.status);
  } catch (err) {
    displayResponse("id_ab", { error: err.toString() }, 500);
  }
});
</script>
</body>
</html>
