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

function DNAReport({ kind = "dog" }) {
  const pet = PET_PROFILES[kind];
  const risks = kind === "cat" ? [
    { name: "慢性腎不全", level: "やや注意", pct: 55, tone: "warn" },
    { name: "肥満傾向", level: "中程度", pct: 50, tone: "warn" },
    { name: "肥大型心筋症", level: "低リスク", pct: 18, tone: "ok" },
    { name: "甲状腺機能亢進症", level: "低リスク", pct: 15, tone: "ok" },
    { name: "毛球症", level: "やや注意", pct: 40, tone: "warn" },
  ] : [
    { name: "膝蓋骨脱臼", level: "やや注意", pct: 60, tone: "warn" },
    { name: "甲状腺機能低下症", level: "やや注意", pct: 45, tone: "warn" },
    { name: "アレルギー性皮膚炎", level: "低リスク", pct: 22, tone: "ok" },
    { name: "白内障", level: "低リスク", pct: 18, tone: "ok" },
    { name: "股関節形成不全", level: "低リスク", pct: 15, tone: "ok" },
  ];
  const traits = kind === "cat" ? [
    { name: "活動量", value: "中", icon: "run", tone: "lime" },
    { name: "消化力", value: "良好", icon: "food", tone: "gold" },
    { name: "肥満傾向", value: "中", icon: "weight", tone: "navy" },
    { name: "ストレス耐性", value: "高い", icon: "shield", tone: "gold" },
  ] : [
    { name: "運動適性", value: "高い", icon: "run", tone: "lime" },
    { name: "消化力", value: "良好", icon: "food", tone: "gold" },
    { name: "肥満傾向", value: "中", icon: "weight", tone: "navy" },
    { name: "ストレス耐性", value: "普通", icon: "shield", tone: "gold" },
  ];
  return (
    <div className="scr">
      {/* Dark hero with status bar inside */}
      <div style={{
        background: "linear-gradient(160deg, var(--primary-2) 0%, var(--primary-deep) 100%)",
        color: "var(--on-primary)",
        position: "relative", overflow: "hidden", flexShrink: 0,
      }}>
        {/* DNA helix watermark */}
        <div style={{ position: "absolute", top: -20, right: -30, opacity: 0.18 }}>
          <Clay name="dna" tone="primary" size={200} />
        </div>
        <div style={{ position: "absolute", top: 100, left: -30, opacity: 0.1 }}>
          <Clay name="paw" tone="cream" size={120} />
        </div>

        <StatusBar onDark />
        <div className="topbar">
          <BackBtnDark />
          <div style={{ display: "flex", gap: 8 }}>
            <CircleIconBtnDark icon="check" tone="gold" />
          </div>
        </div>

        <div style={{ padding: "8px 24px 28px", position: "relative", zIndex: 1 }}>
          <span className="t-eyebrow" style={{ color: "var(--gold)" }}>GENETIC REPORT · 02</span>
          <h1 className="t-h1" style={{ marginTop: 6, color: "var(--on-primary)" }}>
            DNA 解析<br />レポート
          </h1>
          <p className="t-body-sm" style={{ color: "var(--on-primary-muted)", marginTop: 8 }}>
            {pet.name}（{pet.breed}）· 解析完了 2026.04.18
          </p>

          {/* Score row */}
          <div style={{
            marginTop: 22,
            display: "flex", alignItems: "center", gap: 16,
            padding: "14px",
            background: "rgba(255,255,255,0.07)",
            borderRadius: 16,
            border: "1px solid rgba(255,255,255,0.12)",
            backdropFilter: "blur(4px)",
          }}>
            <div style={{ position: "relative" }}>
              <ScoreRingDark score={pet.score} size={72} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 10, color: "var(--on-primary-muted)", fontWeight: 700, letterSpacing: 0.1 }}>
                OVERALL HEALTH
              </div>
              <div className="t-num" style={{ fontSize: 28, fontWeight: 700, color: "var(--on-primary)", lineHeight: 1.1 }}>
                {pet.score}<span style={{ fontSize: 14, opacity: 0.7 }}>/100</span>
              </div>
              <div style={{ fontSize: 10, color: "var(--gold)", marginTop: 4, fontWeight: 600 }}>
                ✦ 同犬種上位 15%
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="scrollbody">
        {/* Segmented control */}
        <div style={{ padding: "20px 20px 0", display: "flex", justifyContent: "center" }}>
          <div className="seg">
            <button className="active">健康リスク</button>
            <button>体質・特性</button>
            <button>栄養提案</button>
          </div>
        </div>

        {/* Risk list */}
        <div style={{ padding: "16px 20px 16px" }}>
          <div className="card">
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6,
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <Clay name="shield" tone="gold" size={26} />
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>遺伝的疾患リスク</div>
                  <div style={{ fontSize: 10, color: "var(--muted)" }}>{risks.length}項目 / 全150項目中</div>
                </div>
              </div>
              <span className="pill pill-gold">2 注意</span>
            </div>
            <div style={{ marginTop: 4 }}>
              {risks.map((r, i) => (
                <div key={i} className="risk-row">
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{r.name}</div>
                    <div className="risk-bar">
                      <div className={r.tone === "warn" ? "warn" : r.tone === "bad" ? "bad" : ""}
                        style={{ width: `${r.pct}%` }} />
                    </div>
                  </div>
                  <span style={{
                    fontSize: 11, fontWeight: 700, marginLeft: 12,
                    color: r.tone === "warn" ? "var(--gold)" : "var(--primary)",
                  }}>{r.level}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Traits */}
        <div className="sec-head">
          <span className="sec-title">体質・特性</span>
          <span className="sec-link">詳細 ›</span>
        </div>
        <div style={{ padding: "0 20px 20px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {traits.map((t, i) => (
            <div key={i} className="card-flat" style={{
              display: "flex", alignItems: "center", gap: 10, padding: 14,
            }}>
              <Clay name={t.icon} tone={t.tone} size={36} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 10, color: "var(--muted)", fontWeight: 600, letterSpacing: 0.04 }}>
                  {t.name}
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }}>{t.value}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Nutrition suggestion */}
        <div style={{ padding: "0 20px 20px" }}>
          <div style={{
            background: "linear-gradient(135deg, var(--accent-soft), var(--surface) 70%)",
            border: "1px solid var(--accent-soft)",
            borderRadius: 18,
            padding: "16px",
            position: "relative", overflow: "hidden",
          }}>
            <div style={{ position: "absolute", top: -10, right: -10, opacity: 0.2 }}>
              <Clay name="pill" tone="accent" size={80} />
            </div>
            <span className="t-eyebrow tx-accent">DNA · NUTRITION</span>
            <div style={{ fontSize: 15, fontWeight: 700, marginTop: 4 }}>
              {pet.name}の体質に合う栄養素
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 10 }}>
              {(kind === "cat"
                ? ["タウリン", "低リン", "EPA/DHA", "高消化性タンパク"]
                : ["グルコサミン", "低脂肪", "オメガ3", "コンドロイチン"]
              ).map((n, i) => (
                <span key={i} className="pill pill-accent">{n}</span>
              ))}
            </div>
            <button className="btn btn-accent btn-block" style={{ marginTop: 14, height: 44, fontSize: 13 }}>
              この体質に合う商品を見る
            </button>
          </div>
        </div>

        {/* Vet supervision footer */}
        <div style={{ padding: "0 20px 20px", display: "flex", gap: 12, alignItems: "center" }}>
          <Clay name="vet" tone="primary" size={36} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600 }}>監修</div>
            <div style={{ fontSize: 12, fontWeight: 700 }}>東西南北動物医療センター</div>
            <div style={{ fontSize: 10, color: "var(--subtle)" }}>獣医師 山田 哲也 監修</div>
          </div>
          <span className="pill pill-ghost">PDF</span>
        </div>
      </div>
      <TabBar active="dna" />
      <HomeIndicator />
    </div>
  );
}

