Dialog

<%= rui_dialog(id: "my-dialog", title: "Edit Profile") do |d| %>
  <% d.with_trigger(color: :primary) do %>
    Open Modal
  <% end %>
  <% d.with_body do %>
    <p>Update your profile information.</p>
  <% end %>
<% end %>

<%# Center Modal (default) %>
<%= rui_dialog(position: :center, title: "Modal") do |d| %>
  <% d.with_trigger do %>Open Modal<% end %>
  <% d.with_body do %>Content<% end %>
<% end %>

<%# Right Drawer - Settings, Filters %>
<%= rui_dialog(position: :right, title: "Settings", size: :lg) do |d| %>
  <% d.with_trigger do %>Open Settings<% end %>
  <% d.with_body do %>Settings form<% end %>
<% end %>

<%# Left Drawer - Navigation %>
<%= rui_dialog(position: :left, title: "Menu") do |d| %>
  <% d.with_trigger do %>Menu<% end %>
  <% d.with_body do %>Navigation links<% end %>
<% end %>

<%= rui_dialog(title: "Confirm", size: :sm) do |d| %>
  <% d.with_trigger do %>Open Small<% end %>
  <% d.with_body do %>Are you sure?<% end %>
<% end %>

<%= rui_dialog(title: "Edit", size: :lg) do |d| %>
  <% d.with_trigger do %>Open Large<% end %>
  <% d.with_body do %>Form content<% end %>
<% end %>

<%= rui_dialog(title: "Preview", size: :xl) do |d| %>
  <% d.with_trigger do %>Open XL<% end %>
  <% d.with_body do %>Large content area<% end %>
<% end %>

<%= rui_dialog(title: "Edit Profile", responsive: true) do |d| %>
  <% d.with_trigger(color: :violet) do %>
    Responsive Modal
  <% end %>
  <% d.with_body do %>
    <p>This dialog transforms to a bottom sheet on mobile.</p>
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Cancel", variant: :outline, data: { action: "dialog#close" }) %>
    <%= rui_button("Save", color: :primary) %>
  <% end %>
<% end %>

<%# Right drawer on desktop, bottom sheet on mobile %>
<%= rui_dialog(position: :right, title: "Settings", size: :lg, responsive: true) do |d| %>
  <% d.with_trigger do |btn| %>
    <% btn.with_icon(:settings) %>
    Settings
  <% end %>
  <% d.with_body do %>
    <!-- Settings content -->
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Cancel", variant: :outline, data: { action: "dialog#close" }) %>
    <%= rui_button("Save Settings", color: :primary) %>
  <% end %>
<% end %>

<%# Switch at tablet size (1024px) instead of 768px %>
<%= rui_dialog(
  title: "Confirm Action",
  responsive: true,
  responsive_breakpoint: 1024
) do |d| %>
  <% d.with_body do %>
    <p>This switches to sheet mode at 1024px.</p>
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Cancel", variant: :outline, data: { action: "dialog#close" }) %>
    <%= rui_button("Confirm", color: :success) %>
  <% end %>
<% end %>

<%# Common breakpoint values %>
<%# 640  - sm (Tailwind mobile) %>
<%# 768  - md (default, tablet portrait) %>
<%# 1024 - lg (tablet landscape) %>
<%# 1280 - xl (small desktop) %>

<%# Keep centered on mobile instead of bottom sheet %>
<%= rui_dialog(
  title: "Important Notice",
  responsive: true,
  mobile_position: :center
) do |d| %>
  <% d.with_body do %>
    This stays centered even on mobile.
  <% end %>
<% end %>

<%# Use top sheet on mobile %>
<%= rui_dialog(
  title: "Notification",
  responsive: true,
  mobile_position: :top
) do |d| %>
  <% d.with_body do %>
    This becomes a top sheet on mobile.
  <% end %>
<% end %>

<%= rui_dialog(id: "confirm-dialog", title: "Confirm Delete") do |d| %>
  <% d.with_body do %>
    <p>Are you sure you want to delete this item?</p>
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Cancel", variant: :outline, data: { action: "dialog#close" }) %>
    <%= rui_button("Delete", color: :danger) %>
  <% end %>
