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

function Notifications({ kind = "dog" }) {
  const pet = PET_PROFILES[kind];
  const groups = [
    {
      title: "今日",
      items: [
        {
          tag: "リマインダー", tagColor: "primary",
          icon: "food", tone: "gold",
          title: "ポチの夜ごはんの時間です",
          body: "18:00 — いつもの量を準備しましょう",
          time: "10分前",
          unread: true,
          action: "完食を記録",
        },
        {
          tag: "DNAインサイト", tagColor: "accent",
          icon: "dna", tone: "primary",
          title: "DNA解析の新しい発見",
          body: kind === "cat"
            ? "三毛猫の研究で「猫白血病ウイルス耐性」項目が追加されました"
            : "柴犬の研究で「皮膚バリア機能」項目が追加されました",
          time: "2時間前",
          unread: true,
        },
        {
          tag: "予約", tagColor: "navy",
          icon: "vet", tone: "primary",
          title: "次回ワクチン接種は来週です",
          body: "5月27日（火）11:00 · 東西南北動物医療センター",
          time: "今朝",
          unread: false,
        },
      ],
    },
    {
      title: "昨日",
      items: [
        {
          tag: "おすすめ", tagColor: "accent",
          icon: "bag", tone: "accent",
          title: "DNAに合う新商品が入荷",
          body: kind === "cat" ? "腎臓ケア用 新フード · 初回30%OFF" : "関節サポート用 新サプリ · 初回30%OFF",
          time: "昨日 14:30",
          unread: false,
        },
        {
          tag: "週次レポート", tagColor: "navy",
          icon: "chart", tone: "primary",
          title: "今週の健康スコア +3",
          body: kind === "cat" ? "89 → 92（同三毛猫の上位15%）" : "89 → 92（同柴犬の上位15%）",
          time: "昨日 20:00",
          unread: false,
        },
      ],
    },
    {
      title: "今週",
      items: [
        {
          tag: "記事", tagColor: "navy",
          icon: "book", tone: "navy",
          title: "あなたのペット向けの記事",
          body: kind === "cat" ? "三毛猫の腎臓ケア毎日の水分補給術" : "柴犬の膝蓋骨脱臼を予防する5つの習慣",
          time: "月曜",
          unread: false,
        },
      ],
    },
  ];

  return (
    <div className="scr">
      <StatusBar />
      <TopBar
        left={<BackBtn />}
        title="お知らせ"
        right={
          <button style={{ fontSize: 12, color: "var(--muted)", fontWeight: 600 }}>
            すべて既読
          </button>
        }
      />
      {/* Segmented filter */}
      <div style={{ padding: "4px 20px 8px", display: "flex", justifyContent: "center" }}>
        <div className="seg">
          <button className="active">すべて</button>
          <button>未読 3</button>
          <button>重要</button>
        </div>
      </div>
      <div className="scrollbody">
        {groups.map((g, gi) => (
          <div key={gi} style={{ marginTop: 8 }}>
            <div style={{
              padding: "0 20px 8px",
              fontSize: 10, fontWeight: 700, letterSpacing: 0.08,
              color: "var(--muted)", textTransform: "uppercase", fontFamily: "Inter",
            }}>
              {g.title}
            </div>
            <div style={{ padding: "0 20px", display: "flex", flexDirection: "column", gap: 8 }}>
              {g.items.map((n, i) => (
                <div key={i} style={{
                  background: "var(--surface)",
                  borderRadius: 16,
                  padding: 14,
                  border: "1px solid " + (n.unread ? "var(--primary-soft)" : "var(--border)"),
                  boxShadow: n.unread ? "var(--shadow-clay-2)" : "var(--shadow-clay-1)",
                  display: "flex", gap: 12,
                  position: "relative",
                }}>
                  {n.unread && (
                    <span style={{
                      position: "absolute", top: 12, right: 12,
                      width: 8, height: 8, borderRadius: 4,
                      background: "var(--accent)",
                    }} />
                  )}
                  <Clay name={n.icon} tone={n.tone} size={40} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                      <span style={{
                        fontSize: 9, fontWeight: 700, letterSpacing: 0.08,
                        padding: "2px 7px", borderRadius: 5,
                        background: n.tagColor === "primary" ? "var(--primary-soft)" :
                          n.tagColor === "accent" ? "var(--accent-soft)" : "var(--surface-soft)",
                        color: n.tagColor === "primary" ? "var(--primary)" :
                          n.tagColor === "accent" ? "var(--accent)" : "var(--ink-2)",
                      }}>{n.tag}</span>
                      <span style={{ fontSize: 9, color: "var(--subtle)", fontWeight: 600 }}>
                        {n.time}
                      </span>
                    </div>
                    <div style={{
                      fontSize: 13, fontWeight: 700, lineHeight: 1.35,
                      letterSpacing: "-0.005em",
                    }}>
                      {n.title}
                    </div>
                    <div style={{
                      fontSize: 11, color: "var(--muted)", marginTop: 3, lineHeight: 1.5,
                    }}>
                      {n.body}
                    </div>
                    {n.action && (
                      <button style={{
                        marginTop: 10,
                        padding: "6px 12px",
                        borderRadius: 8,
                        background: "var(--primary)",
                        color: "var(--on-primary)",
                        fontSize: 11, fontWeight: 700,
                      }}>{n.action} ›</button>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
        <div style={{ height: 24 }} />
      </div>
      <HomeIndicator />
    </div>
  );
}

window.Notifications = Notifications;