<!-- app/views/cities/_city.html.erb -->
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 group overflow-hidden">
  <% if city.latest_weather_art&.image&.attached? %>
    <!-- 图片和主要信息区域 -->
    <div class="relative">
      <!-- 图片 -->
      <figure class="aspect-[16/9] overflow-hidden">
        <%= image_tag city.latest_weather_art.preview_image.processed,
                      class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %>
      </figure>

      <!-- 渐变遮罩 - 使用多层渐变提供更好的文字可读性 -->
      <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
      <div class="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-transparent"></div>

      <!-- 温度显示 - 放在右上角 -->
      <div class="absolute top-4 right-4 bg-black/30 backdrop-blur-sm rounded-xl px-3 py-2 text-white">
        <div class="text-2xl font-bold leading-none">
          <%= city.latest_weather_art.temperature %>°C
        </div>
        <div class="text-xs text-white/80">
          Feels <%= city.latest_weather_art.feeling_temp %>°C
        </div>
      </div>

      <!-- 城市名称和位置 - 放在底部 -->
      <div class="absolute bottom-0 left-0 right-0 p-6">
        <h3 class="text-2xl font-display text-white font-bold mb-2 drop-shadow-lg">
          <%= city.name %>
        </h3>
        <div class="flex items-center gap-2 text-white/90 text-sm drop-shadow-lg">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
          </svg>
          <%= "#{city&.state&.name}, " if city&.state&.name %><%= city&.country&.name %>, <%= city&.region&.name %>
        </div>
      </div>
    </div>

    <!-- 底部信息区域 -->
    <div class="card-body bg-base-100">
      <!-- 天气信息和更新时间 -->
      <div class="flex items-center justify-between text-sm text-base-content/70 mb-3">
        <div class="flex items-center gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
          </svg>
          <%= city.latest_weather_art.description %>
        </div>
        <div class="flex items-center gap-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <%= city.latest_weather_art.formatted_time(:date) %>
        </div>
      </div>

      <!-- 天气详情 -->
      <div class="grid grid-cols-3 gap-2 mb-4">
        <div class="stat bg-base-200/50 rounded-lg p-2">
          <div class="stat-title text-xs">Humidity</div>
          <div class="stat-value text-lg"><%= city.latest_weather_art.humidity %>%</div>
        </div>
        <div class="stat bg-base-200/50 rounded-lg p-2">
          <div class="stat-title text-xs">Wind</div>
          <div class="stat-value text-lg"><%= city.latest_weather_art.wind_scale %></div>
        </div>
        <div class="stat bg-base-200/50 rounded-lg p-2">
          <div class="stat-title text-xs">Visibility</div>
          <div class="stat-value text-lg"><%= city.latest_weather_art.visibility %>km</div>
        </div>
      </div>

      <!-- 按钮 -->
      <div class="card-actions justify-end">
        <%= link_to city_path(city),
                    class: "btn btn-primary btn-sm gap-2", data: { turbo_frame: "_top" } do %>
          View Details
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
          </svg>
        <% end %>
      </div>
    </div>

  <% else %>
    <!-- 无图片时的备用显示 -->
    <div class="card-body">
      <h3 class="card-title font-display text-2xl mb-3"><%= city.name %></h3>

      <div class="flex items-center gap-2 text-base-content/70 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
        </svg>
        <%= "#{city&.state&.name}, " if city&.state&.name %><%= city&.country&.name %>, <%= city&.region&.name %>
      </div>

      <div class="bg-base-200 rounded-lg p-4 mb-4">
        <div class="grid grid-cols-2 gap-4 text-sm">
          <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
            </svg>
            <span>Lat: <%= city.latitude %></span>
          </div>
          <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary/70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
            </svg>
            <span>Long: <%= city.longitude %></span>
          </div>
        </div>
      </div>

      <div class="card-actions justify-end">
        <%= link_to city_path(city),
                    class: "btn btn-primary btn-sm gap-2", data: { turbo_frame: "_top" } do %>
          View Details
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
          </svg>
        <% end %>
      </div>
    </div>
  <% end %>
</div>