import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { Dialog, ConfirmDialog, Button } from "@managemate/react";

const meta = {
  title: "Overlays/Dialog",
  component: Dialog,
  tags: ["autodocs"],
} satisfies Meta<typeof Dialog>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  render: () => {
    const [open, setOpen] = useState(false);
    return (
      <>
        <Button onClick={() => setOpen(true)}>Ouvrir le dialog</Button>
        <Dialog
          open={open}
          onOpenChange={setOpen}
          title="Modifier l'utilisateur"
          description="Mettez à jour les informations de cet utilisateur. Les changements sont sauvegardés immédiatement."
          footer={
            <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
              <Button variant="ghost" onClick={() => setOpen(false)}>
                Annuler
              </Button>
              <Button variant="primary" onClick={() => setOpen(false)}>
                Sauvegarder
              </Button>
            </div>
          }
        >
          <p>Contenu du dialog…</p>
        </Dialog>
      </>
    );
  },
};

export const Confirm: Story = {
  name: "ConfirmDialog (destructive)",
  render: () => {
    const [open, setOpen] = useState(false);
    return (
      <>
        <Button variant="danger" onClick={() => setOpen(true)}>
          Supprimer le compte
        </Button>
        <ConfirmDialog
          open={open}
          onOpenChange={setOpen}
          destructive
          title="Supprimer définitivement ?"
          description="Cette action est irréversible. Toutes les données associées à ce compte seront perdues."
          confirmLabel="Supprimer définitivement"
          onConfirm={() => alert("Confirmé")}
        />
      </>
    );
  },
};