import type { Metadata } from "next";

import { Example } from "@/components/design-system/example";
import { PageHeader } from "@/components/design-system/page-header";
import { Section } from "@/components/design-system/section";
import { ConfirmDialog, DeleteCustomerAlert, EditProductDialog } from "@/components/design-system/sections/overlays/dialogs";
import { ConfirmLevels } from "@/components/design-system/sections/overlays/confirm-levels";
import { ModalSizes, ModalUseCases } from "@/components/design-system/sections/overlays/modals";
import { DrawersSection, SensitiveSection } from "@/components/design-system/sections/overlays/drawer-demo";
import { AsyncStatusSection, ErrorStatesSection } from "@/components/design-system/sections/overlays/errors-demo";
import { NotificationsSection } from "@/components/design-system/sections/overlays/notifications-demo";
import { AlertVariants, Banners, HoverCardDemo, LoadingStates, PopoverDemo, ToastDemo, TooltipDemo } from "@/components/design-system/sections/overlays/feedback";
import { ResizableDemo } from "@/components/design-system/sections/overlays/resizable-demo";
import { BottomDrawer, FilterSheet, ProductSheet } from "@/components/design-system/sections/overlays/sheets";

export const metadata: Metadata = { title: "Overlays and feedback | Medora Design System" };

export default function OverlaysPage() {
  return (
    <>
      <PageHeader
        title="Overlays and feedback"
        description="Layers that sit above the page and messages that report what happened: dialogs, sheets, drawers, popovers, tooltips, toasts and alerts."
      />
      <Section
        id="modal"
        title="Modal"
        description="The Medora modal (components/medora/modal.tsx): a centred layer over a #001110 at 50% backdrop with a fixed header, a body that scrolls on its own and a pinned footer. Four widths. Focus is trapped, Escape closes it and focus returns to what opened it. Forms stop backdrop clicks from closing once something is typed."
      >
        <Example
          title="Sizes"
          description="sm, md, lg, xl"
          code={`<Modal
  trigger={<Button variant="outline" />} triggerLabel="Open"
  size="md" icon={SlidersHorizontalIcon}
  title="Adjust stock" description="Panadol 500 mg"
  dismissible={!dirty}
  footer={<>
    <ModalClose render={<Button variant="outline" />}>Cancel</ModalClose>
    <Button onClick={save}>Save adjustment</Button>
  </>}
>
  …form fields…
</Modal>`}
        >
          <ModalSizes />
        </Example>
        <Example title="Use cases" description="Form with validation, long scrolling content, destructive confirmation">
          <ModalUseCases />
        </Example>
      </Section>
      <Section
        id="confirm-levels"
        title="Confirmation levels"
        description="One confirmation dialog, four levels. Neutral for irreversible but harmless actions; A for destructive but recoverable; B adds a required reason that is recorded; C adds typing a word or record number. The title names the action and the object, the body gives the money and stock consequences, and the button names the result. Focus starts on Cancel or the reason, never the danger button; the backdrop does nothing; Enter in the reason does not submit."
      >
        <Example title="Levels" description="Submit B or C empty to see the field errors; C matches the typed text ignoring case and spaces">
          <ConfirmLevels />
        </Example>
      </Section>
      <Section id="dialogs" title="Dialog and Alert Dialog" description="Dialog for forms and confirmations that can be dismissed. Alert Dialog for destructive actions that must be answered.">
        <Example title="Dialog" description="Edit form and simple confirm" className="flex flex-wrap gap-2">
          <EditProductDialog />
          <ConfirmDialog />
        </Example>
        <Example title="Alert Dialog" description="Destructive, with consequence spelled out" className="flex flex-wrap gap-2">
          <DeleteCustomerAlert />
        </Example>
      </Section>
      <DrawersSection />
      <Section id="sheets" title="Sheet and Drawer" description="Sheets slide from the edge for details and filters. The drawer is the touch pattern for mobile-style choices.">
        <Example title="Sheet and Drawer" className="flex flex-wrap gap-2">
          <ProductSheet />
          <FilterSheet />
          <BottomDrawer />
        </Example>
      </Section>
      <Section id="floating" title="Popover, Tooltip and Hover Card" description="Small anchored layers. Tooltips name things, hover cards preview a record, popovers hold a little content.">
        <Example title="Anchored layers" className="flex flex-wrap items-center gap-6">
          <PopoverDemo />
          <TooltipDemo />
          <HoverCardDemo />
        </Example>
      </Section>
      <NotificationsSection />
      <ErrorStatesSection />
      <AsyncStatusSection />
      <SensitiveSection />
      <Section id="toasts" title="Toasts" description="Transient confirmation in the bottom-right corner, from the Base UI toast manager (not Sonner).">
        <Example title="Toast types" description="Click to fire">
          <ToastDemo />
        </Example>
      </Section>
      <Section id="alerts" title="Alerts and banners" description="Inline messages that stay until the situation changes.">
        <Example title="Alert variants" description="info, success, warning, destructive">
          <AlertVariants />
        </Example>
        <Example title="Banner pattern" description="Full-width status above content">
          <Banners />
        </Example>
      </Section>
      <Section id="loading" title="Loading states" description="Progress for known work, spinner for unknown, skeletons to hold layout.">
        <Example title="Progress, Spinner, Skeleton">
          <LoadingStates />
        </Example>
      </Section>
      <Section id="resizable" title="Resizable panels">
        <Example title="Horizontal split" bare>
          <ResizableDemo />
        </Example>
      </Section>
    </>
  );
}