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

/* ec mode: "inapp" (full purchase flow inside app) | "external" (browse here, buy on EC site) */

function Shop({ kind = "dog", ec = "inapp" }) {
  const pet = PET_PROFILES[kind];
  const recommended = kind === "cat" ? [
    { name: "毛玉ケア フード", sub: "三毛猫向け 1kg", price: "¥3,280", origPrice: "¥3,800", icon: "food", tone: "gold", dna: true },
    { name: "腎臓ケア サプリメント", sub: "30日分", price: "¥2,480", icon: "pill", tone: "accent", dna: true },
    { name: "毛玉対応 ブラシ", sub: "プレミアム", price: "¥1,980", icon: "shield", tone: "navy" },
    { name: "歯みがきトリート", sub: "60g", price: "¥980", icon: "bone", tone: "cream" },
  ] : [
    { name: "関節サポート フード", sub: "低脂肪 2kg", price: "¥3,980", origPrice: "¥4,500", icon: "food", tone: "gold", dna: true },
    { name: "グルコサミン サプリ", sub: "60粒入り", price: "¥2,480", icon: "pill", tone: "accent", dna: true },
    { name: "オメガ3 オイル", sub: "犬用 30ml", price: "¥1,980", icon: "water", tone: "sky" },
    { name: "デンタル ガム", sub: "柴犬サイズ", price: "¥1,280", icon: "bone", tone: "cream" },
  ];

  return (
    <div className="scr">
      <StatusBar />
      <TopBar
        left={<div className="brand"><span className="brand-jp" style={{ fontSize: 16, fontWeight: 700 }}>ショップ</span></div>}
        right={
          <>
            <CircleIconBtn icon="bell" tone="gold" />
            <div style={{ position: "relative" }}>
              <CircleIconBtn icon="cart" tone="primary" />
              <span style={{
                position: "absolute", top: -3, right: -3,
                background: "var(--accent)", color: "#FFF",
                fontSize: 9, fontWeight: 700,
                width: 16, height: 16, borderRadius: 8,
                display: "flex", alignItems: "center", justifyContent: "center",
                border: "2px solid var(--bg)",
              }}>2</span>
            </div>
          </>
        }
      />
      <div className="scrollbody">
        {/* DNA personalized banner */}
        <div style={{ padding: "8px 20px 16px" }}>
          <div style={{
            background: "linear-gradient(135deg, var(--primary), var(--primary-deep))",
            color: "var(--on-primary)",
            borderRadius: 20,
            padding: "16px",
            position: "relative", overflow: "hidden",
          }}>
            <div style={{ position: "absolute", top: -20, right: -10, opacity: 0.18 }}>
              <Clay name="dna" tone="primary" size={130} />
            </div>
            <div style={{ position: "relative", zIndex: 1 }}>
              <span className="t-eyebrow" style={{ color: "var(--gold)" }}>FOR {pet.name.toUpperCase()}</span>
              <h2 style={{ fontSize: 19, fontWeight: 700, color: "var(--on-primary)", marginTop: 4, lineHeight: 1.3 }}>
                DNA解析に基づく<br />おすすめセレクション
              </h2>
              <div style={{
                display: "flex", gap: 6, marginTop: 12, flexWrap: "wrap",
              }}>
                {(kind === "cat"
                  ? ["腎臓ケア", "毛玉対応", "肥満予防"]
                  : ["関節サポート", "低脂肪", "皮膚ケア"]
                ).map((tag, i) => (
                  <span key={i} style={{
                    padding: "4px 10px", borderRadius: 999, fontSize: 10, fontWeight: 700,
                    background: "rgba(255,255,255,0.12)", color: "var(--gold)",
                    border: "1px solid rgba(255,255,255,0.1)",
                  }}>{tag}</span>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Category strip */}
        <div style={{
          padding: "0 20px 16px", display: "flex", gap: 10, overflowX: "auto",
        }}>
          {[
            { icon: "food", tone: "gold", label: "フード", active: true },
            { icon: "pill", tone: "accent", label: "サプリ" },
            { icon: "shield", tone: "navy", label: "ケア用品" },
            { icon: "bone", tone: "cream", label: "おやつ" },
            { icon: "paw", tone: "primary", label: "おもちゃ" },
          ].map((c, i) => (
            <div key={i} style={{
              display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
              flexShrink: 0, minWidth: 60,
            }}>
              <div style={{
                width: 54, height: 54, borderRadius: 16,
                background: c.active ? "var(--primary-tint)" : "var(--surface)",
                border: "1.5px solid " + (c.active ? "var(--primary)" : "var(--border)"),
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <Clay name={c.icon} tone={c.tone} size={32} />
              </div>
              <span style={{ fontSize: 10, fontWeight: c.active ? 700 : 600, color: c.active ? "var(--primary)" : "var(--muted)" }}>
                {c.label}
              </span>
            </div>
          ))}
        </div>

        {/* Top recommendation hero */}
        <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: 9 }}>BEST MATCH</span>
          </div>
          <span className="sec-link">並び替え ⇅</span>
        </div>

        {/* Featured product */}
        <div style={{ padding: "0 20px 16px" }}>
          <div style={{
            background: "var(--surface)",
            borderRadius: 22,
            padding: 14,
            border: "1px solid var(--border)",
            boxShadow: "var(--shadow-clay-2)",
            display: "flex", gap: 14, position: "relative", overflow: "hidden",
          }}>
            <div style={{
              width: 92, height: 92, borderRadius: 16, flexShrink: 0,
              background: "linear-gradient(160deg, var(--gold-soft), var(--surface-soft))",
              display: "flex", alignItems: "center", justifyContent: "center",
              position: "relative",
            }}>
              <Clay name="food" tone="gold" size={70} />
              <span style={{
                position: "absolute", top: -4, left: -4,
                background: "var(--accent)", color: "#FFF",
                padding: "3px 8px", borderRadius: 8, fontSize: 9, fontWeight: 700,
                letterSpacing: 0.08,
              }}>BEST</span>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <span className="pill pill-accent" style={{ marginBottom: 6 }}>🧬 DNA提案</span>
              <div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.3, marginTop: 4 }}>
                {recommended[0].name}
              </div>
              <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>
                {recommended[0].sub}
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 6 }}>
                <span className="t-num" style={{ fontSize: 17, fontWeight: 700, color: "var(--primary)" }}>
                  {recommended[0].price}
                </span>
                {recommended[0].origPrice && (
                  <span style={{ fontSize: 10, color: "var(--subtle)", textDecoration: "line-through" }}>
                    {recommended[0].origPrice}
                  </span>
                )}
              </div>
              <div style={{ display: "flex", gap: 6, marginTop: 8 }}>
                {ec === "inapp" ? (
                  <>
                    <button className="btn btn-primary" style={{ flex: 1, height: 32, fontSize: 11, borderRadius: 10 }}>
                      カート
                    </button>
                    <button className="btn btn-ghost" style={{ height: 32, padding: "0 10px", fontSize: 11, borderRadius: 10 }}>
                      定期 -10%
                    </button>
                  </>
                ) : (
                  <button className="btn btn-primary" style={{ flex: 1, height: 32, fontSize: 11, borderRadius: 10 }}>
                    <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor"
                      strokeWidth="2" strokeLinecap="round"><path d="M3 3h5v5M8 3 L3 8" /></svg>
                    ECサイトで購入
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Grid of others */}
        <div style={{ padding: "0 20px 16px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          {recommended.slice(1).map((p, i) => (
            <ProductCard key={i} p={p} ec={ec} />
          ))}
        </div>

        {/* Editorial banner */}
        <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",
            display: "flex", alignItems: "center", gap: 14,
          }}>
            <Clay name="bag" tone="accent" size={48} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontSize: 9, fontWeight: 700, letterSpacing: 0.1,
                color: "var(--accent)",
              }}>東西南北屋 BRAND</div>
              <div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }}>
                ペット同伴OK カバン
              </div>
              <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>
                おさんぽにちょうどいい
              </div>
            </div>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="var(--accent)"
              strokeWidth="2" strokeLinecap="round"><path d="M6 3l5 5-5 5" /></svg>
          </div>
        </div>
      </div>
      <TabBar active="shop" />
      <HomeIndicator />
    </div>
  );
}

