/* global React, Clay, ClayTile, PetPortrait */
/* ============================================================
   Mobile UI primitives — status bar, tabbar, brand mark
   ============================================================ */

function StatusBar({ onDark = false, time = "9:41" }) {
  return (
    <div className={"statusbar" + (onDark ? " on-dark" : "")}>
      <span>{time}</span>
      <div className="sb-r">
        {/* signal */}
        <svg width="18" height="11" viewBox="0 0 18 11" fill="currentColor">
          <rect x="0" y="7" width="3" height="4" rx="0.7" />
          <rect x="5" y="5" width="3" height="6" rx="0.7" />
          <rect x="10" y="2.5" width="3" height="8.5" rx="0.7" />
          <rect x="15" y="0" width="3" height="11" rx="0.7" />
        </svg>
        {/* wifi */}
        <svg width="15" height="11" viewBox="0 0 15 11" fill="currentColor">
          <path d="M7.5 1 C3.5 1 0 4 0 4 l1.5 1.5 C1.5 5.5 4.5 3 7.5 3 s6 2.5 6 2.5 L15 4 s-3.5 -3 -7.5 -3z" />
          <path d="M7.5 4.5 C5 4.5 2.7 6.5 2.7 6.5 l1.5 1.5 c0 0 1.5 -1.5 3.3 -1.5 s3.3 1.5 3.3 1.5 l1.5 -1.5 c0 0 -2.3 -2 -4.8 -2z" />
          <circle cx="7.5" cy="9.2" r="1.6" />
        </svg>
        {/* battery */}
        <svg width="27" height="12" viewBox="0 0 27 12" fill="none">
          <rect x="0.5" y="0.5" width="23" height="11" rx="3" stroke="currentColor" strokeOpacity="0.45" />
          <rect x="2" y="2" width="20" height="8" rx="1.8" fill="currentColor" />
          <rect x="24.5" y="3.5" width="2" height="5" rx="1" fill="currentColor" opacity="0.45" />
        </svg>
      </div>
    </div>
  );
}

function HomeIndicator({ onDark = false }) {
  return (
    <div style={{
      position: "absolute", bottom: 8, left: 0, right: 0,
      display: "flex", justifyContent: "center", pointerEvents: "none",
    }}>
      <div style={{
        width: 134, height: 5, borderRadius: 3,
        background: onDark ? "rgba(255,255,255,0.4)" : "rgba(15,32,26,0.35)",
      }} />
    </div>
  );
}

/* Brand mark — text + tiny hood symbol */
function Brand({ size = "md", on = "light" }) {
  const ico = (
    <svg width={size === "lg" ? 30 : 22} height={size === "lg" ? 30 : 22} viewBox="0 0 30 30" fill="none">
      <defs>
        <linearGradient id="brand-hood" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#C75A5A" />
          <stop offset="1" stopColor="#6E2A2A" />
        </linearGradient>
      </defs>
      {/* hood silhouette + a paw */}
      <path d="M15 3 C8 3, 3 8, 3 15 v6 c0 4, 3 6, 6 6 h12 c3 0, 6 -2, 6 -6 v-6 c0 -7, -5 -12, -12 -12 Z"
        fill="url(#brand-hood)" />
      <path d="M15 8 C12 8, 9 11, 9 15 v3 c0 2, 1 3, 2 3 h8 c1 0, 2 -1, 2 -3 v-3 c0 -4, -3 -7, -6 -7 Z"
        fill="#FBF8F2" />
      {/* paw print */}
      <ellipse cx="11" cy="14" rx="1.3" ry="1.8" fill="#1F4D3F" />
      <ellipse cx="15" cy="12.5" rx="1.3" ry="1.8" fill="#1F4D3F" />
      <ellipse cx="19" cy="14" rx="1.3" ry="1.8" fill="#1F4D3F" />
      <ellipse cx="15" cy="18" rx="2.6" ry="2" fill="#1F4D3F" />
    </svg>
  );
  const txtColor = on === "dark" ? "var(--on-primary)" : "var(--ink)";
  const jpSize = size === "lg" ? 22 : 17;
  return (
    <div className="brand" style={{ color: txtColor }}>
      {ico}
      <span style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
        <span style={{ fontSize: jpSize, fontWeight: 700, letterSpacing: "-0.01em" }}>赤ずきん</span>
        <span style={{
          fontFamily: "Cormorant Garamond, serif", fontStyle: "italic",
          fontSize: jpSize * 0.55, color: "var(--accent)", marginTop: 2,
        }}>Petits soins</span>
      </span>
    </div>
  );
}

