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

const meta = {
  title: "Forms/Button",
  component: Button,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "Bouton DSMMG avec variants Material 3 / Fluent. Pill par défaut. Tous les états (default, hover, active, focus-visible, disabled, loading) sont stylés. Touch target 44×44 garanti pour `icon-only`.",
      },
    },
  },
  argTypes: {
    variant: {
      control: "select",
      options: ["primary", "tonal", "secondary", "tertiary", "ghost", "elevated", "danger", "success"],
    },
    size: { control: "select", options: ["xs", "sm", "md", "lg", "xl"] },
    loading: { control: "boolean" },
    disabled: { control: "boolean" },
    block: { control: "boolean" },
  },
  args: { children: "Continuer", variant: "primary", size: "md" },
} satisfies Meta<typeof Button>;

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

export const Primary: Story = {};

export const Tonal: Story = { args: { variant: "tonal" } };
export const Secondary: Story = { args: { variant: "secondary" } };
export const Tertiary: Story = { args: { variant: "tertiary" } };
export const Ghost: Story = { args: { variant: "ghost" } };
export const Elevated: Story = { args: { variant: "elevated" } };
export const Danger: Story = { args: { variant: "danger", children: "Supprimer" } };
export const Success: Story = { args: { variant: "success", children: "Valider" } };

export const Loading: Story = { args: { loading: true } };
export const Disabled: Story = { args: { disabled: true } };
export const Block: Story = { args: { block: true } };

export const WithIcon: Story = {
  args: { icon: "arrow-right-line", iconPosition: "right" },
};

export const IconOnly: Story = {
  args: { icon: "settings-3-line", "aria-label": "Paramètres", children: undefined },
};

export const AllSizes: Story = {
  render: (args) => (
    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
      <Button {...args} size="xs">XS</Button>
      <Button {...args} size="sm">Small</Button>
      <Button {...args} size="md">Medium</Button>
      <Button {...args} size="lg">Large</Button>
      <Button {...args} size="xl">Extra</Button>
    </div>
  ),
};

export const AllVariants: Story = {
  render: () => (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
      <Button variant="primary">Primary</Button>
      <Button variant="tonal">Tonal</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="tertiary">Tertiary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="elevated">Elevated</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="success">Success</Button>
    </div>
  ),
};