/* SiliconPop — Create Studio Page */

const CreatePage = ({ appData, sessionToken, setToast, refreshAppData, onNav }) => {
  const { TopBar, PageShell, SPCard, SPBadge, SPButton, SectionHead, StatCard, SPTabs } = window;
  const [tab, setTab] = React.useState('new');
  const [prompt, setPrompt] = React.useState("");
  const [output, setOutput] = React.useState(null);
  const [licenseIndex, setLicenseIndex] = React.useState(0);
  const [modelIndex, setModelIndex] = React.useState(0);
  const [outputType, setOutputType] = React.useState("community_copy");
  const licenses = appData?.creation?.licenses || [];
  const models = appData?.creation?.models || [];
  const projects = appData?.creation?.projects || [];
  const activeLicense = licenses[licenseIndex] || licenses[0];
  const activeModel = models[modelIndex] || models[0];

  const recentProjects = projects.length ? projects.map((project) => ({
    project,
    name: project.projectName,
    status: project.status,
    date: project.updatedAt?.slice(0, 10) || project.createdAt?.slice(0, 10) || "刚刚",
    outputs: project.versionCount || 0,
    badge: project.status === "approved" || project.status === "certified" ? "done" : project.status === "created" ? "draft" : "review"
  })) : [
    { name: 'Luna Nova 周年预热文案', status: '已完成', date: '2026-05-28', outputs: 3, badge: 'done' },
    { name: 'Kai Zero 电竞赛事宣传', status: '审核中', date: '2026-05-26', outputs: 1, badge: 'review' },
    { name: 'Mira Soft 治愈系短视频脚本', status: '草稿', date: '2026-05-24', outputs: 0, badge: 'draft' },
  ];

  const fallbackModels = [
    { name: 'SiliconText-v3', desc: '多语言文案生成，风格可控', type: '文本', status: '推荐' },
    { name: 'SiliconVoice-v2', desc: 'IP 声纹克隆与情感合成', type: '语音', status: '可用' },
    { name: 'SiliconVid-v1', desc: '短视频脚本 + 画面描述', type: '视频', status: '可用' },
  ];
  const visibleModels = models.length ? models.map((model, index) => ({
    name: model.name,
    desc: model.desc,
    type: model.capability,
    status: index === 0 ? "推荐" : "可用"
  })) : fallbackModels;
  const outputOptions = [
    { label: "社交文案", value: "community_copy" },
    { label: "剧情扩写", value: "story" },
    { label: "品牌提案", value: "campaign_copy" },
    { label: "活动脚本", value: "event_script" }
  ];
  const createDraftProject = async () => {
    if (!sessionToken) {
      setToast("请先登录后进入创作工作台");
      onNav("profile");
      return null;
    }
    if (!activeLicense || !activeModel) {
      setToast("当前账号暂无可用授权或模型");
      return null;
    }
    const projectRes = await fetch("/v1/creation/projects", {
      method: "POST",
      headers: { "Content-Type": "application/json", Authorization: `Bearer ${sessionToken}` },
      body: JSON.stringify({
        licenseId: activeLicense.id,
        agentType: activeLicense.rightsSnapshot?.allowedAgentTypes?.[0] || "story_agent",
        projectName: prompt.trim().slice(0, 24) || "SiliconPop 快速创作",
        goal: prompt || "输出一组社区预热文案",
        outputType,
        territory: activeLicense.rightsSnapshot?.territories?.[0] || "中国内地",
        platform: activeLicense.rightsSnapshot?.platforms?.[0] || "微博"
      })
    });
    const projectPayload = await projectRes.json();
    if (!projectRes.ok) throw new Error(projectPayload.error || "PROJECT_FAILED");
    return projectPayload.data;
  };
  const saveDraft = async () => {
    try {
      const project = await createDraftProject();
      if (!project) return;
      setToast(`草稿已保存：${project.projectName}`);
      refreshAppData();
      setTab("projects");
    } catch (err) {
      setToast(`保存失败：${err.message}`);
    }
  };
  const generateContent = async () => {
    try {
      const project = await createDraftProject();
      if (!project) return;
      const versionRes = await fetch(`/v1/creation/projects/${project.id}/generate`, {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${sessionToken}` },
        body: JSON.stringify({
          modelKey: activeModel.modelKey,
          prompt: prompt || "帮我写一组适合社区预热的虚拟人 IP 文案。",
          referenceSummary: ["来源：SiliconPop App 创作工作台"]
        })
      });
      const versionPayload = await versionRes.json();
      if (!versionRes.ok) throw new Error(versionPayload.error || "GENERATE_FAILED");
      setOutput(versionPayload.data);
      setToast("内容已生成并完成自动审查");
      refreshAppData();
    } catch (err) {
      setToast(`生成失败：${err.message}`);
    }
  };
  const showProjectDetail = async (project) => {
    if (!sessionToken || !project?.id) {
      setToast("示例项目暂无详情接口数据");
      return;
    }
    const res = await fetch(`/v1/creation/projects/${project.id}`, {
      headers: { Authorization: `Bearer ${sessionToken}` }
    });
    const data = await res.json();
    if (!res.ok) {
      setToast(`详情加载失败：${data.error || "REQUEST_FAILED"}`);
      return;
    }
    const latest = data.data.versions?.[0];
    if (latest) {
      setOutput(latest);
      setTab("new");
      setToast(`已打开项目：${project.projectName}`);
    } else {
      setPrompt(project.goal || project.projectName || "");
      setTab("new");
      setToast("项目暂无版本，可继续生成");
    }
  };
  const issueCertificate = async (project) => {
    const versionId = project?.latestVersion?.id;
    if (!sessionToken || !versionId) {
      setToast("该项目暂无可签发的生成版本");
      return;
    }
    const certRes = await fetch(`/v1/creation/versions/${versionId}/certificate`, {
      method: "POST",
      headers: { Authorization: `Bearer ${sessionToken}` }
    });
    const cert = await certRes.json();
    if (!certRes.ok) {
      setToast(`凭证签发失败：${cert.error || "REQUEST_FAILED"}`);
      return;
    }
    await fetch(`/v1/certificates/${cert.data.id}/anchor`, {
      method: "POST",
      headers: { Authorization: `Bearer ${sessionToken}` }
    });
    setToast(`凭证已签发：${cert.data.id}`);
    refreshAppData();
  };

  return (
    <PageShell>
      <TopBar title="创作工作台" rightAction={
        <SPButton variant="sm-primary" onClick={() => setTab("new")}>新建项目</SPButton>
      } />

      {/* Quick Stats */}
      <div className="sp-create-stats">
        {(appData?.creation?.stats || [
          { label: "本月创作", value: "0", accent: "#00D4FF" },
          { label: "可用授权", value: "0", accent: "#A78BFA" },
          { label: "已签发凭证", value: "0", accent: "#10B981" }
        ]).map((stat, index) => <StatCard key={index} {...stat} />)}
      </div>

      <SPTabs tabs={[
        { id: 'new', label: '新建创作' },
        { id: 'projects', label: '我的项目' },
      ]} active={tab} onChange={setTab} />

      {tab === 'new' && (
        <>
          {/* New Creation Form */}
          <SPCard className="sp-create-form-card">
            <div className="sp-create-form-head">
              <SPBadge variant="glow">Step 1 · 选择授权与模型</SPBadge>
              <h3>创建新内容项目</h3>
              <p>选择已获得授权的 IP、AI 模型和输出类型，描述创作目标后一键生成。</p>
            </div>

            <div className="sp-form-group">
              <label>选择 IP 授权</label>
              <div className="sp-select-cards">
                {(licenses.length ? licenses.map((license) => `${license.ipName} · ${license.productName}`) : ['Luna Nova · 音乐授权', 'Kai Zero · 游戏授权', 'Mira Soft · 陪伴授权']).map((ip, i) => (
                  <button key={i} className={`sp-select-card ${i === licenseIndex ? 'active' : ''}`} onClick={() => setLicenseIndex(i)}>
                    <div className="sp-select-dot"></div>
                    <span>{ip}</span>
                  </button>
                ))}
              </div>
            </div>

            <div className="sp-form-group">
              <label>AI 模型</label>
              <div className="sp-model-list">
                {visibleModels.map((m, i) => (
                  <div key={i} className={`sp-model-card ${i === modelIndex ? 'active' : ''}`} onClick={() => setModelIndex(i)}>
                    <div className="sp-model-top">
                      <strong>{m.name}</strong>
                      <SPBadge variant={m.status === '推荐' ? 'glow' : 'subtle'}>{m.status}</SPBadge>
                    </div>
                    <span className="sp-model-desc">{m.desc}</span>
                    <span className="sp-mini-tag">{m.type}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="sp-form-group">
              <label>输出类型</label>
              <div className="sp-output-chips">
                {outputOptions.map((item) => (
                  <button key={item.value} className={`sp-filter-chip ${outputType === item.value ? 'active' : ''}`} onClick={() => setOutputType(item.value)}>{item.label}</button>
                ))}
              </div>
            </div>

            <div className="sp-form-group">
              <label>创作提示词</label>
              <textarea className="sp-textarea" placeholder="描述你的创作目标、受众、风格偏好..." rows={4} value={prompt} onChange={(event) => setPrompt(event.target.value)}></textarea>
            </div>

            <div className="sp-form-actions">
              <SPButton variant="primary" className="sp-full-btn" onClick={generateContent}>生成授权内容</SPButton>
              <SPButton variant="ghost" className="sp-full-btn" onClick={saveDraft}>保存为草稿</SPButton>
            </div>
          </SPCard>

          {/* Output Preview */}
          <SPCard className="sp-create-output-card">
            <SPBadge variant="subtle">Step 2 · 审查与签发</SPBadge>
            <h3 style={{marginTop:12}}>内容预览与凭证</h3>
            <p className="sp-create-hint">生成后将显示自动审查结果、原创度评分、内容哈希和凭证状态。</p>
            {output ? (
              <div className="sp-create-result">
                <SPBadge variant={output.reviewStatus === "auto_pass" ? "success" : "warning"}>{output.reviewStatus}</SPBadge>
                <p>{output.finalOutput || output.aiOutput}</p>
                <div className="sp-project-meta">
                  <span>原创度 {output.originalityScore}</span>
                  <span>{output.originalityLevel}</span>
                </div>
              </div>
            ) : <div className="sp-create-placeholder">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round" opacity=".3"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
              <span>等待内容生成...</span>
            </div>}
          </SPCard>
        </>
      )}

      {tab === 'projects' && (
        <div className="sp-projects-list">
          {recentProjects.map((p, i) => (
            <SPCard key={i} className="sp-project-card">
              <div className="sp-project-top">
                <strong>{p.name}</strong>
                <SPBadge variant={p.badge === 'done' ? 'success' : p.badge === 'review' ? 'warning' : 'subtle'}>
                  {p.status}
                </SPBadge>
              </div>
              <div className="sp-project-meta">
                <span>{p.date}</span>
                <span>{p.outputs} 个输出版本</span>
              </div>
              <div className="sp-project-actions">
                <SPButton variant="sm-ghost" onClick={() => showProjectDetail(p.project)}>查看详情</SPButton>
                {p.badge === 'draft' && <SPButton variant="sm-primary" onClick={() => { setPrompt(p.project?.goal || p.name); setTab("new"); }}>继续创作</SPButton>}
                {p.badge !== 'draft' && <SPButton variant="sm-ghost" onClick={() => issueCertificate(p.project)}>签发凭证</SPButton>}
              </div>
            </SPCard>
          ))}
        </div>
      )}
    </PageShell>
  );
};

Object.assign(window, { CreatePage });