/* global React, Clay, ClayTile, PetPortrait, StatusBar, HomeIndicator, Brand, TabBar, TopBar, CircleIconBtn, BackBtn, QuickTile, ScoreRing, DNAStrip, MiniBars */
/* ============================================================
   HOME screen — pet profile + dashboard
   Supports kind: "dog" | "cat"
   density: "compact" | "comfortable"
   layout: "stacked" | "hero" | "grid"
   ============================================================ */

const PET_PROFILES = {
  dog: {
    name: "ポチ",
    breed: "柴犬",
    sex: "♂",
    age: "3歳2ヶ月",
    weight: "9.8 kg",
    score: 92,
    dnaTone: "primary",
    accentColor: "var(--gold)",
  },
  cat: {
    name: "ミケ",
    breed: "三毛猫",
    sex: "♀",
    age: "2歳5ヶ月",
    weight: "3.6 kg",
    score: 88,
    dnaTone: "primary",
    accentColor: "var(--gold)",
  },
};

function HomeHero({ pet, kind, layout }) {
  // Variant A — full-width hero with portrait
  return (
    <div className="card-primary" style={{ marginBottom: 16 }}>
      {/* Hood ribbon */}
      <div className="hood-ribbon" />
      {/* Decorative paw watermark */}
      <div style={{
        position: "absolute", bottom: -20, right: -10, opacity: 0.13,
        transform: "rotate(15deg)",
      }}>
        <Clay name="paw" tone="cream" size={140} />
      </div>

      <div style={{ position: "relative", zIndex: 1, display: "flex", gap: 14, alignItems: "center" }}>
        <div style={{
          width: 76, height: 76, borderRadius: "50%",
          background: "var(--surface)",
          border: "3px solid var(--gold)",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
        }}>
          <Clay name={kind} tone="sand" size={64} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 6, marginBottom: 4,
          }}>
            <span className="t-eyebrow" style={{ color: "var(--gold)", opacity: 0.85 }}>MY PARTNER</span>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#5BBE82" }} />
          </div>
          <h2 style={{
            color: "var(--on-primary)", fontSize: 24, fontWeight: 700,
            letterSpacing: "-0.015em",
            display: "flex", alignItems: "baseline", gap: 8,
          }}>
            {pet.name}
            <span style={{ fontSize: 12, fontWeight: 500, opacity: 0.7 }}>{pet.sex} · {pet.age}</span>
          </h2>
          <p style={{
            color: "var(--on-primary-muted)", fontSize: 12, marginTop: 2,
            letterSpacing: 0.02,
          }}>
            {pet.breed} · 体重 {pet.weight}
          </p>
        </div>
        <ScoreRing score={pet.score} size={64} label="健康" stroke={6} />
      </div>

      {/* DNA strip */}
      <div style={{
        marginTop: 16, padding: "12px 14px",
        background: "rgba(255,255,255,0.07)",
        borderRadius: 14,
        backdropFilter: "blur(4px)",
        display: "flex", alignItems: "center", gap: 12,
      }}>
        <Clay name="dna" tone="gold" size={32} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontSize: 11, color: "var(--gold)", letterSpacing: 0.12, fontWeight: 700,
            textTransform: "uppercase", fontFamily: "Inter",
          }}>DNA · ANALYSIS COMPLETE</div>
          <div style={{ fontSize: 13, color: "var(--on-primary)", marginTop: 2, fontWeight: 600 }}>
            遺伝的特性 150項目を解析済み
          </div>
        </div>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="var(--on-primary-muted)"
          strokeWidth="2" strokeLinecap="round"><path d="M6 4l4 4-4 4" /></svg>
      </div>
    </div>
  );
}

function QuickActions() {
  const actions = [
    { icon: "chart", tone: "primary", label: "健康ログ", sub: "今日" },
    { icon: "dna", tone: "primary", label: "DNA", sub: "結果" },
    { icon: "bag", tone: "accent", label: "ショップ", sub: "おすすめ" },
    { icon: "book", tone: "navy", label: "読みもの", sub: "新着3" },
  ];
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr",
      gap: 8, padding: "0 20px 16px",
    }}>
      {actions.map((a, i) => <QuickTile key={i} {...a} />)}
    </div>
  );
}

