/* SiliconPop — Home Page */

const HomePage = ({ appData, sessionToken, setToast, onNav, refreshAppData }) => {
  const { GradientText, SPCard, SPBadge, SPButton, SPSearch, HScroll, SectionHead, TopBar, PageShell, IPCard, AgentCard, StatCard } = window;

  const apiIps = appData?.market?.ips || [];
  const apiAgents = appData?.market?.agents || [];
  const featuredIPs = apiIps.length ? apiIps.slice(0, 6).map((ip) => ({
    name: ip.name,
    sub: ip.bio,
    tags: ip.tags,
    price: ip.price,
    gradient: ip.gradient
  })) : [
    { name: 'Luna Nova', sub: '未来感偶像', tags: ['音乐','直播'], price: '¥2,980/月', gradient: 'linear-gradient(135deg,#6366F1,#00D4FF)' },
    { name: 'Kai Zero', sub: '赛博格战士', tags: ['游戏','动画'], price: '¥4,200/月', gradient: 'linear-gradient(135deg,#EC4899,#F97316)' },
    { name: 'Mira Soft', sub: '治愈系陪伴', tags: ['陪聊','情感'], price: '¥1,680/月', gradient: 'linear-gradient(135deg,#10B981,#06B6D4)' },
    { name: 'Rex Volt', sub: '电竞主播', tags: ['直播','解说'], price: '¥3,500/月', gradient: 'linear-gradient(135deg,#F59E0B,#EF4444)' },
    { name: 'Aria Lin', sub: '国风虚拟人', tags: ['文创','IP'], price: '¥5,800/月', gradient: 'linear-gradient(135deg,#8B5CF6,#EC4899)' },
  ];

  const agents = apiAgents.length ? apiAgents.slice(0, 4).map((agent) => ({
    name: agent.name,
    desc: agent.desc,
    capability: agent.capability,
    price: agent.tokens,
    gradient: agent.gradient
  })) : [
    { name: '文案创作 Agent', desc: '基于 IP 风格生成社交媒体文案', capability: '文本生成', price: '200 Token/次', gradient: 'linear-gradient(135deg,#6366F1,#818CF8)' },
    { name: '语音情感陪伴', desc: '实时语音互动，情绪识别与回应', capability: '语音互动', price: '500 Token/分钟', gradient: 'linear-gradient(135deg,#EC4899,#F472B6)' },
    { name: '短视频生成', desc: 'IP 形象驱动的短视频内容生产', capability: '视频生成', price: '1,200 Token/条', gradient: 'linear-gradient(135deg,#F59E0B,#FBBF24)' },
  ];

  const quickActions = [
    { icon: '🎨', label: '开始创作', desc: '使用已授权 IP 生成内容', action: () => onNav('create') },
    { icon: '📜', label: '我的授权', desc: '管理 IP 授权与配额', action: () => onNav('profile') },
    { icon: '💰', label: '收益中心', desc: '查看分成与结算', action: () => onNav('profile') },
    {
      icon: '🔗',
      label: '连接钱包',
      desc: '绑定链上身份与资产',
      action: async () => {
        if (!sessionToken) {
          setToast('请先登录后绑定钱包');
          onNav('profile');
          return;
        }
        const res = await fetch('/v1/users/me/bind-wallet', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${sessionToken}` },
          body: JSON.stringify({ walletAddress: '0x71C4f8B8a7F0d21A8d9f3E2' })
        });
        const data = await res.json();
        if (!res.ok) {
          setToast(`钱包绑定失败：${data.error || 'REQUEST_FAILED'}`);
          return;
        }
        setToast('钱包已绑定');
        refreshAppData();
      }
    },
  ];

  return (
    <PageShell>
      <TopBar showLogo subtitle="硅基潮流" rightAction={
        <div className="sp-topbar-right">
          <button className="sp-icon-btn" onClick={() => { refreshAppData(); setToast('数据已刷新'); }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
          </button>
        </div>
      } />

      {/* Hero */}
      <div className="sp-home-hero">
        <div className="sp-home-hero-bg"></div>
        <div className="sp-home-hero-content">
          <SPBadge variant="glow">AI × 虚拟人 IP 商业化平台</SPBadge>
          <h1>
            <GradientText>授权、创作、交易</GradientText>
            <br />一站式虚拟人生态
          </h1>
          <p>获取虚拟人 IP 授权，调用 AI Agent 能力，创作合规二创内容，参与分成与社区共建。</p>
          <div className="sp-home-hero-actions">
            <SPButton variant="primary" onClick={() => onNav("market")}>探索 IP 市场</SPButton>
            <SPButton variant="ghost" onClick={() => onNav("create")}>开始创作</SPButton>
          </div>
        </div>
      </div>

      {/* Quick Stats */}
      <div className="sp-home-stats">
        {(appData?.home?.stats || [
          { label: "活跃 IP", value: "128+", accent: "#00D4FF" },
          { label: "Agent 能力", value: "36", accent: "#A78BFA" },
          { label: "社区任务", value: "2.4K", accent: "#EC4899" }
        ]).map((stat, index) => <StatCard key={index} {...stat} />)}
      </div>

      {/* Search */}
      <SPSearch placeholder="搜索虚拟人 IP、AI Agent..." />

      {/* Featured IPs */}
      <SectionHead title="热门 IP" actionLabel="查看全部 →" />
      <HScroll>
        {featuredIPs.map((ip, i) => <IPCard key={i} {...ip} />)}
      </HScroll>

      {/* Agent Capabilities */}
      <SectionHead title="AI Agent 推荐" actionLabel="全部能力 →" />
      <div className="sp-agent-list">
        {agents.map((a, i) => <AgentCard key={i} {...a} />)}
      </div>

      {/* Quick Actions */}
      <SectionHead title="快速开始" />
      <div className="sp-quick-grid">
        {quickActions.map((item, i) => (
          <SPCard key={i} className="sp-quick-card" onClick={item.action}>
            <span className="sp-quick-icon">{item.icon}</span>
            <strong>{item.label}</strong>
            <span className="sp-quick-desc">{item.desc}</span>
          </SPCard>
        ))}
      </div>

      {/* Trending */}
      <SectionHead title="平台动态" />
      <div className="sp-feed-list">
        {(appData?.home?.feed?.length ? appData.home.feed.map((item) => ({
          text: item.text || item.desc || item.title,
          time: item.time || "刚刚",
          badge: item.badge || item.type || "动态"
        })) : [
          { text: 'Luna Nova × 某音乐厂牌联名授权已达成', time: '2小时前', badge: '授权' },
          { text: 'Kai Zero 短视频 Agent 新增 TikTok 模板', time: '5小时前', badge: '更新' },
          { text: '社区任务：Mira Soft 春日主题二创征集', time: '1天前', badge: '活动' },
        ]).map((item, i) => (
          <SPCard key={i} className="sp-feed-card">
            <div className="sp-feed-top">
              <SPBadge variant="subtle">{item.badge}</SPBadge>
              <span className="sp-feed-time">{item.time}</span>
            </div>
            <p className="sp-feed-text">{item.text}</p>
          </SPCard>
        ))}
      </div>
    </PageShell>
  );
};

Object.assign(window, { HomePage });