import type { Meta, StoryObj } from "@storybook/vue3-vite"
import ChatMessage from "./ChatMessage.vue"

const meta = {
  title: "Elements/Code/ChatMessage",
  component: ChatMessage,
  tags: ["autodocs"],
  args: {
    message: "Hello, how can I help?",
    role: "assistant",
    authorName: "Assistant",
  },
  parameters: {
    docs: {
      description: {
        component:
          "```ts\nimport { ChatMessage } from \"@gxp-dev/mod-ui/code\"\n```\n\nGeneric chat-message bubble — Slack / Discord / iMessage style. Display-only, no platform integration.",
      },
    },
  },
} satisfies Meta<typeof ChatMessage>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {},
}

export const UserMessage: Story = {
  args: {
    role: "user",
    authorName: "Ada",
    message: "Can you help me draft a release note?",
  },
}

export const AssistantMessage: Story = {
  args: {
    role: "assistant",
    authorName: "Assistant",
    message: "Sure! Here's a starting draft for your release note.",
  },
}

export const SystemMessage: Story = {
  args: {
    role: "system",
    authorName: "System",
    message: "Conversation started.",
  },
}

export const WithAvatar: Story = {
  args: {
    role: "assistant",
    authorName: "Assistant",
    authorAvatarUrl: "https://i.pravatar.cc/64?img=12",
    message: "Hello there — I'm a bot with a real avatar image.",
  },
}

export const WithTimestamp: Story = {
  args: {
    role: "assistant",
    authorName: "Assistant",
    message: "Sent earlier today.",
    timestamp: new Date(),
  },
}

export const Pending: Story = {
  args: {
    role: "assistant",
    authorName: "Assistant",
    pending: true,
  },
}

export const WithError: Story = {
  args: {
    role: "assistant",
    authorName: "Assistant",
    message: "Tried to send this message...",
    error: "Failed to deliver. Tap to retry.",
  },
}

export const WithActions: Story = {
  args: {
    role: "assistant",
    authorName: "Assistant",
    message: "Here's the answer. What would you like to do next?",
    actions: [
      { id: "copy", label: "Copy", icon: "copy" },
      { id: "regenerate", label: "Regenerate", icon: "refresh-cw" },
      { id: "thumbs-up", label: "Helpful", icon: "thumbs-up" },
    ],
  },
}

export const LongMessage: Story = {
  args: {
    role: "assistant",
    authorName: "Assistant",
    timestamp: new Date(),
    message:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
  },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { ChatMessage },
    setup() {
      const now = new Date()
      const conversation = [
        {
          role: "system",
          authorName: "System",
          message: "Conversation started",
          timestamp: new Date(now.getTime() - 5 * 60_000),
        },
        {
          role: "user",
          authorName: "Ada",
          message: "Hey, can you scaffold a Laravel command for me?",
          timestamp: new Date(now.getTime() - 4 * 60_000),
        },
        {
          role: "assistant",
          authorName: "Assistant",
          authorAvatarUrl: "https://i.pravatar.cc/64?img=12",
          message:
            "Of course! Here's a starting point for an Artisan command — let me know what behavior you want.",
          timestamp: new Date(now.getTime() - 3 * 60_000),
          actions: [
            { id: "copy", label: "Copy", icon: "copy" },
            { id: "regenerate", label: "Regenerate", icon: "refresh-cw" },
          ],
        },
        {
          role: "user",
          authorName: "Ada",
          message: "Make it queue-able.",
          timestamp: new Date(now.getTime() - 2 * 60_000),
        },
        {
          role: "assistant",
          authorName: "Assistant",
          authorAvatarUrl: "https://i.pravatar.cc/64?img=12",
          pending: true,
        },
        {
          role: "tool",
          authorName: "Tool",
          message: "command:scaffold succeeded — created app/Console/Commands/SyncJob.php",
        },
        {
          role: "assistant",
          authorName: "Assistant",
          authorAvatarUrl: "https://i.pravatar.cc/64?img=12",
          message: "Tried to deliver follow-up...",
          error: "Network error — retrying in 5s",
        },
      ]
      return { conversation }
    },
    template: `
      <div class="flex flex-col gap-3 p-4 max-w-2xl">
        <ChatMessage
          v-for="(m, i) in conversation"
          :key="i"
          v-bind="m"
        />
      </div>
    `,
  }),
}
