/* SiliconPop — Community Page */

const CommunityPage = ({ appData, sessionToken, setToast, refreshAppData, onNav }) => {
  const { TopBar, PageShell, SPCard, SPBadge, SPButton, SPTabs, SectionHead } = window;
  const [tab, setTab] = React.useState('missions');
  const [postIndex, setPostIndex] = React.useState(1);

  const apiCommunity = appData?.community || {};
  const missions = apiCommunity.missions?.length ? apiCommunity.missions.map((mission) => ({
    id: mission.id,
    title: mission.title,
    reward: mission.reward || mission.budget || "Token + 收益分成",
    participants: mission.members || mission.participants || 0,
    deadline: mission.deadline || "2026-06-30",
    status: mission.status || "进行中",
    tags: mission.roles || mission.tags || []
  })) : [
    { title: 'Luna Nova 春日主题二创征集', reward: '5,000 Token + 收益分成', participants: 34, deadline: '2026-06-15', status: '进行中', tags: ['图文', '视频', '音乐'] },
    { title: 'Kai Zero 电竞皮肤设计大赛', reward: '10,000 Token + IP 联名权', participants: 12, deadline: '2026-06-30', status: '报名中', tags: ['设计', '游戏', '插画'] },
    { title: 'Mira Soft 治愈系语音投稿', reward: '3,000 Token', participants: 67, deadline: '2026-06-10', status: '即将截止', tags: ['语音', '情感', '陪伴'] },
    { title: '全平台年度最佳二创评选', reward: '20,000 Token + 实体奖品', participants: 156, deadline: '2026-07-31', status: '进行中', tags: ['综合', '评选', '投票'] },
  ];

  const feed = apiCommunity.feed?.length ? apiCommunity.feed.map((item, index) => ({
    user: item.actor || item.user || "SiliconPop",
    avatar: (item.actor || item.user || "S")[0],
    content: item.desc || item.content || item.title,
    time: item.time || "刚刚",
    likes: item.likes || 24 + index * 9,
    comments: item.comments || 3 + index,
    type: item.badge || item.type || "动态"
  })) : [
    { user: 'StarryPixel', avatar: 'S', content: '用 Luna Nova 的授权做了一组春日插画，AI 辅助上色效果惊艳！', time: '30分钟前', likes: 42, comments: 8, type: '作品' },
    { user: 'ByteRider', avatar: 'B', content: 'Kai Zero 短视频 Agent 体验报告：一键生成电竞集锦，节省了80%剪辑时间', time: '2小时前', likes: 89, comments: 15, type: '评测' },
    { user: 'MoonDrift', avatar: 'M', content: '申请了 Mira Soft 的语音情感陪伴 Agent，用在了心理疗愈小程序里，用户反馈超好', time: '5小时前', likes: 124, comments: 23, type: '案例' },
    { user: 'CryptoArtist', avatar: 'C', content: '关于虚拟人 IP 二创的版权边界讨论：平台的先发后审机制实测反馈', time: '1天前', likes: 67, comments: 31, type: '讨论' },
  ];

  const members = apiCommunity.members?.length ? apiCommunity.members.map((member) => ({
    name: member.name,
    members: member.members || member.count || 1,
    role: member.role,
    load: member.load || member.status || "活跃"
  })) : [
    { name: '创作者联盟', members: 234, role: '内容创作', load: '活跃' },
    { name: '开发者社区', members: 89, role: '技术集成', load: '活跃' },
    { name: '品牌方俱乐部', members: 45, role: '商业合作', load: '招募中' },
    { name: '审核志愿者', members: 28, role: '内容审核', load: '活跃' },
  ];
  const joinMission = async (mission) => {
    if (!mission.id) {
      setToast(`已查看任务：${mission.title}`);
      return;
    }
    if (!sessionToken) {
      setToast("请先登录后加入社区任务");
      onNav("profile");
      return;
    }
    await fetch(`/v1/community/missions/${mission.id}/join`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ actor: appData?.profile?.user?.name || "社区用户" })
    });
    await fetch("/v1/users/me/tasks", {
      method: "POST",
      headers: { "Content-Type": "application/json", Authorization: `Bearer ${sessionToken}` },
      body: JSON.stringify({ title: mission.title, role: "社区参与者", status: "进行中" })
    });
    setToast(`已加入任务：${mission.title}`);
    refreshAppData();
  };
  const publishPost = async () => {
    const title = `社区内容提案 ${postIndex}`;
    const res = await fetch("/v1/community/posts", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title,
        type: "内容提案",
        target: "社区首页",
        actor: appData?.profile?.user?.name || "社区用户"
      })
    });
    const data = await res.json();
    if (!res.ok) {
      setToast(`发布失败：${data.error || "REQUEST_FAILED"}`);
      return;
    }
    if (sessionToken) {
      await fetch("/v1/users/me/proposals", {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${sessionToken}` },
        body: JSON.stringify({ title, type: "内容提案", target: "社区首页", status: "审核中" })
      });
    }
    setPostIndex((value) => value + 1);
    setToast(`已发布内容：${title}`);
    refreshAppData();
  };
  const joinGroup = async (group) => {
    if (!sessionToken) {
      setToast("请先登录后加入圈子");
      onNav("profile");
      return;
    }
    await fetch("/v1/users/me/tasks", {
      method: "POST",
      headers: { "Content-Type": "application/json", Authorization: `Bearer ${sessionToken}` },
      body: JSON.stringify({ title: `${group.name}圈子协作`, role: group.role, status: "进行中" })
    });
    setToast(`已加入：${group.name}`);
    refreshAppData();
  };

  return (
    <PageShell>
      <TopBar title="社区" rightAction={
        <SPButton variant="sm-primary" onClick={publishPost}>发布内容</SPButton>
      } />

      <SPTabs tabs={[
        { id: 'missions', label: '任务' },
        { id: 'feed', label: '动态' },
        { id: 'groups', label: '圈子' },
      ]} active={tab} onChange={setTab} />

      {/* Missions Tab */}
      {tab === 'missions' && (
        <div className="sp-missions-list">
          {missions.map((m, i) => (
            <SPCard key={i} className="sp-mission-card">
              <div className="sp-mission-top">
                <SPBadge variant={m.status === '即将截止' ? 'warning' : m.status === '报名中' ? 'glow' : 'subtle'}>
                  {m.status}
                </SPBadge>
                <span className="sp-mission-deadline">截止 {m.deadline}</span>
              </div>
              <h3 className="sp-mission-title">{m.title}</h3>
              <div className="sp-mission-tags">
                {m.tags.map((t,j) => <span key={j} className="sp-mini-tag">{t}</span>)}
              </div>
              <div className="sp-mission-meta">
                <div className="sp-mission-reward">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                  <span>{m.reward}</span>
                </div>
                <span className="sp-mission-participants">{m.participants} 人参与</span>
              </div>
              <SPButton variant="ghost" className="sp-full-btn" onClick={() => joinMission(m)}>加入任务</SPButton>
            </SPCard>
          ))}
        </div>
      )}

      {/* Feed Tab */}
      {tab === 'feed' && (
        <div className="sp-feed-timeline">
          {feed.map((f, i) => (
            <SPCard key={i} className="sp-timeline-card">
              <div className="sp-timeline-header">
                <div className="sp-timeline-user">
                  <div className="sp-avatar-sm" style={{background: ['#6366F1','#EC4899','#10B981','#F59E0B'][i % 4]}}>{f.avatar}</div>
                  <div>
                    <strong>{f.user}</strong>
                    <span className="sp-timeline-time">{f.time}</span>
                  </div>
                </div>
                <SPBadge variant="subtle">{f.type}</SPBadge>
              </div>
              <p className="sp-timeline-content">{f.content}</p>
              <div className="sp-timeline-actions">
                <button className="sp-timeline-action" onClick={() => setToast(`已点赞：${f.type}`)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
                  <span>{f.likes}</span>
                </button>
                <button className="sp-timeline-action" onClick={() => setToast(`已打开评论：${f.comments} 条`)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
                  <span>{f.comments}</span>
                </button>
                <button className="sp-timeline-action" onClick={() => setToast("分享链接已生成")}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" /></svg>
                  <span>分享</span>
                </button>
              </div>
            </SPCard>
          ))}
        </div>
      )}

      {/* Groups Tab */}
      {tab === 'groups' && (
        <div className="sp-groups-list">
          {members.map((g, i) => (
            <SPCard key={i} className="sp-group-card">
              <div className="sp-group-top">
                <div className="sp-group-icon" style={{background: ['linear-gradient(135deg,#6366F1,#818CF8)','linear-gradient(135deg,#06B6D4,#22D3EE)','linear-gradient(135deg,#F59E0B,#FBBF24)','linear-gradient(135deg,#10B981,#34D399)'][i]}}>
                  {g.name[0]}
                </div>
                <div>
                  <strong>{g.name}</strong>
                  <span className="sp-group-role">{g.role}</span>
                </div>
              </div>
              <div className="sp-group-meta">
                <span>{g.members} 成员</span>
                <SPBadge variant={g.load === '招募中' ? 'glow' : 'subtle'}>{g.load}</SPBadge>
              </div>
              <SPButton variant="ghost" className="sp-full-btn" onClick={() => joinGroup(g)}>{g.load === '招募中' ? '申请加入' : '进入圈子'}</SPButton>
            </SPCard>
          ))}
        </div>
      )}
    </PageShell>
  );
};

Object.assign(window, { CommunityPage });