<div class="space-y-4">
  <%
    lf_link = link_to("Lunch Flow", "https://www.lunchflow.app/?atp=BiDIYS", target: "_blank", rel: "noopener noreferrer", class: "text-primary font-medium underline")
  %>
  <%= render "settings/providers/setup_steps",
             steps: [
               t("settings.providers.lunchflow_panel.step_1_html", link: lf_link),
               t("settings.providers.lunchflow_panel.step_2"),
               t("settings.providers.lunchflow_panel.step_3")
             ] %>

  <% error_msg = local_assigns[:error_message] || @error_message %>
  <% if error_msg.present? %>
    <%= render DS::Alert.new(message: error_msg, variant: :error) %>
  <% end %>

  <%
    # Get or initialize a lunchflow_item for this family
    lunchflow_item = Current.family.lunchflow_items.first_or_initialize(name: "Lunch Flow Connection")
    is_new_record = lunchflow_item.new_record?
  %>

  <%= styled_form_with model: lunchflow_item,
                       url: is_new_record ? lunchflow_items_path : lunchflow_item_path(lunchflow_item),
                       scope: :lunchflow_item,
                       method: is_new_record ? :post : :patch,
                       data: { turbo: true },
                       class: "space-y-3" do |form| %>
    <%= form.text_field :api_key,
                        label: "API Key",
                        placeholder: is_new_record ? "Paste API key here" : "Enter new API key to update",
                        type: :password %>

    <%= form.text_field :base_url,
                        label: "Base URL (Optional)",
                        placeholder: "https://lunchflow.app/api/v1 (default)",
                        value: lunchflow_item.base_url %>

    <div class="flex justify-end">
      <%= form.submit is_new_record ? "Save and connect" : "Update connection",
                      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" %>
    </div>
  <% end %>

</div>
