import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { BlockEditor } from "./block-editor";
import { CodeEditor } from "./code-editor";
import { EmailBuilder } from "./email-builder";
import { MarkdownEditor } from "./markdown-editor";
import { MDXEditor } from "./mdx-editor";
import { WYSIWYGEditor } from "./wysiwyg-editor";

const meta: Meta = {
	title: "Widgets/Editors",
	parameters: {
		layout: "padded",
	},
};

export default meta;

// Markdown Editor Stories
export const MarkdownEditorDefault: StoryObj<typeof MarkdownEditor> = {
	render: () => (
		<MarkdownEditor
			initialValue={`# Hello World

This is a **markdown** editor with *live preview*.

## Features

- Split pane editing
- GitHub Flavored Markdown
- Syntax highlighting
- Toolbar actions

\`\`\`javascript
const hello = 'world'
console.log(hello)
\`\`\`

> This is a quote

[Link to somewhere](https://example.com.ai)`}
			onChange={fn()}
			defaultMode="split"
			height={500}
		/>
	),
};

export const MarkdownEditorEditMode: StoryObj<typeof MarkdownEditor> = {
	render: () => (
		<MarkdownEditor
			initialValue="# Start writing markdown..."
			defaultMode="edit"
			height={400}
		/>
	),
};

// Code Editor Stories
export const CodeEditorTypeScript: StoryObj<typeof CodeEditor> = {
	render: () => (
		<CodeEditor
			language="typescript"
			initialValue={`interface User {
  id: string
  name: string
  email: string
}

function greetUser(user: User): string {
  return \`Hello, \${user.name}!\`
}

const user: User = {
  id: '1',
  name: 'Alice',
  email: 'alice@example.com.ai'
}

console.log(greetUser(user))`}
			showLineNumbers={true}
			height={400}
		/>
	),
};

export const CodeEditorWithLanguageSelector: StoryObj<typeof CodeEditor> = {
	render: () => (
		<CodeEditor
			language="javascript"
			initialValue="const hello = 'world'\nconsole.log(hello)"
			showLanguageSelector={true}
			availableLanguages={["typescript", "javascript", "python", "rust", "go"]}
			height={300}
		/>
	),
};

// WYSIWYG Editor Stories
export const WYSIWYGEditorDefault: StoryObj<typeof WYSIWYGEditor> = {
	render: () => (
		<WYSIWYGEditor
			initialValue="<h2>Welcome to the Editor</h2><p>Start writing your content here...</p>"
			onChange={fn()}
			height={400}
			enableTables={true}
			enableTaskLists={true}
		/>
	),
};

export const WYSIWYGEditorReadOnly: StoryObj<typeof WYSIWYGEditor> = {
	render: () => (
		<WYSIWYGEditor
			initialValue="<h1>Read-Only Content</h1><p>This editor is in read-only mode.</p>"
			readOnly={true}
			height={300}
		/>
	),
};

// Block Editor Stories
export const BlockEditorDefault: StoryObj<typeof BlockEditor> = {
	render: () => (
		<BlockEditor
			onChange={fn()}
			placeholder="Type '/' for commands..."
			height={500}
		/>
	),
};

export const BlockEditorLimited: StoryObj<typeof BlockEditor> = {
	render: () => (
		<BlockEditor
			onChange={fn()}
			availableBlocks={[
				"paragraph",
				"heading1",
				"heading2",
				"bulletList",
				"quote",
			]}
			height={400}
		/>
	),
};

// MDX Editor Stories
export const MDXEditorDefault: StoryObj<typeof MDXEditor> = {
	render: () => (
		<MDXEditor
			initialValue={`# MDX Editor

This is an **MDX** editor with JSX support.

import { Button } from '@mdxui/primitives/button'

<Button variant="default">Click me!</Button>

\`\`\`tsx
function MyComponent() {
  return <div>Hello!</div>
}
\`\`\`
`}
			onChange={fn()}
			defaultMode="split"
			height={500}
		/>
	),
};

// Email Builder Stories
export const EmailBuilderDefault: StoryObj<typeof EmailBuilder> = {
	render: () => (
		<EmailBuilder
			initialSubject="Welcome to our platform!"
			initialValue="<h2>Welcome!</h2><p>Thank you for joining us.</p>"
			onChange={fn()}
		/>
	),
};

export const EmailBuilderWithTemplates: StoryObj<typeof EmailBuilder> = {
	render: () => (
		<EmailBuilder
			templates={[
				{
					id: "welcome",
					name: "Welcome Email",
					subject: "Welcome to {{company_name}}!",
					html: "<h2>Welcome {{first_name}}!</h2><p>We are excited to have you on board.</p>",
				},
				{
					id: "reset",
					name: "Password Reset",
					subject: "Reset your password",
					html: '<h2>Password Reset Request</h2><p>Click the link below to reset your password.</p><a href="{{reset_link}}" class="button">Reset Password</a>',
				},
				{
					id: "invoice",
					name: "Invoice",
					subject: "Your invoice from {{company_name}}",
					html: "<h2>Invoice #{{invoice_number}}</h2><p>Amount due: ${{amount}}</p>",
				},
			]}
			onChange={fn()}
			previewWidth="mobile"
		/>
	),
};

// Comparison Story
export const AllEditorsComparison: StoryObj = {
	render: () => (
		<div className="grid gap-8">
			<div>
				<h3 className="mb-4 text-lg font-semibold">Markdown Editor</h3>
				<MarkdownEditor
					initialValue="# Markdown\n\nSimple markdown editing with preview."
					height={300}
				/>
			</div>

			<div>
				<h3 className="mb-4 text-lg font-semibold">Code Editor</h3>
				<CodeEditor
					language="typescript"
					initialValue="const hello = 'world'"
					height={200}
				/>
			</div>

			<div>
				<h3 className="mb-4 text-lg font-semibold">WYSIWYG Editor</h3>
				<WYSIWYGEditor
					initialValue="<p>Rich text editing with toolbar.</p>"
					height={250}
				/>
			</div>

			<div>
				<h3 className="mb-4 text-lg font-semibold">Block Editor</h3>
				<BlockEditor height={250} />
			</div>
		</div>
	),
};