Dialog

"use client";

import { X } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

/**
 * Live Dialog example — open one and the page behind it goes inert: `Tab` and
 * `Shift+Tab` cycle only inside the dialog, `Escape` closes it, and focus
 * returns to the trigger on close.
 *
 *  - Standard dialog: a short form at the default size. Overlay-click and
 *    `Escape` both dismiss; there is no `✕` because Cancel is a clear exit.
 *  - Destructive confirmation: `role="alertdialog"`, `dismissible={false}` so an
 *    accidental overlay click can't discard the decision, Title names the
 *    action, Description states the consequence, and Cancel (first in the DOM,
 *    so it takes initial focus) is paired with a `destructive` confirm.
 *  - Long content: Title and the footer stay fixed while only the body scrolls;
 *    the container never grows past the viewport.
 */
export function DialogShowcase() {
  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Standard dialog — a short form
        </h3>
        <Dialog>
          <DialogTrigger>
            <Button variant="outline">Rename workspace</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Rename workspace</DialogTitle>
              <DialogDescription>
                This changes the name everywhere it appears for your team.
              </DialogDescription>
            </DialogHeader>
            <DialogBody>
              <div className="flex flex-col gap-2">
                <Label htmlFor="rename-workspace">Workspace name</Label>
                <Input id="rename-workspace" defaultValue="Acme Inc." />
              </div>
            </DialogBody>
            <DialogFooter>
              <DialogClose>
                <Button variant="ghost">Cancel</Button>
              </DialogClose>
              <DialogClose>
                <Button>Save</Button>
              </DialogClose>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Destructive confirmation — overlay-click disabled
        </h3>
        <Dialog role="alertdialog" dismissible={false}>
          <DialogTrigger>
            <Button variant="destructive">Delete project</Button>
          </DialogTrigger>
          <DialogContent size="small">
            <DialogHeader>
              <DialogTitle>Delete project?</DialogTitle>
              <DialogDescription>
                This permanently deletes “Migration plan” and all of its tasks.
                This can’t be undone.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose>
                <Button variant="ghost">Cancel</Button>
              </DialogClose>
              <DialogClose>
                <Button variant="destructive">Delete</Button>
              </DialogClose>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Long content — only the body scrolls
        </h3>
        <Dialog>
          <DialogTrigger>
            <Button variant="outline">Review terms</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Updated terms of service</DialogTitle>
              <DialogDescription>
                Review the changes below before continuing.
              </DialogDescription>
              <DialogClose>
                <Button
                  variant="ghost"
                  size="icon"
                  aria-label="Close"
                  className="absolute right-4 top-4"
                >
                  <X />
                </Button>
              </DialogClose>
            </DialogHeader>
            <DialogBody>
              <div className="flex flex-col gap-4">
                {Array.from({ length: 12 }, (_, i) => (
                  <p key={i}>
                    Section {i + 1}. The body region scrolls internally once its
                    content exceeds the available height, while the title,
                    description, and footer stay pinned in place. The dialog
                    container itself is capped and never grows to fit long
                    content.
                  </p>
                ))}
              </div>
            </DialogBody>
            <DialogFooter>
              <DialogClose>
                <Button variant="ghost">Decline</Button>
              </DialogClose>
              <DialogClose>
                <Button>Accept</Button>
              </DialogClose>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </section>
    </div>
  );
}