<%# locals: (error_message:, return_path:) %>
<%= turbo_frame_tag "modal" do %>
  <%= render DS::Dialog.new do |dialog| %>
    <% dialog.with_header(title: "Lunch Flow Connection Error") %>
    <% dialog.with_body do %>
      <div class="space-y-4">
        <%= render DS::Alert.new(
          title: "Unable to connect to Lunch Flow",
          message: error_message,
          variant: :error
        ) %>

        <div class="bg-surface rounded-lg p-4 space-y-2 text-sm">
          <p class="font-medium text-primary">Common Issues:</p>
          <ul class="list-disc list-inside space-y-1 text-secondary">
            <li><strong>Invalid API Key:</strong> Check your API key in Provider Settings</li>
            <li><strong>Expired Credentials:</strong> Generate a new API key from Lunch Flow</li>
            <li><strong>Network Issue:</strong> Check your internet connection</li>
            <li><strong>Service Down:</strong> Lunch Flow API may be temporarily unavailable</li>
          </ul>
        </div>

        <div class="mt-4">
          <%= link_to settings_providers_path,
                      class: "inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse button-bg-primary hover:button-bg-primary-hover focus:outline-none focus:ring-2 focus:ring-gray-900 theme-dark:focus:ring-white focus:ring-offset-2 transition-colors",
                      data: { turbo: false } do %>
            Check Provider Settings
          <% end %>
        </div>
      </div>
    <% end %>
  <% end %>
<% end %>
