---
import "../../styles/demo.scss";

import Layout from "../../layouts/Layout.astro";
import DialogComponent from "../../components/Dialog/Dialog.astro";
import Button from "../../components/Button/Button.astro";
import FormField from "../../components/FormField/FormField.astro";
import Textarea from "../../components/Textarea/Textarea.astro";
import Select from "../../components/Select/Select.astro";

import DemoNavigation from "../../components/DemoNavigation/DemoNavigation.astro";
import { getFormComponentNavigation } from "../../utils/demoNavigation";
import "../../styles/demo.scss";

// Get navigation items with current page marked as active
const navigationItems = getFormComponentNavigation("dialog");
---

<Layout title="Dialog Component">
  <Fragment slot="main">
    <main id="main" class="layout-main" aria-label="Main content">
      <div class="section-grid owl-32">
        <DemoNavigation title="Form Components" items={navigationItems} />
        <div class="col-4 md:col-4 lg:col-9">
          <div class="component-demo">
            <section class="demo-section">
              <div class="section-grid">
                <div class="col-full">
                  <h2>Basic Dialog</h2>
                  <p>A simple dialog with title, content, and action buttons.</p>

                  <div class="demo-example">
                    <div class="demo-preview contain-floats">
                      <Button variant="primary" type="button" data-dialog-trigger="basic-dialog">
                        Open Basic Dialog
                      </Button>

                      <DialogComponent id="basic-dialog" title="Welcome to Our Platform" size="medium">
                        <p>
                          Thank you for joining our platform! We're excited to have you on board and can't wait to see
                          what you'll accomplish.
                        </p>
                        <p>
                          This dialog demonstrates the basic functionality with a title, content area, and action
                          buttons. It includes proper focus management and keyboard navigation.
                        </p>
                        <Fragment slot="actions">
                          <Button variant="secondary" type="button" data-dialog-close="basic-dialog">
                            Maybe Later
                          </Button>
                          <Button variant="primary" type="button" data-dialog-close="basic-dialog">
                            Get Started
                          </Button>
                        </Fragment>
                      </DialogComponent>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <section class="demo-section">
              <div class="section-grid">
                <div class="col-full">
                  <h2>Alert Dialog</h2>
                  <p>Alert variant for important notifications and warnings.</p>

                  <div class="demo-example">
                    <div class="demo-preview contain-floats">
                      <Button variant="primary" type="button" data-dialog-trigger="alert-dialog">
                        Show Alert Dialog
                      </Button>

                      <DialogComponent id="alert-dialog" title="Important Notice" variant="alert" size="small">
                        <p>
                          <strong>Your session is about to expire.</strong>
                        </p>
                        <p>
                          To continue using the application, please save your work and refresh the page. Any unsaved
                          changes will be lost.
                        </p>
                        <Fragment slot="actions">
                          <Button variant="primary" type="button" data-dialog-close="alert-dialog">
                            I Understand
                          </Button>
                        </Fragment>
                      </DialogComponent>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <section class="demo-section">
              <div class="section-grid">
                <div class="col-full">
                  <h2>Confirmation Dialog</h2>
                  <p>Confirmation variant for destructive actions that need user approval.</p>

                  <div class="demo-example">
                    <div class="demo-preview contain-floats">
                      <Button variant="primary" type="button" data-dialog-trigger="confirmation-dialog">
                        Delete Account
                      </Button>

                      <DialogComponent
                        id="confirmation-dialog"
                        title="Delete Account"
                        variant="confirmation"
                        size="small">
                        <p>
                          <strong>Are you sure you want to delete your account?</strong>
                        </p>
                        <p>
                          This action cannot be undone. All your data, settings, and content will be permanently removed
                          from our servers.
                        </p>
                        <Fragment slot="actions">
                          <Button variant="outline" type="button" data-dialog-close="confirmation-dialog">
                            Cancel
                          </Button>
                          <Button variant="primary" type="button" data-dialog-close="confirmation-dialog">
                            Delete Account
                          </Button>
                        </Fragment>
                      </DialogComponent>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <section class="demo-section">
              <div class="section-grid">
                <div class="col-full">
                  <h2>Large Dialog</h2>
                  <p>Large dialog for content-heavy interactions and forms.</p>

                  <div class="demo-example">
                    <div class="demo-preview contain-floats">
                      <Button variant="primary" type="button" data-dialog-trigger="large-dialog">
                        Open Large Dialog
                      </Button>

                      <DialogComponent id="large-dialog" title="Contact Information" size="large">
                        <div class="dialog-form-content">
                          <p>
                            Please fill out your contact information below. All fields marked with an asterisk (*) are
                            required.
                          </p>

                          <form class="dialog-form">
                            <div class="form-row">
                              <FormField
                                label="First Name"
                                name="firstName"
                                required={true}
                                placeholder="Your first name"
                              />
                              <FormField
                                label="Last Name"
                                name="lastName"
                                required={true}
                                placeholder="Your last name"
                              />
                            </div>

                            <FormField
                              label="Email Address"
                              name="email"
                              type="email"
                              required={true}
                              placeholder="your.email@example.com"
                              helpText="We'll never share your email with anyone else."
                            />

                            <FormField label="Company" name="company" placeholder="Your organization" />

                            <Select
                              label="Inquiry Type"
                              name="inquiryType"
                              required={true}
                              options={[
                                { value: "support", label: "Technical Support" },
                                { value: "sales", label: "Sales Inquiry" },
                                { value: "feedback", label: "Feedback" },
                                { value: "other", label: "Other" },
                              ]}
                              placeholder="Select an inquiry type"
                            />

                            <Textarea
                              label="Message"
                              name="message"
                              required={true}
                              rows={4}
                              placeholder="Tell us how we can help you..."
                              helpText="Please be as specific as possible"
                            />
                          </form>
                        </div>

                        <Fragment slot="actions">
                          <Button variant="outline" type="button" data-dialog-close="large-dialog"> Cancel </Button>
                          <Button variant="primary" type="button" data-dialog-close="large-dialog">
                            Send Message
                          </Button>
                        </Fragment>
                      </DialogComponent>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <section class="demo-section">
              <div class="section-grid">
                <div class="col-full">
                  <h2>Dialog Without Close Button</h2>
                  <p>Dialog that requires explicit user action to close.</p>

                  <div class="demo-example">
                    <div class="demo-preview contain-floats">
                      <Button variant="primary" type="button" data-dialog-trigger="no-close-dialog">
                        Open Required Action Dialog
                      </Button>

                      <DialogComponent
                        id="no-close-dialog"
                        title="Terms and Conditions"
                        size="medium"
                        showCloseButton={false}
                        closeOnOutsideClick={false}
                        closeOnEscape={false}>
                        <p>
                          Before you can continue, you must read and accept our terms and conditions. This dialog cannot
                          be closed without making a selection.
                        </p>
                        <div class="terms-content">
                          <h4>Key Terms:</h4>
                          <ul>
                            <li>You agree to use our service responsibly</li>
                            <li>Your data will be handled according to our privacy policy</li>
                            <li>Service availability is not guaranteed 100% of the time</li>
                            <li>You can cancel your account at any time</li>
                          </ul>
                        </div>

                        <Fragment slot="actions">
                          <Button variant="outline" type="button" data-dialog-close="no-close-dialog"> Decline </Button>
                          <Button variant="primary" type="button" data-dialog-close="no-close-dialog">
                            Accept Terms
                          </Button>
                        </Fragment>
                      </DialogComponent>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <section class="demo-section">
              <div class="section-grid">
                <div class="col-full">
                  <h2>Accessibility Features</h2>
                  <p class="section-intro">Built-in accessibility support for inclusive user experiences.</p>
                </div>
              </div>

              <div class="section-grid">
                <div class="col-full">
                  <div class="accessibility-grid">
                    <div class="accessibility-item">
                      <h4>Keyboard Navigation</h4>
                      <ul>
                        <li><kbd>Tab</kbd> / <kbd>Shift+Tab</kbd> - Navigate within dialog</li>
                        <li><kbd>Escape</kbd> - Close dialog</li>
                        <li>Focus trapping within dialog content</li>
                        <li>Focus restoration on dialog close</li>
                      </ul>
                    </div>

                    <div class="accessibility-item">
                      <h4>Screen Reader Support</h4>
                      <ul>
                        <li>Proper <code>role="dialog"</code> and <code>aria-modal</code></li>
                        <li>Dialog labeled with <code>aria-labelledby</code></li>
                        <li>Background content marked as inert</li>
                        <li>Clear announcements on open/close</li>
                      </ul>
                    </div>

                    <div class="accessibility-item">
                      <h4>Visual Indicators</h4>
                      <ul>
                        <li>Clear focus indicators on all elements</li>
                        <li>Backdrop overlay shows modal context</li>
                        <li>Multiple close options available</li>
                        <li>Consistent button styling and placement</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </main>
  </Fragment></Layout
>