import { useAppDispatch, useAppSelector } from "@/store";
import { openTab } from "@/store/tabsSlice";

const STATS = [
  { label: "待办事项", value: 12, color: "#3a8ee0" },
  { label: "今日报价", value: 5, color: "#27a567" },
  { label: "进行中订单", value: 28, color: "#d98e1f" },
  { label: "待审核", value: 3, color: "#d04141" },
];

export default function Home() {
  const auth = useAppSelector((s) => s.auth);
  const dispatch = useAppDispatch();

  return (
    <div style={{ padding: 16, height: "100%", overflow: "auto", background: "var(--bg-app)" }}>
      <div
        style={{
          background: "#fff",
          padding: 20,
          marginBottom: 14,
          border: "1px solid var(--border)",
        }}
      >
        <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 4 }}>
          欢迎回来，{auth.user?.sUserName ?? ""}
        </div>
        <div style={{ fontSize: 12, color: "var(--text-muted)" }}>
          XLY-ERP · {auth.companyName ?? ""}
        </div>
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
          gap: 12,
          marginBottom: 14,
        }}
      >
        {STATS.map((s) => (
          <div
            key={s.label}
            style={{
              background: "#fff",
              padding: 16,
              border: "1px solid var(--border)",
              borderTop: `3px solid ${s.color}`,
            }}
          >
            <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 6 }}>
              {s.label}
            </div>
            <div style={{ fontSize: 26, fontWeight: 600, color: s.color }}>{s.value}</div>
          </div>
        ))}
      </div>

      <div
        style={{
          background: "#fff",
          padding: 16,
          border: "1px solid var(--border)",
        }}
      >
        <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 10 }}>快捷入口</div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <QuickLink
            label="用户列表"
            onClick={() =>
              dispatch(openTab({ id: "userlist", label: "用户列表", screen: "userlist" }))
            }
          />
          <QuickLink
            label="系统模块配置"
            onClick={() =>
              dispatch(openTab({ id: "module", label: "系统模块配置", screen: "module" }))
            }
          />
        </div>
      </div>
    </div>
  );
}

function QuickLink({ label, onClick }: { label: string; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      style={{
        height: 30,
        padding: "0 14px",
        border: "1px solid var(--border)",
        background: "var(--bg-input)",
        cursor: "pointer",
        fontSize: 12,
        color: "var(--text)",
        fontFamily: "inherit",
      }}
    >
      {label}
    </button>
  );
}