/* small variant of dark icons since topbar buttons are translucent in dark hero */
function BackBtnDark() {
  return (
    <div style={{
      width: 38, height: 38, borderRadius: 19,
      background: "rgba(255,255,255,0.1)",
      border: "1px solid rgba(255,255,255,0.18)",
      display: "flex", alignItems: "center", justifyContent: "center",
      color: "var(--on-primary)",
    }}>
      <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>
  );
}

function CircleIconBtnDark({ icon, tone }) {
  return (
    <div style={{
      width: 38, height: 38, borderRadius: 19,
      background: "rgba(255,255,255,0.1)",
      border: "1px solid rgba(255,255,255,0.18)",
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <Clay name={icon} tone={tone} size={22} />
    </div>
  );
}

function ScoreRingDark({ score = 92, size = 72 }) {
  const stroke = 6;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c * (1 - score / 100);
  return (
    <div style={{ position: "relative", width: size, height: size }}>
      <svg width={size} height={size}>
        <defs>
          <linearGradient id={`srd-${size}`} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#E1C9A8" />
            <stop offset="1" stopColor="#B89366" />
          </linearGradient>
        </defs>
        <circle cx={size / 2} cy={size / 2} r={r}
          stroke="rgba(255,255,255,0.12)" strokeWidth={stroke} fill="none" />
        <circle cx={size / 2} cy={size / 2} r={r}
          stroke={`url(#srd-${size})`} strokeWidth={stroke} fill="none"
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={offset}
          transform={`rotate(-90 ${size / 2} ${size / 2})`} />
      </svg>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      }}>
        <div className="t-num" style={{ fontSize: 22, fontWeight: 700, color: "var(--gold)", lineHeight: 1 }}>
          {score}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DNAReport, BackBtnDark, CircleIconBtnDark, ScoreRingDark });