import { AlertCard } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof AlertCard> = {
  title: "Components/AlertCard",
  component: AlertCard,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "An alert card component for displaying error messages and critical information with an icon and responsive layout.",
      },
    },
  },
  argTypes: {
    errorMessage: {
      control: { type: "text" },
      description: "Error message or content to display",
    },
    className: {
      control: { type: "text" },
      description: "Additional CSS classes",
    },
    textVariant: {
      control: { type: "text" },
      description: "Text variant class name",
    },
  },
  args: {
    errorMessage: "This is an error message that needs your attention.",
  },
};

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

// Default alert card
export const Default: Story = {
  args: {},
};

// Short error message
export const ShortMessage: Story = {
  args: {
    errorMessage: "Error occurred",
  },
};

// Long error message
export const LongMessage: Story = {
  args: {
    errorMessage:
      "This is a longer error message that demonstrates how the alert card handles extended text content. The layout will adapt responsively to accommodate the message length.",
  },
};

// Custom text variant
export const CustomTextVariant: Story = {
  args: {
    errorMessage: "Error with custom text styling",
    textVariant: "body1",
  },
};

// With React node content
export const WithReactNode: Story = {
  args: {
    errorMessage: (
      <div>
        <p className="body2">Error occurred while processing your request.</p>
        <p className="body3 mt-1 text-text-secondary">
          Please try again or contact support if the issue persists.
        </p>
      </div>
    ),
  },
};

// Responsive layout
export const Responsive: Story = {
  render: () => (
    <div className="max-w-4xl w-full space-y-4">
      <div>
        <h3 className="mb-2 text-sm font-medium text-gray-600">
          Mobile Layout (flex-col)
        </h3>
        <div className="w-64 border border-gray-200 p-2">
          <AlertCard errorMessage="This alert card stacks vertically on mobile devices with the icon on top." />
        </div>
      </div>
      <div>
        <h3 className="mb-2 text-sm font-medium text-gray-600">
          Desktop Layout (flex-row)
        </h3>
        <div className="w-full border border-gray-200 p-2">
          <AlertCard errorMessage="This alert card displays horizontally on desktop with the icon on the left." />
        </div>
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          "Alert card adapts its layout responsively - vertical on mobile, horizontal on desktop.",
      },
    },
  },
};

// Custom styling
export const CustomStyling: Story = {
  args: {
    errorMessage: "Alert card with custom styling",
    className: "rounded-lg shadow-lg",
  },
};

// Multiple alert cards
export const Multiple: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-4">
      <AlertCard errorMessage="First error message" />
      <AlertCard errorMessage="Second error message with more details about what went wrong" />
      <AlertCard errorMessage="Third error message" />
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Multiple alert cards displayed together.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="max-w-2xl w-full space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">Default Alert Card</h3>
        <AlertCard errorMessage="Default error message" />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Long Message</h3>
        <AlertCard errorMessage="This is a longer error message that demonstrates how the alert card handles extended text content while maintaining proper spacing and readability." />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Custom Styled</h3>
        <AlertCard
          errorMessage="Custom styled alert card"
          className="rounded-lg"
          textVariant="body1"
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all alert card variants and states.",
      },
    },
  },
};