import type { Meta, StoryObj } from "@storybook/react-vite";
import { ChatBox } from "./chatbox";

const meta: Meta<typeof ChatBox> = {
	title: "Widgets/ChatBox",
	component: ChatBox,
	parameters: {
		layout: "fullscreen",
		docs: {
			description: {
				component: `
AI-powered chat widget for customer support and assistance.

Features:
- **Floating Bubble** - Minimized state shows as floating button
- **Position** - Bottom-right or bottom-left placement
- **Email Capture** - Optional email collection during chat
- **Session Persistence** - Messages saved across page loads

\`\`\`tsx
import { ChatBox } from '@mdxui/widgets'

<ChatBox
  title="Support"
  welcomeMessage="How can I help you today?"
  position="bottom-right"
  enableEmailCapture
  apiEndpoint="/api/chat"
/>
\`\`\`
        `,
			},
		},
	},
	tags: ["autodocs"],
	argTypes: {
		title: { control: "text" },
		welcomeMessage: { control: "text" },
		placeholder: { control: "text" },
		position: {
			control: "select",
			options: ["bottom-right", "bottom-left"],
		},
		showOnMount: { control: "boolean" },
		enableEmailCapture: { control: "boolean" },
		emailPromptDelay: { control: "number" },
		persistSession: { control: "boolean" },
		avatar: { control: "text" },
		apiEndpoint: { control: "text" },
	},
	decorators: [
		(Story) => (
			<div className="min-h-screen bg-background flex items-center justify-center">
				<div className="flex flex-col items-center gap-4 text-center px-4">
					<h1 className="text-2xl font-semibold">ChatBox Story</h1>
					<p className="text-muted-foreground text-sm max-w-md">
						Click the chat bubble in the corner to open the chat panel.
					</p>
				</div>
				<Story />
			</div>
		),
	],
};

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

/**
 * Default configuration with support chat.
 * Click the chat bubble in the bottom-right corner to open.
 */
export const Default: Story = {
	args: {
		title: "Support",
		welcomeMessage:
			"How can I help you today? I'm here to answer questions about our product.",
		enableEmailCapture: true,
	},
};

/**
 * Chat bubble positioned in the bottom-left corner.
 */
export const BottomLeft: Story = {
	args: {
		title: "Support",
		welcomeMessage: "How can I help you today?",
		position: "bottom-left",
		enableEmailCapture: false,
	},
};

/**
 * Custom branding with different title and welcome message.
 */
export const CustomBranding: Story = {
	args: {
		title: "Acme Support",
		welcomeMessage: "Welcome to Acme! How can we assist you today?",
		placeholder: "Ask us anything...",
		enableEmailCapture: true,
	},
};

/**
 * Chat opens automatically when the page loads.
 */
export const AutoOpen: Story = {
	args: {
		title: "Support",
		welcomeMessage:
			"Hi there! I noticed you might need help. What can I do for you?",
		showOnMount: true,
		enableEmailCapture: false,
	},
};

/**
 * Email capture disabled - no email prompt will appear.
 */
export const NoEmailCapture: Story = {
	args: {
		title: "Quick Help",
		welcomeMessage: "Ask me anything!",
		enableEmailCapture: false,
	},
};

/**
 * Email capture with delayed prompt (after 3 AI responses).
 */
export const DelayedEmailCapture: Story = {
	args: {
		title: "Support",
		welcomeMessage: "How can I help you today?",
		enableEmailCapture: true,
		emailPromptDelay: 3,
	},
};

/**
 * Session persistence disabled - messages won't be saved.
 */
export const NoPersistence: Story = {
	args: {
		title: "Support",
		welcomeMessage: "How can I help you today?",
		persistSession: false,
		enableEmailCapture: false,
	},
};

/**
 * Minimal configuration with just the defaults.
 */
export const Minimal: Story = {
	args: {},
};