/* global React, Clay, ClayTile, PetPortrait, StatusBar, HomeIndicator, Brand, TabBar, TopBar, CircleIconBtn, BackBtn, QuickTile, ScoreRing, DNAStrip, MiniBars, PET_PROFILES */

function HealthLog({ kind = "dog", density = "comfortable" }) {
  const pet = PET_PROFILES[kind];
  return (
    <div className="scr">
      <StatusBar />
      <TopBar
        left={<BackBtn />}
        title="健康ログ"
        right={<CircleIconBtn icon="camera" tone="navy" />}
      />
      <div className="scrollbody">
        {/* Date strip */}
        <div style={{
          margin: "4px 20px 16px",
          padding: "14px 16px",
          background: "var(--surface)",
          borderRadius: 16,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          boxShadow: "var(--shadow-clay-1)",
          border: "1px solid var(--border)",
        }}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="var(--muted)"
            strokeWidth="2" strokeLinecap="round"><path d="M12 3 L6 9 L12 15" /></svg>
          <div style={{ textAlign: "center" }}>
            <div style={{ fontSize: 10, color: "var(--muted)", letterSpacing: 0.06, fontWeight: 600 }}>
              TODAY · 2026.05.20
            </div>
            <div style={{ fontSize: 16, fontWeight: 700, marginTop: 2 }}>
              火曜日
            </div>
          </div>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="var(--muted)"
            strokeWidth="2" strokeLinecap="round"><path d="M6 3 L12 9 L6 15" /></svg>
        </div>

        {/* Mood scale — first */}
        <div style={{ padding: "0 20px 16px" }}>
          <div className="card">
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <Clay name="heart" tone="accent" size={28} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>今日の体調</div>
                <div style={{ fontSize: 10, color: "var(--muted)" }}>{pet.name}の今の様子は？</div>
              </div>
            </div>
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8,
            }}>
              {[
                { label: "悪い", tone: "accent", score: 1 },
                { label: "やや", tone: "rose", score: 2 },
                { label: "普通", tone: "sand", score: 3 },
                { label: "良い", tone: "lime", score: 4, active: true },
                { label: "絶好調", tone: "primary", score: 5 },
              ].map((m, i) => (
                <div key={i} style={{
                  display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
                }}>
                  <div style={{
                    width: 46, height: 46,
                    borderRadius: 14,
                    background: m.active ? "var(--primary-tint)" : "var(--surface-tint)",
                    border: "2px solid " + (m.active ? "var(--primary)" : "transparent"),
                    display: "flex", alignItems: "center", justifyContent: "center",
                    boxShadow: m.active ? "var(--shadow-clay-2)" : "none",
                  }}>
                    <MoodFace level={m.score} />
                  </div>
                  <span style={{
                    fontSize: 9, fontWeight: m.active ? 700 : 600,
                    color: m.active ? "var(--primary)" : "var(--muted)",
                  }}>{m.label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Meals */}
        <div style={{ padding: "0 20px 16px" }}>
          <div className="card">
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
              <Clay name="food" tone="gold" size={28} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>食事</div>
                <div style={{ fontSize: 10, color: "var(--muted)" }}>朝・夜 それぞれの食べ具合</div>
              </div>
            </div>
            <MealRow label="朝ごはん" time="7:30" active="完食" />
            <div style={{ height: 1, background: "var(--divider)", margin: "12px 0" }} />
            <MealRow label="夜ごはん" time="18:00" active="完食" />
          </div>
        </div>

        {/* Water + Walk pair */}
        <div style={{ padding: "0 20px 16px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          <NumberCard icon="water" tone="sky" label="水分" value="450" unit="ml" goal="500 ml" />
          <NumberCard icon="run" tone="lime" label="散歩" value="25" unit="分" goal="35分" warn />
        </div>

        {/* Stool */}
        <div style={{ padding: "0 20px 16px" }}>
          <div className="card">
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
              <Clay name="check" tone="primary" size={28} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>排泄</div>
                <div style={{ fontSize: 10, color: "var(--muted)" }}>状態を選んでください</div>
              </div>
            </div>
            <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
              {["正常", "やや軟便", "軟便", "下痢", "硬め"].map((s, i) => (
                <span key={i} className={"pill" + (i === 0 ? "" : " pill-ghost")}
                  style={{ height: 32, fontSize: 12, padding: "0 14px" }}>{s}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Weight row */}
        <div style={{ padding: "0 20px 16px" }}>
          <div className="card" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <Clay name="weight" tone="navy" size={36} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>体重</div>
              <div style={{ fontSize: 10, color: "var(--muted)" }}>毎週1回の計測がおすすめ</div>
            </div>
            <div style={{
              display: "flex", alignItems: "baseline", gap: 2,
              padding: "6px 12px",
              background: "var(--surface-tint)",
              borderRadius: 10,
              border: "1px solid var(--border)",
            }}>
              <span className="t-num" style={{ fontSize: 20, fontWeight: 700, color: "var(--primary)" }}>
                {kind === "cat" ? "3.6" : "9.8"}
              </span>
              <span style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600 }}>kg</span>
            </div>
          </div>
        </div>

        {/* Save button */}
        <div style={{ padding: "8px 20px 20px" }}>
          <button className="btn btn-primary btn-block">
            <Clay name="check" tone="primary" size={18} />
            <span style={{ marginLeft: 4 }}>本日のログを保存</span>
          </button>
        </div>
      </div>
      <TabBar active="log" />
      <HomeIndicator />
    </div>
  );
}

function MealRow({ label, time, active }) {
  const options = ["完食", "半分", "少し", "食べず"];
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }}>
        <div style={{ fontSize: 12, fontWeight: 700 }}>{label}</div>
        <div style={{ fontSize: 10, color: "var(--muted)" }}>{time}</div>
      </div>
      <div style={{ display: "flex", gap: 5 }}>
        {options.map((o, i) => (
          <button key={i} style={{
            flex: 1, height: 36, borderRadius: 11,
            fontSize: 11, fontWeight: 700,
            background: o === active ? "var(--primary-tint)" : "var(--surface-tint)",
            color: o === active ? "var(--primary)" : "var(--muted)",
            border: "1.5px solid " + (o === active ? "var(--primary)" : "transparent"),
          }}>{o}</button>
        ))}
      </div>
    </div>
  );
}

