Toast

"use client";

import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  ToastAction,
  ToastProvider,
  useToast,
  type ToastIntent,
  type ToastPosition,
} from "@/components/ui/toast";

/**
 * Live Toast example. `"use client"`, and the demo mounts its own
 * `<ToastProvider>` (an app would mount one at the root). Toasts portal to a
 * fixed viewport at a corner of the window — not inside this card — so this is
 * the real placement, not a mock.
 *
 *  - One button per intent. `default` / `info` / `success` auto-dismiss after
 *    5s, `warning` after 8s; `destructive` stays until dismissed.
 *  - "Message archived" carries a `<ToastAction>` — running it (or the ✕)
 *    dismisses the toast.
 *  - "Notify ×5" fires five at once: three show, the rest wait in a FIFO queue
 *    and appear as the visible ones clear. Hover or focus the stack to pause
 *    every countdown.
 *  - The position toggle switches the provider between the two V1 placements —
 *    `bottom-right` (stacks upward) and `top-right` (stacks downward).
 */
const INTENTS: { intent: ToastIntent; label: string; title: string; description: string }[] = [
  {
    intent: "default",
    label: "Neutral",
    title: "Draft saved",
    description: "Your changes are stored locally.",
  },
  {
    intent: "info",
    label: "Info",
    title: "Sync scheduled",
    description: "This workspace will sync in a few minutes.",
  },
  {
    intent: "success",
    label: "Success",
    title: "Invite sent",
    description: "We emailed the invitation to your teammate.",
  },
  {
    intent: "warning",
    label: "Warning",
    title: "Storage almost full",
    description: "You have used 92% of your plan's storage.",
  },
  {
    intent: "destructive",
    label: "Error",
    title: "Upload failed",
    description: "The connection dropped. Nothing was uploaded.",
  },
];

function ToastDemo({
  position,
  onPositionChange,
}: {
  position: ToastPosition;
  onPositionChange: (next: ToastPosition) => void;
}) {
  const { toast, dismiss } = useToast();

  return (
    <div className="flex flex-col gap-6">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Position
        </h3>
        <div className="flex flex-wrap gap-2">
          {(["bottom-right", "top-right"] as const).map((value) => (
            <Button
              key={value}
              variant={position === value ? "secondary" : "ghost"}
              aria-pressed={position === value}
              onClick={() => onPositionChange(value)}
            >
              {value}
            </Button>
          ))}
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Intents
        </h3>
        <div className="flex flex-wrap gap-2">
          {INTENTS.map(({ intent, label, title, description }) => (
            <Button
              key={intent}
              variant="outline"
              onClick={() => toast({ intent, title, description })}
            >
              {label}
            </Button>
          ))}
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          With an action
        </h3>
        <Button
          variant="outline"
          onClick={() =>
            toast({
              intent: "success",
              title: "Message archived",
              action: <ToastAction>Undo</ToastAction>,
            })
          }
        >
          Archive message
        </Button>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Stacking &amp; the FIFO queue
        </h3>
        <div className="flex flex-wrap gap-2">
          <Button
            variant="outline"
            onClick={() => {
              for (let i = 1; i <= 5; i += 1) {
                toast({
                  intent: "info",
                  title: `Notification ${i}`,
                  description: "Three show at once; the rest queue.",
                });
              }
            }}
          >
            Notify ×5
          </Button>
          <Button variant="ghost" onClick={() => dismiss()}>
            Dismiss all
          </Button>
        </div>
      </section>
    </div>
  );
}

export function ToastShowcase() {
  const [position, setPosition] =
    React.useState<ToastPosition>("bottom-right");

  return (
    <ToastProvider position={position}>
      <ToastDemo position={position} onPositionChange={setPosition} />
    </ToastProvider>
  );
}