// Page header + metrics row
function PageHeader({ currentAgent }) {
  const greet = `Welcome back, ${currentAgent.name.split(" ")[0]}`;
  const sub = "Here's your pipeline today.";
  const today = new Date().toLocaleDateString("en-GB", { weekday: "long", day: "numeric", month: "long" });
  const currentMonth = new Date().toLocaleDateString("en-GB", { month: "long", year: "numeric" });
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", padding: "26px 32px 18px" }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6, whiteSpace: "nowrap" }}>
          <span style={{ fontSize: 11, color: "#9CA3AF", letterSpacing: 0.6, textTransform: "uppercase" }}>{today}</span>
          <span style={{ fontSize: 11, color: "#9CA3AF" }}>·</span>
          <span style={{ fontSize: 11, color: "#9CA3AF" }}>{currentMonth}</span>
        </div>
        <h1 style={{ fontSize: 22, fontWeight: 500, color: "#1F2433", margin: 0, letterSpacing: -0.4 }}>{greet}</h1>
        <p style={{ fontSize: 13, color: "#6B7280", margin: "4px 0 0" }}>{sub}</p>
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        <button style={btnGhost}>Export</button>
        <button style={btnPrimary}><Icons.plus size={14} /> New Lead</button>
      </div>
    </div>
  );
}

const btnGhost = {
  height: 34, padding: "0 14px",
  background: "#fff", border: "1px solid #ECECEA",
  borderRadius: 7, fontSize: 12.5, fontWeight: 500,
  color: "#1F2433", cursor: "pointer", fontFamily: "inherit",
};
const btnPrimary = {
  height: 34, padding: "0 14px",
  background: "#1F2433", color: "#fff",
  border: "none", borderRadius: 7,
  fontSize: 12.5, fontWeight: 500,
  display: "inline-flex", alignItems: "center", gap: 6,
  cursor: "pointer", fontFamily: "inherit",
};

function MetricCard({ label, value, sub, accent, trend, urgent, onEdit, formatter }) {
  return (
    <div style={{
      flex: 1, minWidth: 0,
      background: urgent ? "#FBF6E8" : "#fff",
      border: "1px solid " + (urgent ? "#EAD9A8" : "#ECECEA"),
      borderRadius: 10,
      padding: "16px 18px",
      display: "flex", flexDirection: "column", gap: 8,
      position: "relative", overflow: "hidden",
    }}>
      {urgent && (
        <span className="pulseDot" style={{
          position: "absolute", top: 14, right: 14,
          width: 8, height: 8, borderRadius: 999,
          background: "#D49A3A",
        }} />
      )}
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ fontSize: 11.5, color: "#6B7280", fontWeight: 400 }}>{label}</span>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
        <span style={{ fontSize: 24, fontWeight: 500, color: "#1F2433", letterSpacing: -0.6, lineHeight: 1, whiteSpace: "nowrap" }}>
          <EditableText value={value} onChange={onEdit} style={{ fontFamily: "inherit" }} />
        </span>
        {trend && (
          <span style={{ display: "inline-flex", alignItems: "center", gap: 2, fontSize: 11, color: "#3F7A33", background: "#EDF6E8", padding: "2px 6px", borderRadius: 4 }}>
            <Icons.trendUp size={11} /> {trend}
          </span>
        )}
      </div>
      <div style={{ fontSize: 11.5, color: "#9CA3AF" }}>{sub}</div>
    </div>
  );
}

function MetricsRow({ metrics, onUpdate }) {
  // metrics is editable; values are stored numeric but displayed.
  const setM = (key, raw) => {
    // try to parse numbers gracefully
    const numeric = Number(String(raw).replace(/[^\d.]/g, ""));
    if (!isNaN(numeric) && numeric > 0) onUpdate({ ...metrics, [key]: numeric });
    else onUpdate({ ...metrics, [key]: raw });
  };
  return (
    <div style={{ padding: "0 32px 22px", display: "flex", gap: 12 }}>
      <MetricCard
        label="Total Leads"
        value={String(metrics.totalLeads)}
        sub={`${metrics.shown} shown`}
        onEdit={(v) => setM("totalLeads", v)}
      />
      <MetricCard
        label="Active Pipeline Value"
        value={formatINR(metrics.pipelineValue)}
        sub="Across your 5 open leads"
        onEdit={(v) => setM("pipelineValue", v)}
      />
      <MetricCard
        label="Conversion Rate"
        value={`${metrics.conversionRate}%`}
        sub="This month"
        onEdit={(v) => setM("conversionRate", v)}
      />
      <MetricCard
        label="Awaiting Action"
        value={String(metrics.awaitingAction)}
        sub="leads need response"
        urgent
        onEdit={(v) => setM("awaitingAction", v)}
      />
      <MetricCard
        label="Disbursed This Month"
        value={formatINR(metrics.disbursedThisMonth)}
        sub="Your contribution"
        onEdit={(v) => setM("disbursedThisMonth", v)}
      />
    </div>
  );
}

Object.assign(window, { PageHeader, MetricsRow });