defmodule CentralcloudOps.Layouts do
  use Phoenix.Component

  def render("root.html", assigns) do
    ~H"""
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta name="csrf-token" content={Phoenix.Controller.get_csrf_token()}/>
        <title>CentralCloud Ops</title>
        <style>
          * { box-sizing: border-box; margin: 0; padding: 0; }
          body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
                 background: #0a0f1e; color: #e2e8f0; min-height: 100vh; }
          nav { background: #0f1629; padding: 0.75rem 2rem; display: flex;
                align-items: center; justify-content: space-between;
                border-bottom: 1px solid #1e3a5f; }
          nav .brand { font-weight: 700; font-size: 1rem; color: #f97316;
                       display: flex; align-items: center; gap: 0.5rem; }
          nav .links { display: flex; gap: 0.25rem; }
          nav a { color: #94a3b8; text-decoration: none; padding: 0.4rem 0.8rem;
                  border-radius: 5px; font-size: 0.875rem; }
          nav a:hover, nav a.active { background: #1e293b; color: #e2e8f0; }
          nav .signout { color: #64748b; font-size: 0.8rem; margin-left: 1rem;
                         border-left: 1px solid #1e3a5f; padding-left: 1rem; }
          main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }
          .flash { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem;
                   font-size: 0.875rem; }
          .flash-info  { background: #1e3a5f; border: 1px solid #2563eb; }
          .flash-error { background: #4c0519; border: 1px solid #dc2626; }
          /* Cards */
          .card { background: #0f1629; border: 1px solid #1e3a5f; border-radius: 8px;
                  padding: 1.25rem; }
          /* Status badges */
          .badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 4px;
                   font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
          .badge-firing   { background: #4c0519; color: #fca5a5; border: 1px solid #dc2626; }
          .badge-acked    { background: #422006; color: #fdba74; border: 1px solid #f97316; }
          .badge-resolved { background: #052e16; color: #86efac; border: 1px solid #22c55e; }
          .badge-silenced { background: #1e1b4b; color: #a5b4fc; border: 1px solid #6366f1; }
          /* Table */
          table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
          th { text-align: left; padding: 0.6rem 1rem; color: #64748b; font-weight: 500;
               border-bottom: 1px solid #1e3a5f; font-size: 0.75rem; text-transform: uppercase; }
          td { padding: 0.75rem 1rem; border-bottom: 1px solid #0f172a; vertical-align: middle; }
          tr:hover td { background: #0f1a2e; }
          a.row-link { color: inherit; text-decoration: none; }
          /* Buttons */
          .btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem;
                 border-radius: 5px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
                 border: none; text-decoration: none; }
          .btn-primary  { background: #2563eb; color: #fff; }
          .btn-primary:hover { background: #3b82f6; }
          .btn-success  { background: #15803d; color: #fff; }
          .btn-success:hover { background: #16a34a; }
          .btn-warning  { background: #b45309; color: #fff; }
          .btn-warning:hover { background: #d97706; }
          .btn-danger   { background: #991b1b; color: #fff; }
          .btn-danger:hover { background: #dc2626; }
          .btn-ghost    { background: transparent; color: #94a3b8; border: 1px solid #334155; }
          .btn-ghost:hover { border-color: #64748b; color: #e2e8f0; }
          /* Section header */
          .section-title { font-size: 1.1rem; font-weight: 700; color: #f1f5f9;
                           margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
          /* Grid */
          .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
                       gap: 1rem; margin-bottom: 1.5rem; }
          .stat-card { background: #0f1629; border: 1px solid #1e3a5f; border-radius: 8px;
                       padding: 1.25rem; }
          .stat-label { color: #64748b; font-size: 0.7rem; font-weight: 600;
                        text-transform: uppercase; margin-bottom: 0.4rem; }
          .stat-value { font-size: 2rem; font-weight: 800; line-height: 1; }
          .stat-value.red    { color: #f87171; }
          .stat-value.orange { color: #fb923c; }
          .stat-value.green  { color: #4ade80; }
          .stat-value.blue   { color: #60a5fa; }
        </style>
        <.live_title suffix=" — CentralCloud Ops">
          {assigns[:page_title] || "Ops"}
        </.live_title>
      </head>
      <body>
        <nav>
          <span class="brand">🔥 CentralCloud Ops</span>
          <div class="links">
            <a href="/">Dashboard</a>
            <a href="/oncall">On-Call</a>
            <a href="/incidents">Incidents</a>
            <a href="/stakeholders">Stakeholders</a>
          </div>
          <div class="signout">
            <a href="/logout" style="color:#64748b;text-decoration:none;">Sign out</a>
          </div>
        </nav>
        <main>
          <p :if={msg = Phoenix.Flash.get(@flash, :info)} class="flash flash-info">{msg}</p>
          <p :if={msg = Phoenix.Flash.get(@flash, :error)} class="flash flash-error">{msg}</p>
          {@inner_content}
        </main>
      </body>
    </html>
    """
  end

  def render("app.html", assigns) do
    ~H"""
    {@inner_content}
    """
  end
end
