<Layouts.authenticated
  flash={@flash}
  current_scope={@current_scope}
  current_organization={@current_organization}
  active_page="devices"
  timezone={@timezone}
>
  <div class="mb-6">
    <!-- Header with back button -->
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center gap-4">
        <.link
          navigate={~p"/devices/#{@device_id}"}
          class="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
        >
          <.icon name="hero-arrow-left" class="h-5 w-5" />
        </.link>
        <div>
          <h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">{@chart_title}</h1>
          <p class="text-sm text-zinc-600 dark:text-zinc-400">{@device.name}</p>
        </div>
      </div>
    </div>
    <!-- Date Range Selector -->
    <div class="flex items-center gap-2 mb-6">
      <span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Time Range:</span>
      <div class="flex gap-1">
        <%= for {label, value} <- [{"1 Hour", "1h"}, {"6 Hours", "6h"}, {"12 Hours", "12h"}, {"24 Hours", "24h"}, {"7 Days", "7d"}, {"30 Days", "30d"}] do %>
          <button
            phx-click="change_range"
            phx-value-range={value}
            class={[
              "px-3 py-1.5 text-sm font-medium rounded border transition-colors",
              if @range == value do
                "bg-blue-500 text-white border-blue-500"
              else
                "bg-white dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 border-zinc-300 dark:border-zinc-600 hover:bg-zinc-50 dark:hover:bg-zinc-700"
              end
            ]}
          >
            {label}
          </button>
        <% end %>
      </div>
    </div>
    <!-- Large Chart -->
    <%= if @chart_data do %>
      <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
        <div class="p-6">
          <div
            id="detail-chart"
            phx-hook="SensorChart"
            data-chart={@chart_data}
            data-unit={@unit}
            data-auto-scale={to_string(@auto_scale)}
            data-show-zero-line={to_string(@show_zero_line)}
            data-range={@range}
            style="height: 600px;"
          >
            <canvas></canvas>
          </div>
        </div>
      </div>
    <% else %>
      <div class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 p-12">
        <div class="text-center">
          <.icon name="hero-chart-bar" class="mx-auto h-12 w-12 text-zinc-400" />
          <h3 class="mt-2 text-sm font-semibold text-zinc-900 dark:text-zinc-100">
            No sensor data available
          </h3>
          <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
            This device doesn't have any sensors of this type.
          </p>
        </div>
      </div>
    <% end %>
  </div>
</Layouts.authenticated>
