// TimelineBelt — Gantt-style horizontal bars.
// - Channel labels standardized: Pokémon Center Online → ポケセンOL, physical → ポケセン店頭
// - Product names truncated with native title tooltip for overflow
// - 42-day window 4/01 → 5/13 with precise day-based % positioning

const TimelineBelt = ({ products, focusStoreSlug, onHoverStore, onBarClick }) => {
  const isMobile = useIsMobile();
  const LABEL_COL = isMobile ? "100px" : "180px";
  const now = new Date();
  const start = new Date(now.getTime() - 14 * 86400000);
  const end   = new Date(now.getTime() + 30 * 86400000);
  const totalMs = end - start;

  const pctOf = d => ((new Date(d) - start) / totalMs) * 100;

  const typeColor = { lottery: "#3B82F6", preorder: "#10B981", walk_in: "#F59E0B" };
  const typeBorder = { lottery: "#2563EB", preorder: "#059669", walk_in: "#D97706" };

  // Channel label normalization — short roman/english labels for bar fills
  const normalizeChannel = (label) => {
    if (!label) return "";
    if (/online|OL|オンライン/i.test(label)) return "Poké Online";
    if (/pokémon center|ポケモンセンター|pokemon|pokesen|ポケセン|DX|MEGA|SKYTREE|SHIBUYA|東京駅/i.test(label)) return "Poké Store";
    if (/yodo/i.test(label)) return "Yodo";
    if (/bic/i.test(label)) return "Bic";
    if (/aeon|イオン/i.test(label)) return "Aeon";
    if (/yamada|ヤマダ/i.test(label)) return "Yamada";
    if (/toys/i.test(label)) return "ToysRUs";
    if (/amazon/i.test(label)) return "Amazon";
    if (/amiami/i.test(label)) return "amiami";
    if (/joshin/i.test(label)) return "Joshin";
    return label;
  };

  // Tick marks every 7 days (Mon). Labels rendered in JST to stay consistent regardless of browser TZ.
  const ticks = [];
  const jstFmt = new Intl.DateTimeFormat("ja-JP", { timeZone: "Asia/Tokyo", month: "numeric", day: "numeric" });
  for (let t = start.getTime(); t <= end.getTime(); t += 7 * 86400000) {
    const d = new Date(t);
    const pct = ((d - start) / totalMs) * 100;
    // jstFmt returns like "4/22" — normalize to numeric M/D form
    ticks.push({ pct, label: jstFmt.format(d).replace(/\s+/g, ""), date: d });
  }
  const nowPct = ((now - start) / totalMs) * 100;

  // Month boundary — find 5/1
  const monthBoundary = new Date("2026-05-01T00:00:00+09:00");
  const monthPct = ((monthBoundary - start) / totalMs) * 100;

  // Sort products by earliest bar end inside window
  const sortedProducts = [...products].sort((a, b) => {
    const earliest = p => Math.min(...p.bars
      .map(b => new Date(b.end).getTime())
      .filter(t => t >= now.getTime()));
    return earliest(a) - earliest(b);
  });

  return (
    <section style={{
      flexShrink: 0, background: "#fff",
      borderTop: "1px solid var(--border-1)",
      display: "flex", flexDirection: "column",
      height: "100%",
    }}>
      {/* Header */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "10px 20px", borderBottom: "1px solid var(--border-1)",
      }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
          <h2 style={{ margin: 0, font: "600 14px/1 var(--font-body)", color: "var(--fg-1)" }}>時間軸腰帶</h2>
          <span className="jp-sub" style={{ fontSize: 11 }}>Timeline · {jstFmt.format(start).replace(/\s+/g,"")} — {jstFmt.format(end).replace(/\s+/g,"")}</span>
          {focusStoreSlug && (
            <Chip tone="red" dot="#EF4444">篩選中 · {focusStoreSlug}</Chip>
          )}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Chip tone="blue">● 抽選</Chip>
          <Chip tone="green">● 予約</Chip>
          <Chip tone="amber">● 店頭</Chip>
        </div>
      </div>

      {/* Axis row */}
      <div style={{
        display: "grid", gridTemplateColumns: `${LABEL_COL} 1fr`,
        borderBottom: "1px solid var(--border-1)", background: "var(--ink-25)",
      }}>
        <div style={{ padding: "6px 20px", fontSize: 10.5, color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.05em", fontWeight: 500 }}>商品 · 依最近截止排序</div>
        <div style={{ position: "relative", height: 32 }}>
          {/* Month labels */}
          <span style={{ position: "absolute", left: 4, top: 3, fontSize: 10.5, fontWeight: 600, color: "var(--fg-2)" }}>4 月</span>
          <span style={{ position: "absolute", left: `calc(${monthPct}% + 4px)`, top: 3, fontSize: 10.5, fontWeight: 600, color: "var(--fg-2)" }}>5 月</span>
          {/* Day ticks */}
          {ticks.map((t, i) => (
            <div key={i} style={{
              position: "absolute", left: `${t.pct}%`, top: 17,
              transform: "translateX(-50%)",
              font: "500 10px var(--font-mono)", color: "var(--fg-3)",
              fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap",
            }}>{t.label}</div>
          ))}
          {/* NOW marker — pill */}
          <div style={{
            position: "absolute", left: `${nowPct}%`, top: 2,
            transform: "translateX(-50%)",
            background: "var(--red-50)", color: "var(--red-600)",
            border: "1px solid var(--red-100)",
            fontSize: 10, fontWeight: 600,
            padding: "1px 6px", borderRadius: 999,
            zIndex: 3,
          }}>今日</div>
        </div>
      </div>

      {/* Tracks */}
      <div style={{ flex: 1, overflow: "auto" }}>
        {sortedProducts.map((p, i) => (
          <div key={p.key} style={{
            display: "grid", gridTemplateColumns: `${LABEL_COL} 1fr`,
            borderBottom: i === sortedProducts.length - 1 ? "none" : "1px solid var(--border-1)",
            alignItems: "stretch",
            height: 40 + Math.max(0, (p.bars.length - 1)) * 22,
            minHeight: 40,
          }}>
            <div style={{ padding: "8px 16px", display: "flex", flexDirection: "column", gap: 1, justifyContent: "center", background: "var(--ink-25)", overflow: "hidden", minWidth: 0 }}>
              <span title={p.zh}
                style={{
                  font: "600 12.5px var(--font-body)", color: "var(--fg-1)",
                  whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                  maxWidth: "100%",
                }}>{p.zh}</span>
              <span title={p.jp} className="jp-sub"
                style={{
                  fontSize: 10.5,
                  whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                  maxWidth: "100%",
                }}>{p.jp}</span>
            </div>
            <div style={{ position: "relative" }}>
              {/* Minor vertical gridlines — every week */}
              {ticks.map((t, j) => {
                // every 2nd tick is a major line
                const major = j % 2 === 0;
                return (
                  <div key={j} style={{
                    position: "absolute", left: `${t.pct}%`, top: 0, bottom: 0,
                    borderLeft: `1px solid ${major ? "#D1D5DB" : "#E5E7EB"}`,
                  }}/>
                );
              })}
              {/* Month boundary — emphasize */}
              <div style={{ position: "absolute", left: `${monthPct}%`, top: 0, bottom: 0, borderLeft: "1px solid #D1D5DB" }}/>
              {/* Now marker */}
              <div style={{
                position: "absolute", left: `${nowPct}%`, top: 0, bottom: 0,
                width: 2, background: "#EF4444",
                transform: "translateX(-1px)", zIndex: 4,
                boxShadow: "0 0 0 2px rgba(239,68,68,0.12)",
              }}/>
              {/* Bars */}
              {p.bars.map((b, bi) => {
                const left = Math.max(0, pctOf(b.start));
                const right = Math.min(100, pctOf(b.end));
                const width = Math.max(1.5, right - left);
                const dimmed = focusStoreSlug && b.storeSlug && b.storeSlug !== focusStoreSlug;
                const isPast = new Date(b.end) < now;
                const label = normalizeChannel(b.channelLabel);
                const startStr = new Date(b.start).toLocaleDateString("ja-JP", { timeZone: "Asia/Tokyo", month: "numeric", day: "numeric" });
                const endStr = new Date(b.end).toLocaleDateString("ja-JP", { timeZone: "Asia/Tokyo", month: "numeric", day: "numeric" });
                // Rough countdown text
                const daysLeft = Math.floor((new Date(b.end) - now) / 86400000);
                const countdownStr = isPast ? "已結束" :
                  daysLeft > 1 ? `剩 ${daysLeft} 天` :
                  daysLeft === 1 ? "剩 1 天" : `剩 ${Math.max(0, Math.floor((new Date(b.end) - now) / 3600000))} 小時`;
                return (
                  <div key={bi}
                    onMouseEnter={() => onHoverStore?.(b.storeSlug)}
                    onMouseLeave={() => onHoverStore?.(null)}
                    onClick={() => onBarClick?.(p.key)}
                    style={{
                      position: "absolute",
                      left: `${left}%`, width: `${width}%`,
                      top: 8 + bi * 22, height: 20,
                      background: typeColor[b.type] || "#6B7280",
                      border: `1px solid ${typeBorder[b.type] || "#374151"}`,
                      opacity: dimmed ? 0.2 : (isPast ? 0.45 : 0.95),
                      borderRadius: 4, cursor: "pointer",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      color: "#fff", font: "600 10.5px var(--font-body)",
                      whiteSpace: "nowrap", overflow: "hidden", padding: "0 6px",
                      boxSizing: "border-box",
                      transition: "filter 120ms, transform 120ms",
                      zIndex: 2,
                    }}
                    onMouseOver={e => { e.currentTarget.style.filter = "brightness(1.08)"; e.currentTarget.style.zIndex = 6; }}
                    onMouseOut={e => { e.currentTarget.style.filter = ""; e.currentTarget.style.zIndex = 2; }}
                  >
                    {width > 6 ? label : ""}
                    {/* Tooltip */}
                    <div className="bar-tip" style={{
                      position: "absolute", bottom: "calc(100% + 6px)",
                      left: "50%", transform: "translateX(-50%)",
                      background: "#1C1917", color: "#fff",
                      font: "500 11px/1.4 var(--font-body)",
                      padding: "6px 9px", borderRadius: 5,
                      whiteSpace: "nowrap", opacity: 0, pointerEvents: "none",
                      transition: "opacity 120ms", zIndex: 30,
                      boxShadow: "0 8px 20px rgba(0,0,0,0.2)",
                    }}>
                      <div style={{ fontWeight: 600 }}>{label} · {b.typeLabel}</div>
                      <div style={{ color: "#D6D3D1", fontVariantNumeric: "tabular-nums" }}>{startStr} → {endStr}</div>
                      <div style={{ color: isPast ? "#A8A29E" : "#FCA5A5", fontWeight: 500, marginTop: 1 }}>{countdownStr}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      <style>{`
        section .bar-tip { opacity: 0; }
        section [style*="cursor: pointer"]:hover > .bar-tip { opacity: 1; }
      `}</style>
    </section>
  );
};

window.TimelineBelt = TimelineBelt;