defmodule CentralcloudStaff.Layouts do
  use Phoenix.Component

  def render("root.html", assigns) do
    ~H"""
    <!DOCTYPE html>
    <html lang="en" class="dark">
      <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()}/>
        <link rel="stylesheet" href="/assets/app.css"/>
        <.live_title suffix=" — CentralCloud Ops">
          {assigns[:page_title] || "Ops"}
        </.live_title>
      </head>
      <body class="bg-[#0a0f1e] text-slate-200 min-h-screen antialiased">
        <nav class="bg-[#0f1629] px-8 py-3 flex items-center justify-between border-b border-[#1e3a5f]">
          <span class="font-bold text-orange-400 flex items-center gap-2">🔥 CentralCloud Ops</span>
          <div class="flex gap-0.5">
            <a href="/"
               class="text-slate-400 no-underline px-3 py-1.5 rounded text-sm hover:bg-slate-800 hover:text-slate-100 transition-colors">
              Dashboard
            </a>
            <a href="/oncall"
               class="text-slate-400 no-underline px-3 py-1.5 rounded text-sm hover:bg-slate-800 hover:text-slate-100 transition-colors">
              On-Call
            </a>
            <a href="/incidents"
               class="text-slate-400 no-underline px-3 py-1.5 rounded text-sm hover:bg-slate-800 hover:text-slate-100 transition-colors">
              Incidents
            </a>
            <a href="/stakeholders"
               class="text-slate-400 no-underline px-3 py-1.5 rounded text-sm hover:bg-slate-800 hover:text-slate-100 transition-colors">
              Stakeholders
            </a>
            <a href="/chat"
               class="text-sky-400 no-underline px-3 py-1.5 rounded text-sm hover:bg-slate-800 hover:text-sky-300 transition-colors">
              🤖 AI Chat
            </a>
          </div>
          <a href="/logout"
             class="text-slate-500 text-sm hover:text-slate-300 transition-colors no-underline border-l border-[#1e3a5f] pl-4">
            Sign out
          </a>
        </nav>
        <main class="px-8 py-6 max-w-[1400px] mx-auto">
          <p :if={msg = Phoenix.Flash.get(@flash, :info)}
             class="px-4 py-3 mb-4 rounded-lg bg-[#1e3a5f]/60 border border-blue-600 text-blue-200 text-sm">
            {msg}
          </p>
          <p :if={msg = Phoenix.Flash.get(@flash, :error)}
             class="px-4 py-3 mb-4 rounded-lg bg-red-950/60 border border-red-600 text-red-200 text-sm">
            {msg}
          </p>
          {@inner_content}
        </main>
        <script src="/phoenix.min.js"></script>
        <script src="/phoenix_live_view.min.js"></script>
        <script defer src="https://unpkg.com/alpinejs@3.14.1/dist/cdn.min.js"></script>
        <script>
          let Hooks = {};

          Hooks.ScrollBottom = {
            mounted()  { this.scrollToBottom(); },
            updated()  { this.scrollToBottom(); },
            scrollToBottom() { this.el.scrollTop = this.el.scrollHeight; }
          };

          let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
          let liveSocket = new LiveView.LiveSocket("/live", Phoenix.Socket, {
            params: { _csrf_token: csrfToken },
            hooks: Hooks
          });
          liveSocket.connect();
          window.liveSocket = liveSocket;
        </script>
      </body>
    </html>
    """
  end

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