// Project center — create, select and switch the active project workflow.

function Project({ go }) {
  const { snapshot, busy } = window.useGGGSnapshot ? window.useGGGSnapshot() : { snapshot: null, busy: false };
  const projects = snapshot?.projects || [];
  const activeProject = window.GGGApi?.resolveActiveProject?.(snapshot) || projects[0] || null;
  const [filter, setFilter] = React.useState("all");
  const visibleProjects = projects.filter((project) => {
    if (filter === "all") return true;
    if (filter === "active") return project.id === activeProject?.id;
    return (project.status || "draft") === filter;
  });

  const selectProject = (project, target = "report") => {
    if (window.GGGApi?.setActiveProjectId) window.GGGApi.setActiveProjectId(project.id);
    go(target, project.id);
  };

  const removeProject = async (event, project) => {
    event.stopPropagation();
    if (!confirm(`确认删除项目 ${project.name}？`)) return;
    if (window.GGGApi) await window.GGGApi.deleteProject(project.id);
  };

  return (
    <AppShell go={go} current="project" pageTitle="项目">
      <div className="page">
        <div className="page-header">
          <div>
            <h1 className="page-title">项目中心</h1>
            <p className="page-sub">
              {busy && !snapshot ? "正在加载项目..." : "选择一个项目后，报告、资料、任务等工作流都会切换到该项目。"}
            </p>
          </div>
          <button className="btn btn-primary" onClick={() => go("project-new")}><Icon name="plus" size={14} /> 新建项目</button>
        </div>

        {activeProject ? (
          <div className="card card-pad active-project-card">
            <div>
              <div className="eyebrow">当前工作流项目</div>
              <h3>{activeProject.name}</h3>
              <p>{activeProject.product_category || activeProject.product_name || "待补充产品"} · {activeProject.target_country || "目标市场"} · {activeProject.target_city || activeProject.target_region || "区域待确认"}</p>
            </div>
            <div className="row-flex">
              <button className="btn btn-ghost btn-sm" onClick={() => go("project", activeProject.id)}><Icon name="edit" size={14} /> 编辑项目</button>
              <button className="btn btn-soft btn-sm" onClick={() => go("document", activeProject.id)}><Icon name="database" size={14} /> 资料</button>
              <button className="btn btn-primary btn-sm" onClick={() => go("report", activeProject.id)}><Icon name="file-text" size={14} /> 报告</button>
            </div>
          </div>
        ) : (
          <div className="card card-pad empty-project-state">
            <div className="empty-project-icon"><Icon name="folder" size={24} /></div>
            <h4>还没有项目</h4>
            <p>先创建一个真实产品和目标市场项目，后续资料、报告和任务都会围绕该项目展开。</p>
            <button className="btn btn-primary btn-sm" onClick={() => go("project-new")}><Icon name="plus" size={14} /> 创建项目</button>
          </div>
        )}

        <div className="card project-list-card" style={{ marginTop: 18 }}>
          <div className="project-list-head">
            <h3>全部项目 <span style={{ color: "var(--muted)", fontWeight: 400, fontSize: 13 }}>· {projects.length} 个</span></h3>
            <div className="row-flex" style={{ gap: 4 }}>
              {[
                ["all", "全部"],
                ["active", "当前"],
                ["draft", "草稿"],
                ["generated", "已生成"],
                ["generating", "生成中"]
              ].map(([key, label]) => (
                <button key={key} className={"chip " + (filter === key ? "active" : "")} onClick={() => setFilter(key)}>{label}</button>
              ))}
            </div>
          </div>

          {!visibleProjects.length && <div className="empty-mini" style={{ padding: 24 }}>没有符合筛选条件的项目。</div>}

          {visibleProjects.map((project) => {
            const state = projectState(project);
            const active = project.id === activeProject?.id;
            return (
              <div key={project.id} className={"project-row " + (active ? "active" : "")} onClick={() => selectProject(project, "report")}>
                <div>
                  <div className="pname">{project.name} {active ? <span className="badge badge-teal" style={{ marginLeft: 8 }}>当前</span> : null}</div>
                  <div className="pmeta">{project.product_category || project.product_name || "产品待补充"} · 创建于 {dateOnly(project.created_at)}</div>
                </div>
                <div>
                  <div className="row-flex" style={{ gap: 6 }}>
                    <span style={{ fontSize: 18 }}>{countryFlag(project.target_country)}</span>
                    <div>
                      <div style={{ fontSize: 13.5, fontWeight: 500 }}>{marketName(project.target_country)}</div>
                      <div style={{ fontSize: 12, color: "var(--muted)" }}>{project.target_city || project.target_region}</div>
                    </div>
                  </div>
                </div>
                <div><span className={"badge badge-" + state.tone}><span className="badge-dot"></span>{state.label}</span></div>
                <div className="progress">
                  <div className="progress-label">完成度 {state.progress}%</div>
                  <div className="progress-bar"><div className="progress-fill" style={{ width: state.progress + "%" }} /></div>
                </div>
                <div className="row-flex" style={{ gap: 6, justifyContent: "flex-end" }}>
                  <button className="btn-link" style={{ fontSize: 12 }} onClick={(event) => { event.stopPropagation(); selectProject(project, "project"); }}>编辑</button>
                  <button className="btn-link" style={{ fontSize: 12 }} onClick={(event) => { event.stopPropagation(); selectProject(project, "document"); }}>资料</button>
                  <button className="btn-link" style={{ fontSize: 12 }} onClick={(event) => { event.stopPropagation(); selectProject(project, "tasks"); }}>任务</button>
                  <button title="删除项目" style={{ color: "var(--red)", padding: 6 }} onClick={(event) => removeProject(event, project)}><Icon name="trash" size={16} /></button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </AppShell>
  );
}

window.Project = Project;