// Simple home — gives the workspace something useful when first opened.

const Home = ({ user, onOpenScreen }) => {
  const cards = [
    { id: "userlist", title: "用户列表", desc: "管理系统账号、角色与权限分组", icon: <Ic.user size={18} /> },
    { id: "module", title: "系统模块配置", desc: "配置 KPI 流程作业单与业务模块", icon: <Ic.settings size={18} /> },
  ];
  const stats = [
    { label: "今日待办", value: 12, tone: "var(--accent)" },
    { label: "进行中报价", value: 47, tone: "var(--warning)" },
    { label: "本月订单", value: 286, tone: "var(--success)" },
    { label: "待审核", value: 8, tone: "var(--danger)" },
  ];
  return (
    <div style={{ padding: 16, height: "100%", overflow: "auto", background: "var(--bg-app)" }}>
      <div style={{ background: "#fff", border: "1px solid var(--border)", padding: 16, marginBottom: 12 }}>
        <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 4 }}>欢迎回来，{user || "admin"}</div>
        <div style={{ fontSize: 12, color: "var(--text-muted)" }}>
          XLY-ERP 印刷制造管理平台 · {new Date().toLocaleDateString("zh-CN", { year: "numeric", month: "long", day: "numeric", weekday: "long" })}
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 12 }}>
        {stats.map((s) => (
          <div key={s.label} style={{ background: "#fff", border: "1px solid var(--border)", padding: "12px 14px" }}>
            <div style={{ fontSize: 11, color: "var(--text-muted)", marginBottom: 4 }}>{s.label}</div>
            <div style={{ fontSize: 22, fontWeight: 600, color: s.tone, fontFamily: '"JetBrains Mono", Menlo, monospace' }}>
              {s.value}
            </div>
          </div>
        ))}
      </div>
      <div style={{ background: "#fff", border: "1px solid var(--border)" }}>
        <div style={{ padding: "8px 12px", borderBottom: "1px solid var(--border)", fontSize: 12, fontWeight: 500, background: "var(--bg-row-zebra)" }}>
          快捷入口
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--border)" }}>
          {cards.map((c) => (
            <div
              key={c.id}
              onClick={() => onOpenScreen(c.id, c.title)}
              style={{
                background: "#fff", padding: 14,
                cursor: "pointer", display: "flex", alignItems: "center", gap: 10,
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-row-hover)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "#fff"}
            >
              <span style={{ width: 32, height: 32, background: "var(--accent-soft)", color: "var(--accent-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>{c.icon}</span>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{c.title}</div>
                <div style={{ fontSize: 11, color: "var(--text-muted)", marginTop: 2 }}>{c.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.Home = Home;