<!doctype html>

<html lang="ko">

<head>

  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <title>YouTube Trend Analyzer</title>

  <style>

    body { font-family: system-ui, -apple-system, Arial; margin: 20px; }

    .row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

    input, select, button { padding:10px; font-size:14px; }

    table { width:100%; border-collapse:collapse; margin-top:14px; }

    th, td { border-bottom:1px solid #ddd; padding:10px; vertical-align:top; }

    th { background:#f7f7f7; text-align:left; }

    img { width:140px; border-radius:8px; }

    .muted { color:#666; font-size:12px; }

    .error { color:#b00020; white-space:pre-wrap; margin-top:10px; }

  </style>

</head>

<body>

  <h2>실데이터 기반 YouTube 트렌드 분석기</h2>

  <p class="muted">※ YouTube API 실제 데이터만 표시합니다.</p>


  <div class="row">

    <input id="q" placeholder="키워드 입력 (예: bluefin tuna)" size="30" />

    <select id="region">

      <option value="US">US</option>

      <option value="KR">KR</option>

      <option value="JP">JP</option>

    </select>

    <button id="go">검색</button>

  </div>


  <div id="status" class="muted"></div>

  <div id="err" class="error"></div>


  <table id="tbl" style="display:none;">

    <thead>

      <tr>

        <th>썸네일</th>

        <th>제목 / 채널</th>

        <th>게시일</th>

        <th>길이</th>

        <th>조회수</th>

        <th>좋아요</th>

        <th>댓글</th>

      </tr>

    </thead>

    <tbody id="body"></tbody>

  </table>


<script>

  // ✅ 이미 성공한 Worker 주소

  const API_BASE = "https://still-unit-657e.super-fog-9c62.workers.dev";


  const $ = (id) => document.getElementById(id);


  function fmt(n){ return n==null ? "N/A" : n.toLocaleString(); }

  function fmtSec(s){

    if(s==null) return "N/A";

    return Math.floor(s/60)+":"+String(s%60).padStart(2,"0");

  }


  $("go").onclick = run;

  $("q").onkeydown = (e)=>{ if(e.key==="Enter") run(); };


  async function run(){

    $("err").textContent="";

    $("status").textContent="불러오는 중…";

    $("tbl").style.display="none";

    $("body").innerHTML="";


    const q = $("q").value.trim();

    if(!q){ $("status").textContent=""; return; }


    try{

      const res = await fetch(`${API_BASE}/api/search?q=${encodeURIComponent(q)}&region=${$("region").value}&max=10`);

      const data = await res.json();

      if(!res.ok) throw new Error(JSON.stringify(data,null,2));


      $("status").textContent = `결과 ${data.videos.length}개`;

      for(const v of data.videos){

        const tr = document.createElement("tr");

        tr.innerHTML = `

          <td><img src="${v.thumbnail}"></td>

          <td><b>${v.title}</b><br><span class="muted">${v.channelTitle}</span></td>

          <td>${v.publishedAt}</td>

          <td>${fmtSec(v.durationSec)}</td>

          <td>${fmt(v.viewCount)}</td>

          <td>${fmt(v.likeCount)}</td>

          <td>${fmt(v.commentCount)}</td>`;

        $("body").appendChild(tr);

      }

      $("tbl").style.display="";

    }catch(e){

      $("status").textContent="";

      $("err").textContent = "오류:\n"+e.message;

    }

  }

</script>

</body>

</html>