viewof status_display = html`
<div class="status-grid">
  <div class="status-card ${current_status_data.hooks_data_lake === 'healthy' ? 'healthy' : 'error'}">
    <h3>🗄️ Hooks Data Lake</h3>
    <div class="status-badge">${current_status_data.hooks_data_lake.toUpperCase()}</div>
    <p>${current_status_data.total_files_catalogued.toLocaleString()} files catalogued</p>
    ${current_status_data.total_tables ? '<p class="sub-info">' + current_status_data.total_tables + ' tables active</p>' : ''}
  </div>

  <div class="status-card ${current_status_data.lacrm_sync === 'active' ? 'healthy' : current_status_data.lacrm_sync === 'error' ? 'error' : 'warning'}">
    <h3>🔄 LACRM Sync</h3>
    <div class="status-badge">${current_status_data.lacrm_sync.toUpperCase()}</div>
    <p>${current_status_data.active_clients} active clients</p>
  </div>

  <div class="status-card ${current_status_data.google_workspace === 'active' ? 'healthy' : 'warning'}">
    <h3>☁️ Google Workspace</h3>
    <div class="status-badge">${current_status_data.google_workspace.toUpperCase()}</div>
    <p>Communications archived</p>
  </div>

  <div class="status-card healthy">
    <h3>📋 Compliance</h3>
    <div class="status-badge">MONITORED</div>
    <p>${current_status_data.compliance_records} record types tracked</p>
  </div>
</div>

${current_status_data.error ? '<div class="error-details"><strong>Error Details:</strong> ' + current_status_data.error + '</div>' : ''}

<div class="last-updated">
  Last updated: ${current_status_data.timestamp}
  <br>
  Data freshness: ${current_status_data.data_freshness}
  <br>
  Last sync: ${current_status_data.last_sync}
</div>

<style>
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.status-card {
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  background: #f8f9fa;
}

.status-card.healthy {
  border-color: #28a745;
  background: #d4edda;
}

.status-card.warning {
  border-color: #ffc107;
  background: #fff3cd;
}

.status-card.error {
  border-color: #dc3545;
  background: #f8d7da;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.875rem;
  color: white;
  background: #28a745;
  margin: 0.5rem 0;
}

.status-card.warning .status-badge {
  background: #ffc107;
  color: #212529;
}

.status-card.error .status-badge {
  background: #dc3545;
}

.status-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.status-card p {
  margin: 0.5rem 0 0 0;
  font-size: 0.9rem;
  color: #666;
}

.sub-info {
  font-size: 0.8rem !important;
  color: #888 !important;
  margin: 0.25rem 0 0 0 !important;
}

.error-details {
  background: #f8d7da;
  border: 1px solid #dc3545;
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem 0;
  color: #721c24;
  font-size: 0.9rem;
}

.last-updated {
  text-align: center;
  color: #666;
  font-size: 0.875rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
}
</style>
`

import {Plot} from "@observablehq/plot"

Plot.plot({
  width: 800,
  height: 200,
  marginLeft: 50,
  marginBottom: 50,
  x: {
    type: "utc",
    domain: d3.extent(status_data.map(d => new Date(d.date)))
  },
  y: {
    domain: [0, 100],
    label: "Compliance Score"
  },
  marks: [
    Plot.lineY(status_data, {
      x: d => new Date(d.date),
      y: "compliance_score",
      stroke: "#28a745",
      strokeWidth: 2
    }),
    Plot.dot(status_data, {
      x: d => new Date(d.date),
      y: "compliance_score",
      fill: d => d.hooks_status === "healthy" ? "#28a745" : "#ffc107",
      r: 3
    })
  ]
})

Plot.plot({
  width: 800,
  height: 200,
  marginLeft: 50,
  marginBottom: 50,
  x: {
    type: "utc",
    domain: d3.extent(status_data.map(d => new Date(d.date)))
  },
  y: {
    domain: [0, d3.max(status_data, d => d.data_freshness_hours)],
    label: "Hours Since Last Update"
  },
  marks: [
    Plot.areaY(status_data, {
      x: d => new Date(d.date),
      y: "data_freshness_hours",
      fill: "#007bff",
      fillOpacity: 0.3
    }),
    Plot.lineY(status_data, {
      x: d => new Date(d.date),
      y: "data_freshness_hours",
      stroke: "#007bff",
      strokeWidth: 2
    })
  ]
})

viewof status_table = Inputs.table(
  status_data.slice(-10).reverse(),
  {
    columns: [
      "date",
      "time",
      "hooks_status",
      "lacrm_sync",
      "data_freshness_hours",
      "total_files",
      "client_count",
      "compliance_score"
    ],
    header: {
      date: "Date",
      time: "Time",
      hooks_status: "Hooks Status",
      lacrm_sync: "LACRM Sync",
      data_freshness_hours: "Data Age (hrs)",
      total_files: "Files",
      client_count: "Clients",
      compliance_score: "Compliance %"
    },
    format: {
      hooks_status: d => d === "healthy" ? "✅ Healthy" : "⚠️ Warning",
      lacrm_sync: d => d === "active" ? "🟢 Active" : "🟡 Delayed",
      data_freshness_hours: d => `${d}h`,
      total_files: d => d.toLocaleString(),
      compliance_score: d => `${d}%`
    }
  }
)

html`
<div class="stats-summary">
  <div class="stat">
    <strong>${d3.mean(status_data, d => d.compliance_score).toFixed(1)}%</strong>
    <br>Avg Compliance Score
  </div>
  <div class="stat">
    <strong>${d3.mean(status_data, d => d.data_freshness_hours).toFixed(1)}h</strong>
    <br>Avg Data Freshness
  </div>
  <div class="stat">
    <strong>${status_data.filter(d => d.hooks_status === "healthy").length}</strong>
    <br>Healthy Days (30d)
  </div>
  <div class="stat">
    <strong>${status_data.filter(d => d.lacrm_sync === "active").length}</strong>
    <br>Active Sync Days (30d)
  </div>
</div>

<style>
.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.stat {
  text-align: center;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f9fa;
}

.stat strong {
  font-size: 1.5rem;
  color: #007bff;
}
</style>
`