defmodule CentralcloudMy.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">
          {assigns[:page_title] || "My CentralCloud"}
        </.live_title>
      </head>
      <body class="bg-slate-900 text-slate-200 min-h-screen antialiased">
        <nav class="bg-slate-800 px-6 py-3.5 flex items-center justify-between border-b border-slate-700">
          <span class="font-bold text-sky-400 text-base">⚡ CentralCloud</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-700 hover:text-slate-100 transition-colors">
              Dashboard
            </a>
            <a href="/dr"
               class="text-slate-400 no-underline px-3 py-1.5 rounded text-sm hover:bg-slate-700 hover:text-slate-100 transition-colors">
              DR Status
            </a>
            <a href="/billing"
               class="text-slate-400 no-underline px-3 py-1.5 rounded text-sm hover:bg-slate-700 hover:text-slate-100 transition-colors">
              Billing
            </a>
            <a href="/security"
               class="text-slate-400 no-underline px-3 py-1.5 rounded text-sm hover:bg-slate-700 hover:text-slate-100 transition-colors">
              🛡️ Security
            </a>
            <a href="/support"
               class="text-slate-400 no-underline px-3 py-1.5 rounded text-sm hover:bg-slate-700 hover:text-slate-100 transition-colors">
              Support
            </a>
          </div>
          <a href="/logout" data-method="delete"
             class="text-slate-500 text-sm hover:text-slate-300 transition-colors no-underline">
            Sign out
          </a>
        </nav>
        <main class="px-6 py-6 max-w-5xl mx-auto">
          <p :if={msg = Phoenix.Flash.get(@flash, :info)}
             class="px-4 py-3 mb-4 rounded-lg bg-sky-900/60 border border-sky-700 text-sky-200 text-sm">
            {msg}
          </p>
          <p :if={msg = Phoenix.Flash.get(@flash, :error)}
             class="px-4 py-3 mb-4 rounded-lg bg-red-900/60 border border-red-700 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 csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
          let liveSocket = new LiveView.LiveSocket("/live", Phoenix.Socket, {
            params: { _csrf_token: csrfToken }
          });
          liveSocket.connect();
          window.liveSocket = liveSocket;
        </script>
      </body>
    </html>
    """
  end

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