<% end %>

<%# Custom header with avatar %>
<%= rui_dialog(id: "user-dialog") do |d| %>
  <% d.with_header do %>
    <div class="flex items-center gap-3">
      <%= rui_avatar(initials: "JD", color: :blue) %>
      <div>
        <h2 class="font-semibold">Jane Doe</h2>
        <p class="text-sm text-zinc-500">Edit Profile</p>
      </div>
    </div>
  <% end %>
  <% d.with_body do %>
    <!-- Form content -->
  <% end %>
<% end %>

<%= rui_dialog(title: "Edit Profile", size: :lg) do |d| %>
  <% d.with_body do %>
    <form class="space-y-4">
      <%= rui_input(name: :email, label: "Email", type: :email) %>
      <%= rui_textarea(name: :bio, label: "Bio") %>
    </form>
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Cancel", variant: :outline, data: { action: "dialog#close" }) %>
    <%= rui_button("Save", color: :primary) %>
  <% end %>
<% end %>

<%= rui_dialog(title: "Delete Account?", size: :sm, backdrop: :dark) do |d| %>
  <% d.with_body do %>
    <div class="text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
        <!-- Warning icon -->
      </div>
      <p>This will permanently delete your account.</p>
    </div>
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Cancel", variant: :outline, data: { action: "dialog#close" }) %>
    <%= rui_button("Delete", color: :danger) %>
  <% end %>
<% end %>

<%# Default - 50% opacity (standard) %>
<%= rui_dialog(title: "Modal", backdrop: :default) do |d| %>
  <% d.with_body do %>Standard backdrop<% end %>
<% end %>

<%# Dark - 75% opacity (more focus) %>
<%= rui_dialog(title: "Important", backdrop: :dark) do |d| %>
  <% d.with_body do %>Darker overlay<% end %>
<% end %>

<%# Light - 25% opacity (subtle) %>
<%= rui_dialog(title: "Info", backdrop: :light) do |d| %>
  <% d.with_body do %>Subtle overlay<% end %>
<% end %>

<%# Blur - 30% opacity + blur effect %>
<%= rui_dialog(title: "Premium", backdrop: :blur) do |d| %>
  <% d.with_body do %>Frosted glass effect<% end %>
<% end %>

<%# Non-dismissible - Backdrop click does not close %>
<%= rui_dialog(title: "Required Form", dismissible: false) do |d| %>
  <% d.with_body do %>
    Must use close button or complete action
  <% end %>
<% end %>

<%# No close button - Hide the X button %>
<%= rui_dialog(title: "Wizard Step", closable: false) do |d| %>
  <% d.with_body do %>
    Complete this step to continue
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Complete", data: { action: "dialog#close" }) %>
  <% end %>
<% end %>

<%# Forced interaction - Both options disabled %>
<%= rui_dialog(
  title: "Terms & Conditions",
  closable: false,
  dismissible: false
) do |d| %>
  <% d.with_body do %>
    Please read and accept the terms
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Accept", data: { action: "dialog#close" }) %>
  <% end %>
<% end %>

<%= rui_dialog(position: :left, title: "Menu", size: :sm) do |d| %>
  <% d.with_body do %>
    <nav class="space-y-1">
      <%= link_to "Home", root_path, class: "..." %>
      <%= link_to "Products", products_path, class: "..." %>
      <%= link_to "About", about_path, class: "..." %>
    </nav>
  <% end %>
<% end %>

<%= rui_dialog(position: :right, title: "Shopping Cart", size: :md) do |d| %>
  <% d.with_body do %>
    <% @cart_items.each do |item| %>
      <div class="flex gap-4 pb-4 border-b">
        <%= image_tag item.image, class: "w-16 h-16 rounded-lg object-cover" %>
        <div class="flex-1">
          <h4 class="font-medium"><%= item.name %></h4>
          <p class="text-sm text-zinc-500"><%= item.variant %> • <%= item.quantity %>x</p>
          <p class="font-semibold"><%= number_to_currency(item.price) %></p>
        </div>
        <%= rui_button(variant: :ghost, size: :sm, class: "text-red-500") do |btn| %>
          <% btn.with_icon(:trash_2) %>
        <% end %>
      </div>
    <% end %>
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Continue Shopping", variant: :outline, data: { action: "dialog#close" }) %>
    <%= rui_button("Checkout", color: :primary) %>
  <% end %>