function TodaySummary({ density = "comfortable" }) {
  const items = [
    { icon: "food", tone: "gold", label: "食事", value: "完食", sub: "朝 ✓ 夜 ✓", ok: true },
    { icon: "water", tone: "sky", label: "水分", value: "450ml", sub: "目標 500ml", ok: true },
    { icon: "run", tone: "lime", label: "運動", value: "25分", sub: "目標未達 -10分", ok: false },
    { icon: "heart", tone: "accent", label: "体調", value: "良好", sub: "通常通り", ok: true },
  ];
  const pad = density === "compact" ? "10px 12px" : "14px 14px";
  return (
    <div style={{ padding: "0 20px 20px" }}>
      <div style={{
        background: "var(--surface)",
        borderRadius: 20,
        padding: 12,
        boxShadow: "var(--shadow-clay-2)",
        border: "1px solid var(--border)",
      }}>
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "6px 6px 12px", borderBottom: "1px solid var(--divider)",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Clay name="sun" tone="gold" size={26} />
            <div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>今日のサマリー</div>
              <div style={{ fontSize: 10, color: "var(--muted)" }}>2026.05.20 火曜日</div>
            </div>
          </div>
          <span className="pill pill-success">
            <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><circle cx="4" cy="4" r="3" /></svg>
            3 / 4 達成
          </span>
        </div>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 10,
        }}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding: pad,
              borderRadius: 14,
              background: it.ok ? "var(--surface-tint)" : "var(--gold-soft)",
              border: "1px solid " + (it.ok ? "var(--border)" : "var(--gold)"),
              borderColor: it.ok ? "var(--border)" : "var(--gold-soft)",
              display: "flex", alignItems: "center", gap: 10,
            }}>
              <Clay name={it.icon} tone={it.tone} size={32} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 10, color: "var(--muted)", letterSpacing: 0.04, fontWeight: 600 }}>
                  {it.label}
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, marginTop: 1 }}>{it.value}</div>
                <div style={{ fontSize: 9, color: "var(--subtle)", marginTop: 1 }}>{it.sub}</div>
              </div>
              {!it.ok && (
                <span style={{
                  fontSize: 10, color: "var(--gold)", fontWeight: 700,
                }}>⚠</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function WeightCard({ kind }) {
  const data = kind === "cat"
    ? [3.5, 3.55, 3.5, 3.55, 3.58, 3.6, 3.6]
    : [9.4, 9.5, 9.5, 9.6, 9.6, 9.7, 9.8];
  const labels = ["月", "火", "水", "木", "金", "土", "日"];
  return (
    <div style={{ padding: "0 20px 20px" }}>
      <div className="card">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Clay name="weight" tone="navy" size={28} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>体重トレンド</div>
              <div style={{ fontSize: 10, color: "var(--muted)" }}>過去7日間</div>
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="t-num" style={{ fontSize: 18, fontWeight: 700, color: "var(--primary)" }}>
              {data[data.length - 1].toFixed(1)}<span style={{ fontSize: 10, marginLeft: 2 }}>kg</span>
            </div>
            <div style={{ fontSize: 9, color: "var(--success)", fontWeight: 600 }}>
              ↑ +{(data[data.length - 1] - data[0]).toFixed(2)}kg
            </div>
          </div>
        </div>
        <MiniBars data={data} labels={labels} height={48} />
      </div>
    </div>
  );
}

function DNATeaser({ kind }) {
  return (
    <div style={{ padding: "0 20px 20px" }}>
      <div style={{
        background: "linear-gradient(135deg, var(--surface) 0%, var(--primary-tint) 100%)",
        borderRadius: 20,
        padding: "16px 16px 16px",
        border: "1px solid var(--primary-soft)",
        display: "flex", gap: 14, alignItems: "center",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", top: -20, right: -20, opacity: 0.15,
        }}>
          <Clay name="dna" tone="primary" size={100} />
        </div>
        <div style={{ flexShrink: 0 }}>
          <Clay name="dna" tone="primary" size={48} />
        </div>
        <div style={{ flex: 1, minWidth: 0, zIndex: 1 }}>
          <span className="t-eyebrow tx-accent">DNA REPORT · 02</span>
          <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4 }}>
            {kind === "cat" ? "三毛猫のリスク傾向" : "柴犬のリスク傾向"}
          </div>
          <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 2 }}>
            {kind === "cat" ? "肥満傾向 / 慢性腎不全 を要観察" : "膝蓋骨脱臼 / 甲状腺 を要観察"}
          </div>
        </div>
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="var(--primary)"
          strokeWidth="2" strokeLinecap="round"><path d="M7 4l6 6-6 6" /></svg>
      </div>
    </div>
  );
}

