export function DashboardScreen({ stats }) {
  const metricLine = `${stats.executionsToday} runs today`;
  const isLive = stats.activeWorkflows > 0;
  return `
    <section class="screen-card dashboard-card">
      <div class="screen-intro">
        <p class="step-label">Live operations</p>
        <h2>${isLive ? "Your inbox operator is live" : "Automation is stopped"}</h2>
      </div>
      <div class="dashboard-hero">
        <div>
          <p class="dashboard-kicker">Today</p>
          <p class="dashboard-metric">${metricLine}</p>
        </div>
        <span class="topbar-status ${isLive ? "status-success" : "status-warning"}">
          <span class="status-dot"></span>
          <span>${isLive ? "Stable" : "Stopped"}</span>
        </span>
      </div>
      <div class="dashboard-stats">
        <div class="stat-card">
          <span>Active workflows</span>
          <strong>${stats.activeWorkflows}</strong>
        </div>
        <div class="stat-card">
          <span>Pending escalations</span>
          <strong>${stats.pendingEscalations}</strong>
        </div>
        <div class="stat-card">
          <span>Runs completed</span>
          <strong>${stats.executionsToday}</strong>
        </div>
      </div>
      <div class="button-row split-actions compact-actions">
        ${stats.pendingEscalations ? `<button id="flowpilot-open-escalation" class="secondary-button">Open escalation</button>` : ""}
        ${isLive ? `<button id="flowpilot-stop-automation" class="ghost-button">Stop automation</button>` : ""}
      </div>
    </section>
  `;
}