import type { Meta, StoryObj } from "@storybook/react-vite"
import { InfoIcon, TriangleAlertIcon } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

const meta = {
  title: "Components/Feedback/Alert",
  component: Alert,
  parameters: {
    layout: "padded",
    docs: {
      description: {
        component:
          "현재 HM 규격: 인라인 메시지(Toast 아님). padding 12/16, radius 4, border 1px, Title 14/20/500, Description 14/20/400. variant는 default(neutral)와 destructive만 둡니다. success·warning·information은 HM 상태 색이 정해지지 않아 만들지 않았습니다. 닫기 동작은 없습니다.",
      },
    },
  },
  argTypes: { variant: { control: "inline-radio", options: ["default", "destructive"] } },
} satisfies Meta<typeof Alert>
export default meta
type Story = StoryObj<typeof meta>

export const All: Story = {
  name: "Alert",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader
        kicker={STORY_KICKER.components}
        title="Alert"
        description="화면 안에 놓이는 인라인 메시지입니다(Toast 아님). variant는 default(neutral)와 destructive만 두며 닫기 동작은 없습니다."
      />
      <StorySection title="Overview">
        <StateBoard
          min={320}
          states={[
            {
              id: "default",
              label: "Default",
              children: (
                <Alert>
                  <InfoIcon aria-hidden="true" />
                  <AlertTitle>Heads up</AlertTitle>
                  <AlertDescription>You can update your project settings at any time.</AlertDescription>
                </Alert>
              ),
            },
          ]}
        />
      </StorySection>
      <StorySection title="Variants">
        <StateBoard
          min={320}
          states={[
            {
              id: "destructive",
              label: "Destructive",
              children: (
                <Alert variant="destructive">
                  <TriangleAlertIcon aria-hidden="true" />
                  <AlertTitle>Unable to save</AlertTitle>
                  <AlertDescription>Check the project name and try again.</AlertDescription>
                </Alert>
              ),
            },
          ]}
        />
      </StorySection>
      <StorySection title="Usage" description="아이콘 없음, 제목만, 긴 내용 구성입니다.">
        <StateBoard
          min={320}
          states={[
            {
              id: "no-icon",
              label: "No icon",
              children: (
                <Alert>
                  <AlertTitle>Title only layout</AlertTitle>
                  <AlertDescription>Without an icon the text starts at the left edge.</AlertDescription>
                </Alert>
              ),
            },
            {
              id: "title-only",
              label: "Title only",
              children: (
                <Alert>
                  <InfoIcon aria-hidden="true" />
                  <AlertTitle>Saved</AlertTitle>
                </Alert>
              ),
            },
            {
              id: "long",
              label: "Long content",
              children: (
                <div className="max-w-xs">
                  <Alert>
                    <InfoIcon aria-hidden="true" />
                    <AlertTitle>Scheduled maintenance</AlertTitle>
                    <AlertDescription>The service will be unavailable for a short time during the maintenance window. Please save your work before it starts.</AlertDescription>
                  </Alert>
                </div>
              ),
            },
          ]}
        />
      </StorySection>
    </StoryPage>
  ),
}

export const Default: Story = {
  tags: ["verification"],
  render: () => (
    <Alert>
      <InfoIcon aria-hidden="true" />
      <AlertTitle>Heads up</AlertTitle>
      <AlertDescription>You can update your project settings at any time.</AlertDescription>
    </Alert>
  ),
}
export const Destructive: Story = {
  tags: ["verification"],
  render: () => (
    <Alert variant="destructive">
      <TriangleAlertIcon aria-hidden="true" />
      <AlertTitle>Unable to save</AlertTitle>
      <AlertDescription>Check the project name and try again.</AlertDescription>
    </Alert>
  ),
}