/* SiliconPop — Market Page (IP + Agent) */

const MarketPage = ({ appData, sessionToken, setToast, refreshAppData, onNav }) => {
  const { TopBar, PageShell, SPTabs, SPSearch, SPCard, SPBadge, SPButton, HScroll, SectionHead } = window;
  const [tab, setTab] = React.useState('ip');
  const [filter, setFilter] = React.useState('all');

  const ipFilters = [
    { id: 'all', label: '全部' },
    { id: 'music', label: '音乐' },
    { id: 'game', label: '游戏' },
    { id: 'companion', label: '陪伴' },
    { id: 'fashion', label: '潮流' },
    { id: 'education', label: '教育' },
  ];

  const agentFilters = [
    { id: 'all', label: '全部' },
    { id: 'text', label: '文本生成' },
    { id: 'voice', label: '语音互动' },
    { id: 'video', label: '视频制作' },
    { id: 'image', label: '图像生成' },
  ];

  const apiIps = appData?.market?.ips || [];
  const apiAgents = appData?.market?.agents || [];
  const ips = apiIps.length ? apiIps.map((ip) => ({
    id: ip.id,
    name: ip.name,
    bio: ip.bio,
    tags: ip.tags || [],
    price: ip.price,
    licenses: ip.licenses,
    grad: ip.gradient,
    cat: ip.category || "all"
  })) : [
    { name: 'Luna Nova', bio: '未来感 · 音乐偶像', tags: ['音乐','直播','社交'], price: '¥2,980/月', licenses: 47, grad: 'linear-gradient(135deg,#6366F1,#00D4FF)', cat: 'music' },
    { name: 'Kai Zero', bio: '赛博格 · 电竞战士', tags: ['游戏','动画','PGC'], price: '¥4,200/月', licenses: 23, grad: 'linear-gradient(135deg,#EC4899,#F97316)', cat: 'game' },
    { name: 'Mira Soft', bio: '治愈系 · 情感陪伴', tags: ['陪聊','情感','ASMR'], price: '¥1,680/月', licenses: 89, grad: 'linear-gradient(135deg,#10B981,#06B6D4)', cat: 'companion' },
    { name: 'Rex Volt', bio: '高能 · 电竞主播', tags: ['直播','解说','竞技'], price: '¥3,500/月', licenses: 31, grad: 'linear-gradient(135deg,#F59E0B,#EF4444)', cat: 'game' },
    { name: 'Aria Lin', bio: '国风 · 数字文创', tags: ['文创','非遗','IP'], price: '¥5,800/月', licenses: 15, grad: 'linear-gradient(135deg,#8B5CF6,#EC4899)', cat: 'fashion' },
    { name: 'Echo Wave', bio: '电子 · 音乐制作人', tags: ['电子乐','DJ','remix'], price: '¥3,200/月', licenses: 28, grad: 'linear-gradient(135deg,#06B6D4,#3B82F6)', cat: 'music' },
    { name: 'Pixel Fox', bio: '像素风 · 游戏角色', tags: ['像素','独立游戏','周边'], price: '¥1,200/月', licenses: 56, grad: 'linear-gradient(135deg,#F472B6,#FBBF24)', cat: 'game' },
    { name: 'Sage Mind', bio: '知识型 · AI讲师', tags: ['教育','知识','培训'], price: '¥2,400/月', licenses: 42, grad: 'linear-gradient(135deg,#34D399,#818CF8)', cat: 'education' },
  ];

  const agents = apiAgents.length ? apiAgents.map((agent) => ({
    id: agent.id,
    name: agent.name,
    desc: agent.desc,
    tokens: agent.tokens,
    capability: agent.capability,
    grad: agent.gradient,
    cat: agent.category || "all"
  })) : [
    { name: '文案创作 Agent', desc: '基于 IP 调性和授权范围，自动生成社交媒体文案、推广文本', tokens: '200 Token/次', capability: '文本生成', grad: 'linear-gradient(135deg,#6366F1,#818CF8)', cat: 'text' },
    { name: '语音情感陪伴', desc: '实时语音互动，支持情绪识别、记忆上下文、角色人设一致性', tokens: '500 Token/分钟', capability: '语音互动', grad: 'linear-gradient(135deg,#EC4899,#F472B6)', cat: 'voice' },
    { name: '短视频生成 Agent', desc: '输入主题和风格，生成 IP 驱动的短视频脚本与素材包', tokens: '1,200 Token/条', capability: '视频生成', grad: 'linear-gradient(135deg,#F59E0B,#FBBF24)', cat: 'video' },
    { name: 'IP 形象生成', desc: '基于角色设定生成一致风格的插画、头像、表情包', tokens: '800 Token/张', capability: '图像生成', grad: 'linear-gradient(135deg,#10B981,#34D399)', cat: 'image' },
    { name: '长记忆对话 Agent', desc: '保留历史对话记忆，维持角色人设一致性，支持多轮深度交互', tokens: '300 Token/轮', capability: '文本生成', grad: 'linear-gradient(135deg,#3B82F6,#06B6D4)', cat: 'text' },
    { name: '音乐片段生成', desc: '基于 IP 曲风生成 15-60 秒音乐片段用于短视频配乐', tokens: '1,500 Token/段', capability: '音频生成', grad: 'linear-gradient(135deg,#8B5CF6,#C084FC)', cat: 'voice' },
  ];

  const filters = tab === 'ip' ? ipFilters : agentFilters;
  const filteredIPs = filter === 'all' ? ips : ips.filter(ip => ip.cat === filter);
  const filteredAgents = filter === 'all' ? agents : agents.filter(a => a.cat === filter);
  const createOrder = async (ip) => {
    if (!sessionToken) {
      setToast("请先在“我的”页面登录后获取授权");
      onNav("profile");
      return;
    }
    await fetch("/v1/users/me/orders", {
      method: "POST",
      headers: { "Content-Type": "application/json", Authorization: `Bearer ${sessionToken}` },
      body: JSON.stringify({
        title: ip.name,
        kind: "虚拟人 IP 授权",
        payment: "支付宝",
        region: "中国内地",
        billing: "月度订阅",
        status: "待商务初审"
      })
    });
    setToast(`已提交授权订单：${ip.name}`);
    refreshAppData();
  };
  const subscribeAgent = async (agent) => {
    if (!sessionToken) {
      setToast("请先在“我的”页面登录后订阅 Agent");
      onNav("profile");
      return;
    }
    const res = await fetch("/v1/users/me/orders", {
      method: "POST",
      headers: { "Content-Type": "application/json", Authorization: `Bearer ${sessionToken}` },
      body: JSON.stringify({
        title: agent.name,
        kind: "AI Agent 能力订阅",
        payment: "Token 余额",
        region: "全球",
        billing: "按量计费",
        status: "订阅中"
      })
    });
    const data = await res.json();
    if (!res.ok) {
      setToast(`订阅失败：${data.error || "REQUEST_FAILED"}`);
      return;
    }
    setToast(`已订阅能力：${agent.name}`);
    refreshAppData();
  };

  return (
    <PageShell>
      <TopBar title="市场" rightAction={
        <button className="sp-icon-btn" onClick={() => setToast("筛选条件已展开在当前页面")}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>
        </button>
      } />

      <SPSearch placeholder={tab === 'ip' ? '搜索虚拟人 IP...' : '搜索 AI Agent 能力...'} />

      <SPTabs tabs={[
        { id: 'ip', label: 'IP 市场' },
        { id: 'agent', label: 'Agent 能力' },
      ]} active={tab} onChange={(id) => { setTab(id); setFilter('all'); }} />

      {/* Filters */}
      <div className="sp-filter-row">
        {filters.map(f => (
          <button key={f.id} className={`sp-filter-chip ${filter === f.id ? 'active' : ''}`} onClick={() => setFilter(f.id)}>
            {f.label}
          </button>
        ))}
      </div>

      {/* IP Market */}
      {tab === 'ip' && (
        <div className="sp-market-grid">
          {filteredIPs.map((ip, i) => (
            <SPCard key={i} className="sp-market-ip-card">
              <div className="sp-market-thumb" style={{background: ip.grad}}>
                <div className="sp-market-avatar">{ip.name[0]}</div>
                <SPBadge variant="glass">{ip.licenses} 授权</SPBadge>
              </div>
              <div className="sp-market-body">
                <strong>{ip.name}</strong>
                <span className="sp-market-bio">{ip.bio}</span>
                <div className="sp-market-tags">
                  {ip.tags.map((t,j) => <span key={j} className="sp-mini-tag">{t}</span>)}
                </div>
                <div className="sp-market-footer">
                  <span className="sp-market-price">{ip.price}</span>
                  <SPButton variant="sm-primary" onClick={() => createOrder(ip)}>获取授权</SPButton>
                </div>
              </div>
            </SPCard>
          ))}
        </div>
      )}

      {/* Agent Market */}
      {tab === 'agent' && (
        <div className="sp-agent-market-list">
          {filteredAgents.map((a, i) => (
            <SPCard key={i} className="sp-agent-market-card">
              <div className="sp-agent-market-top">
                <div className="sp-agent-market-icon" style={{background: a.grad}}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /></svg>
                </div>
                <div className="sp-agent-market-info">
                  <strong>{a.name}</strong>
                  <SPBadge variant="subtle">{a.capability}</SPBadge>
                </div>
              </div>
              <p className="sp-agent-market-desc">{a.desc}</p>
              <div className="sp-agent-market-bottom">
                <span className="sp-agent-market-tokens">{a.tokens}</span>
                <SPButton variant="sm-primary" onClick={() => subscribeAgent(a)}>订阅</SPButton>
              </div>
            </SPCard>
          ))}
        </div>
      )}
    </PageShell>
  );
};

Object.assign(window, { MarketPage });