/* Tab bar */
function TabBar({ active = "home" }) {
  const items = [
    { id: "home", label: "ホーム", icon: "home", tone: "primary" },
    { id: "log", label: "ログ", icon: "chart", tone: "primary" },
    { id: "dna", label: "DNA", icon: "dna", tone: "primary" },
    { id: "shop", label: "ショップ", icon: "bag", tone: "accent" },
    { id: "info", label: "情報", icon: "book", tone: "navy" },
  ];
  return (
    <div className="tabbar">
      {items.map((it) => {
        const isActive = it.id === active;
        return (
          <div key={it.id} className={"tabbar-item" + (isActive ? " active" : "")}>
            <div className="ti-icon-wrap" style={{
              transform: isActive ? "translateY(-2px) scale(1.05)" : "none",
              transition: "transform .2s",
              opacity: isActive ? 1 : 0.7,
              filter: isActive ? "none" : "grayscale(0.2)",
            }}>
              <Clay name={it.icon} tone={it.tone} size={28} />
            </div>
            <span style={{ fontWeight: isActive ? 700 : 500 }}>{it.label}</span>
            {isActive && (
              <span style={{
                position: "absolute", marginTop: 70,
                width: 4, height: 4, borderRadius: 2,
                background: "var(--primary)",
              }} />
            )}
          </div>
        );
      })}
    </div>
  );
}

/* Generic top bar */
function TopBar({ title, left, right, onDark = false }) {
  return (
    <div className="topbar">
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        {left}
        {title && <div className="topbar-title" style={{ color: onDark ? "var(--on-primary)" : undefined }}>{title}</div>}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{right}</div>
    </div>
  );
}

/* Icon button (top-right area) */
function CircleIconBtn({ icon = "bell", tone = "gold", withDot = false, size = 38 }) {
  return (
    <div className="topbar-circle-btn" style={{ position: "relative", width: size, height: size }}>
      <Clay name={icon} tone={tone} size={size * 0.6} />
      {withDot && <span className="dot" style={{ position: "absolute", top: 6, right: 6 }} />}
    </div>
  );
}

/* Back chevron */
function BackBtn() {
  return (
    <div className="topbar-circle-btn">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor"
        strokeWidth="2" strokeLinecap="round">
        <path d="M9 2 L4 7 L9 12" />
      </svg>
    </div>
  );
}

/* Quick-action tile (icon + label) */
function QuickTile({ icon, tone, label, sublabel }) {
  return (
    <div style={{
      flex: 1,
      background: "var(--surface)",
      borderRadius: 18,
      padding: "14px 8px",
      display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
      boxShadow: "var(--shadow-clay-1)",
      border: "1px solid var(--border)",
    }}>
      <Clay name={icon} tone={tone} size={40} />
      <div style={{ textAlign: "center" }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "-0.005em" }}>{label}</div>
        {sublabel && <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 1 }}>{sublabel}</div>}
      </div>
    </div>
  );
}

/* Score ring component */
function ScoreRing({ score = 92, size = 96, label = "健康スコア", stroke = 8 }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c * (1 - score / 100);
  return (
    <div className="score-ring" style={{ width: size, height: size }}>
      <svg width={size} height={size}>
        <defs>
          <linearGradient id={`sr-${size}-${score}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="var(--primary-3)" />
            <stop offset="1" stopColor="var(--primary)" />
          </linearGradient>
        </defs>
        <circle cx={size / 2} cy={size / 2} r={r}
          stroke="var(--surface-soft)" strokeWidth={stroke} fill="none" />
        <circle cx={size / 2} cy={size / 2} r={r}
          stroke={`url(#sr-${size}-${score})`} strokeWidth={stroke} fill="none"
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={offset}
          transform={`rotate(-90 ${size / 2} ${size / 2})`} />
      </svg>
      <div className="score-inner">
        <div className="t-num" style={{
          fontSize: size * 0.34, fontWeight: 700, lineHeight: 1, color: "var(--primary)",
        }}>{score}</div>
        <div style={{ fontSize: 9, color: "var(--muted)", marginTop: 2, letterSpacing: "0.04em" }}>{label}</div>
      </div>
    </div>
  );
}

/* DNA strip (decorative) */
function DNAStrip({ count = 24 }) {
  return (
    <div className="dna-strip">
      {Array.from({ length: count }).map((_, i) => <span key={i} />)}
    </div>
  );
}

/* Mini bar chart */
function MiniBars({ data = [9.4, 9.5, 9.5, 9.6, 9.7, 9.7, 9.8], height = 56, labels }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  return (
    <div>
      <div className="minibars" style={{ height }}>
        {data.map((v, i) => {
          const h = 35 + ((v - min) / range) * 65;
          return (
            <div key={i} className={"mb" + (i === data.length - 1 ? " active" : "")}
              style={{ height: `${h}%` }} />
          );
        })}
      </div>
      {labels && (
        <div style={{ display: "flex", marginTop: 6, gap: 6 }}>
          {labels.map((l, i) => (
            <div key={i} style={{
              flex: 1, fontSize: 9, color: "var(--muted)", textAlign: "center", fontWeight: 600,
            }}>{l}</div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  StatusBar, HomeIndicator, Brand, TabBar, TopBar, CircleIconBtn, BackBtn,
  QuickTile, ScoreRing, DNAStrip, MiniBars,
});