<% end %>

<%= rui_dialog(position: :bottom, closable: false, dismissible: false) do |d| %>
  <% d.with_header do %>
    <div class="flex items-center gap-3">
      <!-- Cookie icon -->
      <h2 class="font-semibold">Cookie Preferences</h2>
    </div>
  <% end %>
  <% d.with_body do %>
    <p>We use cookies to enhance your experience.</p>
    <div class="space-y-3">
      <%= rui_checkbox(:essential, label: "Essential", checked: true, disabled: true) %>
      <%= rui_checkbox(:analytics, label: "Analytics") %>
      <%= rui_checkbox(:marketing, label: "Marketing") %>
    </div>
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Reject All", variant: :outline, data: { action: "dialog#close" }) %>
    <%= rui_button("Accept Selected", color: :primary, data: { action: "dialog#close" }) %>
  <% end %>
<% end %>

<%= rui_dialog(title: "Quick View", size: :xl) do |d| %>
  <% d.with_body do %>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <%= image_tag @product.image, class: "w-full rounded-lg" %>
      </div>
      <div class="space-y-4">
        <%= rui_badge("New Arrival", color: :green, size: :sm) %>
        <h3 class="text-2xl font-bold"><%= @product.name %></h3>
        <div class="text-3xl font-bold"><%= number_to_currency(@product.price) %></div>
        <p><%= @product.description %></p>
        <!-- Size and color selectors -->
      </div>
    </div>
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("View Full Details", variant: :outline) %>
    <%= rui_button("Add to Cart", color: :primary) do |btn| %>
      <% btn.with_icon(:shopping_cart) %>
    <% end %>
  <% end %>
<% end %>

<%= rui_dialog(position: :right, title: "Notifications", size: :md) do |d| %>
  <% d.with_body do %>
    <% @notifications.each do |notification| %>
      <div class="p-3 rounded-lg border-l-4 border-<%= notification.color %>-500">
        <div class="flex items-start gap-3">
          <%= rui_avatar(initials: notification.user_initials, size: :sm) %>
          <div class="flex-1">
            <p class="font-medium"><%= notification.message %></p>
            <p class="text-sm text-zinc-500"><%= time_ago_in_words(notification.created_at) %> ago</p>
          </div>
        </div>
      </div>
    <% end %>
  <% end %>
  <% d.with_footer do %>
    <%= rui_button("Mark All Read", variant: :ghost, size: :sm) %>
    <%= rui_link("View All", href: notifications_path) %>
  <% end %>
<% end %>

<%# Open dialog from any button %>
<button data-action="dialog#open" data-dialog-target="trigger">
  Open
</button>

<%# Close from inside dialog %>
<%= rui_button("Cancel", variant: :outline, data: { action: "dialog#close" }) %>

<%# Toggle behavior %>
<button data-action="dialog#toggle">Toggle Dialog</button>

<%# Listen for dialog close %>
<div data-controller="my-controller"
     data-action="dialog:closed->my-controller#handleClose">
  <%= rui_dialog(title: "Example") do |d| %>
    <% d.with_body do %>Content<% end %>
  <% end %>
</div>

<%# In your Stimulus controller %>
// my_controller.js
handleClose(event) {
  const { dialog, returnValue } = event.detail
  console.log("Dialog closed with:", returnValue)
}

// Get the dialog controller
const dialogElement = document.querySelector('[data-controller="dialog"]')
const dialogController = application.getControllerForElementAndIdentifier(
  dialogElement,
  "dialog"
)

// Open/close programmatically
dialogController.open()
dialogController.close()

// Or use native dialog methods directly
const dialog = document.getElementById("my-dialog")
dialog.showModal()  // Opens as modal
dialog.close()      // Closes dialog