function NumberCard({ icon, tone, label, value, unit, goal, warn }) {
  return (
    <div className="card-flat" style={{ padding: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <Clay name={icon} tone={tone} size={28} />
        <div style={{ fontSize: 12, fontWeight: 700 }}>{label}</div>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 3 }}>
        <span className="t-num" style={{
          fontSize: 24, fontWeight: 700, color: warn ? "var(--gold)" : "var(--primary)",
        }}>{value}</span>
        <span style={{ fontSize: 11, fontWeight: 600, color: "var(--muted)" }}>{unit}</span>
      </div>
      <div style={{ fontSize: 9, color: warn ? "var(--gold)" : "var(--muted)", marginTop: 2, fontWeight: 600 }}>
        {warn ? "⚠ " : "目標 "}{goal}
      </div>
    </div>
  );
}

function MoodFace({ level }) {
  const colors = ["#B04545", "#D67B7B", "#B89366", "#5BA088", "#1F4D3F"];
  const c = colors[level - 1];
  // Draw simple curved face based on level
  const path = {
    1: "M8 16 Q12 12 16 16",  // sad
    2: "M8 15 Q12 13 16 15",
    3: "M8 14 L16 14",
    4: "M8 13 Q12 16 16 13",  // happy
    5: "M8 12 Q12 18 16 12",
  }[level];
  return (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10" fill={c} opacity="0.18" />
      <circle cx="9" cy="10" r="1.2" fill={c} />
      <circle cx="15" cy="10" r="1.2" fill={c} />
      <path d={path} stroke={c} strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

window.HealthLog = HealthLog;