function RecommendedTeaser({ kind }) {
  const items = kind === "cat" ? [
    { name: "毛玉ケア フード", price: "¥3,280", icon: "food", tone: "gold" },
    { name: "腎臓ケア サプリ", price: "¥2,480", icon: "pill", tone: "accent" },
  ] : [
    { name: "関節サポート フード", price: "¥3,980", icon: "food", tone: "gold" },
    { name: "グルコサミン", price: "¥2,480", icon: "pill", tone: "accent" },
  ];
  return (
    <>
      <div className="sec-head">
        <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
          <span className="sec-title">DNAおすすめ</span>
          <span className="t-eyebrow tx-accent" style={{ fontSize: 10 }}>FOR YOU</span>
        </div>
        <span className="sec-link">すべて見る ›</span>
      </div>
      <div style={{
        display: "flex", gap: 12, overflowX: "auto", padding: "0 20px 20px",
      }}>
        {items.map((p, i) => (
          <div key={i} style={{
            flexShrink: 0, width: 152,
            background: "var(--surface)",
            borderRadius: 18,
            padding: 12,
            border: "1px solid var(--border)",
            boxShadow: "var(--shadow-clay-1)",
          }}>
            <div style={{
              height: 80,
              background: "linear-gradient(160deg, var(--surface-tint), var(--surface-soft))",
              borderRadius: 12,
              display: "flex", alignItems: "center", justifyContent: "center",
              marginBottom: 10,
              position: "relative",
            }}>
              <Clay name={p.icon} tone={p.tone} size={56} />
              <span style={{
                position: "absolute", top: 6, left: 6,
                background: "var(--primary)", color: "var(--on-primary)",
                padding: "2px 7px", borderRadius: 999, fontSize: 8.5, fontWeight: 700,
                letterSpacing: 0.06,
              }}>DNA</span>
            </div>
            <div style={{ fontSize: 12, fontWeight: 700, lineHeight: 1.35 }}>{p.name}</div>
            <div className="t-num" style={{
              fontSize: 14, fontWeight: 700, color: "var(--primary)", marginTop: 6,
            }}>{p.price}</div>
          </div>
        ))}
      </div>
    </>
  );
}

function Home({ kind = "dog", density = "comfortable", layout = "hero" }) {
  const pet = PET_PROFILES[kind];
  return (
    <div className="scr">
      <StatusBar />
      <TopBar
        left={<Brand size="md" />}
        right={
          <>
            <CircleIconBtn icon="bell" tone="gold" withDot size={36} />
            <CircleIconBtn icon="gear" tone="sand" size={36} />
          </>
        }
      />
      <div className="scrollbody">
        <div style={{ padding: "12px 20px 0" }}>
          <HomeHero pet={pet} kind={kind} layout={layout} />
        </div>
        <QuickActions />
        <TodaySummary density={density} />
        <DNATeaser kind={kind} />
        <WeightCard kind={kind} />
        <RecommendedTeaser kind={kind} />
        <div style={{ height: 12 }} />
      </div>
      <TabBar active="home" />
      <HomeIndicator />
    </div>
  );
}

window.Home = Home;
window.PET_PROFILES = PET_PROFILES;