// Biểu đồ SVG thuần cho tab "Quản lý thời lượng".
// Không thêm thư viện biểu đồ: cả frontend hiện chỉ có react + react-router,
// mà mấy dạng ở đây (cột ngang, đường theo ngày) vẽ tay còn nhẹ và gọn hơn.
// Mọi con số đều IN THẲNG lên biểu đồ, không bắt người xem ước lượng theo trục.

// ── Định dạng ───────────────────────────────────────────────────

export function fmtDur(ms) {
  if (ms == null || Number.isNaN(ms)) return "—";
  const s = Math.round(ms / 1000);
  if (s < 60) return `${s} giây`;
  const m = Math.floor(s / 60);
  if (m < 60) return s % 60 ? `${m} phút ${s % 60} giây` : `${m} phút`;
  const h = Math.floor(m / 60);
  return m % 60 ? `${h} giờ ${m % 60} phút` : `${h} giờ`;
}

export function fmtShort(ms) {
  if (ms == null || Number.isNaN(ms)) return "—";
  const s = ms / 1000;
  if (s < 60) return `${s < 10 ? s.toFixed(1) : Math.round(s)}s`;
  const m = s / 60;
  if (m < 60) return `${m < 10 ? m.toFixed(1) : Math.round(m)}p`;
  return `${(m / 60).toFixed(1)}h`;
}

export const fmtPct = (v) => (v == null ? "—" : `${Math.round(v * 100)}%`);
export const fmtNum = (v) => (v == null ? "—" : Number(v).toLocaleString("vi-VN"));

export const fmtTime = (ts) =>
  ts ? new Date(ts * 1000).toLocaleString("vi-VN", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }) : "—";

// ── Cột ngang ───────────────────────────────────────────────────
// data: [{ label, value, text?, sub? }]

export function BarChart({ data, color = "", empty = "Chưa có dữ liệu" }) {
  const rows = (data || []).filter((d) => d && d.value != null);
  if (!rows.length) return <p className="small muted" style={{ fontStyle: "italic", margin: 0 }}>{empty}</p>;
  const max = Math.max(...rows.map((r) => Math.abs(r.value)), 1);

  return (
    <div>
      {rows.map((r, i) => (
        <div className="barrow" key={r.label + i}>
          <div className="bar-head">
            <span className="n">{r.label}</span>
            <span className="v">
              {r.text != null ? r.text : fmtNum(r.value)}
              {r.sub && <span className="dim"> · {r.sub}</span>}
            </span>
          </div>
          <div className="bar-track">
            <div className={"bar-fill" + (color ? " " + color : "")}
                 style={{ width: `${Math.max(2, (Math.abs(r.value) / max) * 100)}%` }} />
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Đường theo ngày ─────────────────────────────────────────────
// series: [{ key, label, color, values: number[] }] · labels: string[]

export function LineChart({ labels, series, height = 170, unit = "" }) {
  const pts = labels || [];
  if (pts.length < 2) {
    return <p className="small muted" style={{ fontStyle: "italic", margin: 0 }}>Cần ít nhất 2 ngày dữ liệu để vẽ.</p>;
  }
  const W = 720, H = height, PADL = 38, PADR = 10, PADT = 12, PADB = 24;
  const max = Math.max(1, ...series.flatMap((s) => s.values.map((v) => v || 0)));
  const x = (i) => PADL + (i * (W - PADL - PADR)) / (pts.length - 1);
  const y = (v) => H - PADB - ((v || 0) / max) * (H - PADT - PADB);

  // Nhãn trục X: thưa ra để không chồng chữ.
  const stepX = Math.max(1, Math.ceil(pts.length / 8));

  return (
    <div style={{ width: "100%", overflowX: "auto" }}>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", minWidth: 420, display: "block" }}
           role="img" aria-label="Hoạt động theo ngày">
        {[0, 0.5, 1].map((f) => (
          <g key={f}>
            <line x1={PADL} x2={W - PADR} y1={y(max * f)} y2={y(max * f)}
                  stroke="var(--line)" strokeWidth="1" />
            <text x={PADL - 6} y={y(max * f) + 4} textAnchor="end"
                  fontSize="10" fill="var(--muted)">
              {max * f >= 1000 ? `${Math.round((max * f) / 1000)}k` : Math.round(max * f)}
            </text>
          </g>
        ))}
        {series.map((s) => (
          <g key={s.key}>
            <polyline
              points={s.values.map((v, i) => `${x(i)},${y(v)}`).join(" ")}
              fill="none" stroke={s.color} strokeWidth="3"
              strokeLinejoin="round" strokeLinecap="round" />
            {s.values.map((v, i) => (
              <circle key={i} cx={x(i)} cy={y(v)} r="4" fill={s.color}>
                <title>{`${pts[i]} · ${s.label}: ${fmtNum(v)}${unit}`}</title>
              </circle>
            ))}
          </g>
        ))}
        {pts.map((p, i) => (i % stepX === 0 ? (
          <text key={p} x={x(i)} y={H - 7} textAnchor="middle" fontSize="10" fill="var(--muted)">
            {p.slice(5)}
          </text>
        ) : null))}
      </svg>
      <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 4 }}>
        {series.map((s) => (
          <span key={s.key} style={{ fontSize: 12, color: "var(--ink-2)", display: "flex", alignItems: "center", gap: 6 }}>
            <i style={{ width: 10, height: 3, background: s.color, borderRadius: 2, display: "inline-block" }} />
            {s.label}
          </span>
        ))}
      </div>
    </div>
  );
}

// ── Thanh chia phần (dùng cho "bỏ dở ở bước nào") ──────────────

const STEP_COLORS = {
  open: "#c9c2ba", prepare: "var(--orange)", run: "#f2b21c",
  review: "#3b82f6", output: "var(--green)", done: "#16a34a",
};

// Tên bước bằng tiếng Việt — bảng báo cáo không để lọt khoá máy ra màn hình.
const STEP_ORDER = ["open", "prepare", "run", "review", "output", "done"];
export const STEP_VI = {
  open: "mở tool", prepare: "chuẩn bị", run: "máy chạy",
  review: "xem lại", output: "lấy sản phẩm", done: "xong",
};

export function StepBar({ counts }) {
  const entries = Object.entries(counts || {}).filter(([, v]) => v > 0)
    .sort((a, b) => STEP_ORDER.indexOf(a[0]) - STEP_ORDER.indexOf(b[0]));
  const total = entries.reduce((a, [, v]) => a + v, 0);
  if (!total) return <span className="small muted">—</span>;
  return (
    <div>
      <div className="funnel">
        {entries.map(([k, v]) => (
          <div key={k} title={`${STEP_VI[k] || k}: ${v} việc`}
               style={{ width: `${(v / total) * 100}%`, background: STEP_COLORS[k] || "var(--muted)" }} />
        ))}
      </div>
      <div className="funnel-lbl">
        {entries.map(([k, v]) => `${STEP_VI[k] || k} ${v}`).join(" · ")}
      </div>
    </div>
  );
}