// Dashboard / Projects Overview backed by D1 snapshot data

function Dashboard({ go }) {
  const { snapshot, busy } = window.useGGGSnapshot ? window.useGGGSnapshot() : { snapshot: null, busy: false };
  const workspace = snapshot?.workspace;
  const metrics = snapshot?.dashboard?.metrics || [];
  const projects = snapshot?.projects || [];
  const actions = snapshot?.dashboard?.actions || [];
  const activity = snapshot?.dashboard?.activity || [];
  const credits = snapshot?.credits;
  const wallet = credits?.wallet || {};

  return (
    <AppShell go={go} current="dashboard" pageTitle="项目总览">
      <div className="page">
        <div className="page-header">
          <div>
            <h1 className="page-title">早上好，{workspace?.display_name || "好出海用户"}</h1>
            <p className="page-sub">
              {busy && !snapshot ? "正在从 D1 加载项目数据..." : `当前工作区共有 ${projects.length} 个出海项目，下一步事项 ${actions.length} 项。`}
            </p>
          </div>
          <div className="row-flex">
            <button className="btn btn-ghost"><Icon name="filter" size={14} /> 筛选</button>
            <button className="btn btn-primary" onClick={() => go("project-new")}><Icon name="plus" size={14} /> 创建新项目</button>
          </div>
        </div>

        <DashboardWelcomeTips show={snapshot?.onboarding?.dashboardTourRequired} go={go} />

        <div className="kpi-grid">
          {metrics.map((metric) => (
            <div key={metric.id} className={"kpi " + metricToneClass(metric.tone)}>
              <div className="label">{metric.label}</div>
              <div className="val">{metric.value}</div>
              <div className="meta"><Icon name={metric.icon || "info"} size={12} /> {metric.helper_text}</div>
            </div>
          ))}
        </div>

        <div className="dash-grid">
          <div className="card project-list-card">
            <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 }}>
                <button className="chip active">全部</button>
                <button className="chip">进行中</button>
                <button className="chip">已完成</button>
                <button className="chip">草稿</button>
              </div>
            </div>
            {!projects.length && (
              <div className="empty-project-state">
                <div className="empty-project-icon"><Icon name="folder" size={24} /></div>
                <h4>还没有真实出海项目</h4>
                <p>从一个真实产品、目标国家和渠道假设开始。系统会基于您上传的资料和 MCP 采集的真实来源生成报告。</p>
                <button className="btn btn-primary btn-sm" onClick={() => go("project-new")}><Icon name="plus" size={14} /> 创建项目</button>
              </div>
            )}
            {projects.map((project) => {
              const state = projectState(project);
              return (
                <div key={project.id} className="project-row" onClick={() => {
                  if (window.GGGApi?.setActiveProjectId) window.GGGApi.setActiveProjectId(project.id);
                  go("project", project.id);
                }}>
                  <div>
                    <div className="pname">{project.name}</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>
                    <span className={"badge badge-" + state.riskTone} style={{ padding: "1px 8px", fontSize: 11 }}>
                      <span className="badge-dot"></span>{state.risk}
                    </span>
                  </div>
                  <button
                    onClick={async (e) => {
                      e.stopPropagation();
                      if (!confirm(`确认删除项目 ${project.name}？`)) return;
                      if (window.GGGApi) await window.GGGApi.deleteProject(project.id);
                    }}
                    title="删除项目"
                    style={{ color: "var(--red)", padding: 6 }}
                  >
                    <Icon name="trash" size={16} />
                  </button>
                </div>
              );
            })}
          </div>

          <div className="dash-side">
            <div className="card card-pad">
              <h3 style={{ fontSize: 15, fontWeight: 600, display: "flex", alignItems: "center", gap: 8 }}>
                <Icon name="sparkles" size={15} color="var(--cyan)" /> 下一步推荐
              </h3>
              <div className="col-flex" style={{ marginTop: 14, gap: 10 }}>
                {!actions.length && <div className="empty-mini">暂无下一步事项。</div>}
                {actions.map((item) => (
                  <div key={item.id} className="action-mini">
                    <div className="action-mini-icon"><Icon name={item.icon || "sparkles"} size={14} /></div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{item.title}</div>
                      <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 2 }}>{item.subtitle}</div>
                    </div>
                    <button className="btn-link" style={{ fontSize: 12, fontWeight: 600 }} onClick={() => go(item.action_route || "project-new")}>{item.action_label} →</button>
                  </div>
                ))}
              </div>
            </div>

            <div className="card card-pad">
              <h3 style={{ fontSize: 15, fontWeight: 600 }}>最近活动</h3>
              {!activity.length && <div className="empty-mini">暂无账号活动。</div>}
              {activity.map((item) => (
                <div key={item.id} className="activity-item">
                  <div className="activity-dot" />
                  <div>
                    <div className="text">{item.event_text}</div>
                    <div className="time">{item.event_time_label}</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="card card-pad plan-card">
              <div style={{ fontSize: 11, opacity: 0.72, letterSpacing: 0.08, textTransform: "uppercase", fontWeight: 700 }}>GoodGoGlobal Credits</div>
              <h3 style={{ fontSize: 16, fontWeight: 700, marginTop: 6, color: "white" }}>好出海点数</h3>
              <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 10 }}>
                <span style={{ fontSize: 26, fontWeight: 760 }}>{wallet.available_credits ?? 0}</span>
                <span style={{ opacity: 0.72, fontSize: 13 }}>可用点</span>
              </div>
              <div className="credit-mini-grid">
                <span>预留 {wallet.reserved_credits ?? 0}</span>
                <span>已用 {wallet.consumed_credits ?? 0}</span>
              </div>
              <button className="btn btn-teal btn-sm btn-block" style={{ marginTop: 16 }} onClick={() => {
                go("credits");
              }}>充值点数 / 查看流水</button>
            </div>
          </div>
        </div>
      </div>
    </AppShell>
  );
}