function ProductCard({ p, ec }) {
  return (
    <div style={{
      background: "var(--surface)",
      borderRadius: 16,
      padding: 10,
      border: "1px solid var(--border)",
      boxShadow: "var(--shadow-clay-1)",
    }}>
      <div style={{
        height: 96, borderRadius: 12,
        background: "linear-gradient(160deg, var(--surface-tint), var(--surface-soft))",
        display: "flex", alignItems: "center", justifyContent: "center",
        position: "relative", marginBottom: 8,
      }}>
        <Clay name={p.icon} tone={p.tone} size={64} />
        {p.dna && (
          <span style={{
            position: "absolute", top: 6, left: 6,
            background: "var(--primary)", color: "var(--on-primary)",
            padding: "2px 7px", borderRadius: 6, fontSize: 8.5, fontWeight: 700,
            letterSpacing: 0.08,
          }}>DNA</span>
        )}
        <button style={{
          position: "absolute", top: 6, right: 6,
          width: 24, height: 24, borderRadius: 12,
          background: "var(--surface)",
          border: "1px solid var(--border)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="var(--accent)"
            strokeWidth="1.8" strokeLinecap="round"><path d="M5.5 9 L1.5 5 C0 3 1.5 1 3 1 C4 1 4.5 2 5.5 2 C6.5 2 7 1 8 1 C9.5 1 11 3 9.5 5 Z" /></svg>
        </button>
      </div>
      <div style={{ fontSize: 12, fontWeight: 700, lineHeight: 1.3, minHeight: 32 }}>{p.name}</div>
      <div style={{ fontSize: 9, color: "var(--muted)", marginTop: 2 }}>{p.sub}</div>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 6 }}>
        <span className="t-num" style={{ fontSize: 14, fontWeight: 700, color: "var(--primary)" }}>
          {p.price}
        </span>
        <button style={{
          width: 28, height: 28, borderRadius: 9,
          background: "var(--primary)", color: "var(--on-primary)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          {ec === "external" ? (
            <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor"
              strokeWidth="2" strokeLinecap="round"><path d="M3 3h5v5M8 3 L3 8" /></svg>
          ) : (
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor"
              strokeWidth="2" strokeLinecap="round"><path d="M7 2v10M2 7h10" /></svg>
          )}
        </button>
      </div>
    </div>
  );
}

window.Shop = Shop;
window.ProductCard = ProductCard;