<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 my-8">
  <div class="mb-8">
    <.header />
  </div>

  <%= if @error do %>
    <div class="mt-6 bg-red-50 border border-red-200 rounded-md p-4">
      <div class="flex">
        <div class="flex-shrink-0">
          <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <div class="ml-3">
          <h3 class="text-sm font-medium text-red-800">Error</h3>
          <div class="mt-1 text-sm text-red-700">
            {@error}
          </div>
        </div>
      </div>
    </div>
  <% else %>
    <div class="mt-6 bg-white shadow-sm rounded-lg overflow-hidden">
      <.table id="callsign-packets" rows={@all_packets}>
        <:col :let={packet} label="Time">
          <span class="text-sm text-gray-600 font-mono">
            <%= case packet.received_at do %>
              <% %DateTime{} = dt -> %>
                {Calendar.strftime(dt, "%H:%M:%S")}
              <% dt when is_binary(dt) -> %>
                <%= case DateTime.from_iso8601(dt) do %>
                  <% {:ok, parsed_dt, _} -> %>
                    {Calendar.strftime(parsed_dt, "%H:%M:%S")}
                  <% _ -> %>
                    {dt}
                <% end %>
              <% _ -> %>
                N/A
            <% end %>
          </span>
        </:col>
        <:col :let={packet} label="Sender">
          <span class="text-sm text-gray-900 font-medium">{packet.sender}</span>
        </:col>
        <:col :let={packet} label="Data Type">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
            {packet.data_type}
          </span>
        </:col>
        <:col :let={packet} label="Information">
          <span class="text-sm text-gray-900 font-mono">
            <%= if String.length(packet.information_field || "") > 50 do %>
              <span title={packet.information_field}>
                {String.slice(packet.information_field, 0, 50)}...
              </span>
            <% else %>
              {packet.information_field}
            <% end %>
          </span>
        </:col>
        <:col :let={packet} label="Path">
          <span class="text-xs text-gray-500 font-mono">
            {packet.path}
          </span>
        </:col>
      </.table>
    </div>

    <%= if length(@all_packets) == 0 do %>
      <div class="mt-8 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100">
          <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
            />
          </svg>
        </div>
        <h3 class="mt-2 text-sm font-medium text-gray-900">No packets found for {@callsign}</h3>
        <p class="mt-1 text-sm text-gray-500">
          Packets will appear here as they are received live or if there are stored packets for this callsign.
        </p>
      </div>
    <% end %>

    <div class="mt-4 px-4 py-3 bg-gray-50 border-t border-gray-200 rounded-b-lg">
      <div class="flex items-center justify-between text-sm text-gray-500">
        <div class="flex items-center space-x-4">
          <span>
            Live packets: <span class="font-medium text-gray-900">{length(@live_packets)}</span>
          </span>
          <span>
            Stored packets: <span class="font-medium text-gray-900">{length(@packets)}</span>
          </span>
          <span>
            Total: <span class="font-medium text-gray-900">{length(@all_packets)}/100</span>
          </span>
        </div>
      </div>
    </div>
  <% end %>
</div>