function DashboardWelcomeTips({ show, go }) {
  const [visible, setVisible] = React.useState(Boolean(show));
  React.useEffect(() => setVisible(Boolean(show)), [show]);
  if (!visible) return null;
  const close = async () => {
    setVisible(false);
    if (window.GGGApi) await window.GGGApi.markDashboardTourSeen().catch(() => {});
  };
  return (
    <div className="welcome-tips">
      <button className="welcome-tips-close" onClick={close}><Icon name="x" size={14} /></button>
      <div className="tip-bubble primary">
        <Icon name="sparkles" size={18} />
        <div>
          <b>欢迎进入 Good Go Global 工作台</b>
          <span>这里不会预置演示数据。请从真实产品和目标市场创建第一个项目。</span>
        </div>
      </div>
      <div className="tip-bubble">
        <Icon name="database" size={18} />
        <div>
          <b>资料先行</b>
          <span>上传报价单、SKU、认证、包装标签，报告会更准确。</span>
        </div>
      </div>
      <div className="tip-actions">
        <button className="btn btn-primary btn-sm" onClick={() => { close(); go("project-new"); }}>创建项目</button>
        <button className="btn btn-ghost btn-sm" onClick={close}>知道了</button>
      </div>
    </div>
  );
}

function metricToneClass(tone) {
  if (tone === "accent") return "kpi-accent";
  if (tone === "warn") return "kpi-warn";
  if (tone === "risk") return "kpi-risk";
  return "";
}

function projectState(project) {
  const status = project.status || "draft";
  if (status === "generated") return { label: "Ready", tone: "green", progress: 100, risk: "低", riskTone: "green" };
  if (status === "ready_to_generate") return { label: "Need Review", tone: "orange", progress: 92, risk: "高", riskTone: "red" };
  if (status === "missing_data") return { label: "Needs input", tone: "orange", progress: project.target_country === "United Arab Emirates" ? 45 : 78, risk: "中", riskTone: "orange" };
  return { label: "Draft", tone: "ocean", progress: 18, risk: "低", riskTone: "green" };
}

function countryFlag(country = "") {
  if (/United States/i.test(country)) return "🇺🇸";
  if (/United Arab Emirates/i.test(country)) return "🇦🇪";
  if (/Singapore/i.test(country)) return "🇸🇬";
  return "🇨🇦";
}

function marketName(country = "") {
  if (/United States/i.test(country)) return "美国";
  if (/United Arab Emirates/i.test(country)) return "阿联酋";
  if (/Singapore/i.test(country)) return "新加坡";
  if (/Canada \/ United States/i.test(country)) return "加拿大 · 美国";
  return "加拿大";
}

function dateOnly(value = "") {
  return String(value).slice(0, 10);
}

window.Dashboard = Dashboard;