import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { action } from 'storybook/actions';
import { computed, ref } from 'vue';

import N8nMarkdownEditor from './MarkdownEditor.vue';

const defaultMarkdown = `# Agent instructions

Write clear, concise responses.

- Use the available tools when needed
- Ask for clarification when requirements are ambiguous
- Keep answers grounded in the current workflow

> Prefer practical implementation details over abstract advice.

Use **bold** for important labels and *italics* for nuance.`;

const gfmMarkdown = `# GFM coverage

## Task list

- [x] Parse markdown strings
- [x] Render rich text blocks
- [ ] Add production toolbar controls

## Table

| Feature | Status |
| --- | --- |
| Headings | Supported |
| Tables | Supported |
| Task lists | Supported |

## Formatting

This includes ~~strikethrough~~, [links](https://n8n.io), inline \`code\`, and fenced code blocks.

\`\`\`ts
const value = editor.getMarkdown();
\`\`\``;

const longInstructionsMarkdown = `# Customer support agent

You are a customer support assistant for an automation platform.

## Response style

- Be direct and specific.
- Explain assumptions before giving steps.
- Use numbered steps for procedures.
- Do not invent product capabilities.

## Escalation rules

Escalate to a human when:

1. The user reports data loss.
2. The user asks for billing changes.
3. The user shares credentials or secrets.
4. The answer depends on private account data.

## Tooling

When a workflow error is provided, identify the failing node, summarize the likely cause, and suggest the smallest next diagnostic step.`;

const meta: Meta<typeof N8nMarkdownEditor> = {
	title: 'Core/MarkdownEditor',
	component: N8nMarkdownEditor,
	argTypes: {
		variant: {
			control: 'select',
			options: ['ghost', 'contained'],
		},
		showToolbar: {
			control: 'select',
			options: ['never', 'hover', 'always', 'floating'],
		},
		maxHeight: {
			control: 'text',
		},
		disabled: {
			control: 'boolean',
		},
		readonly: {
			control: 'boolean',
		},
		placeholder: {
			control: 'text',
		},
		modelValue: {
			control: 'text',
		},
	},
	parameters: {
		docs: {
			description: {
				component:
					'A rich-text Markdown editor backed by TipTap, with Markdown string input/output and design-system managed styling.',
			},
		},
	},
	render: (args) => ({
		components: { N8nMarkdownEditor },
		setup() {
			const value = ref(args.modelValue);
			const editorArgs = computed(() => {
				const { modelValue: _modelValue, ...rest } = args;
				return rest;
			});

			return {
				value,
				editorArgs,
				onUpdateModelValue: action('update:modelValue'),
				onInput: action('input'),
				onFocus: action('focus'),
				onBlur: action('blur'),
				onReady: action('ready'),
			};
		},
		template: `
			<div style="max-width: 760px; display: flex; flex-direction: column; gap: 16px;">
				<n8n-markdown-editor
					v-bind="editorArgs"
					v-model="value"
					@update:modelValue="onUpdateModelValue"
					@input="onInput"
					@focus="onFocus"
					@blur="onBlur"
					@ready="onReady"
				/>
			</div>
		`,
	}),
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
	args: {
		modelValue: defaultMarkdown,
		variant: 'contained',
		placeholder: 'Write Markdown...',
		showToolbar: 'always',
		maxHeight: '480px',
		disabled: false,
		readonly: false,
	},
};

export const Variants: Story = {
	render: () => ({
		components: { N8nMarkdownEditor },
		setup() {
			const contained = ref(defaultMarkdown);
			const ghost = ref(defaultMarkdown);
			return { contained, ghost };
		},
		template: `
			<div style="display: flex; flex-direction: column; gap: 24px; max-width: 760px;">
				<n8n-markdown-editor v-model="contained" variant="contained" placeholder="Write Markdown..." show-toolbar="always" max-height="280px" />
				<n8n-markdown-editor v-model="ghost" variant="ghost" placeholder="Write Markdown..." show-toolbar="always" max-height="280px" />
			</div>
		`,
	}),
};

export const Contained: Story = {
	args: {
		...Default.args,
		variant: 'contained',
	},
};

export const Ghost: Story = {
	args: {
		...Default.args,
		variant: 'ghost',
	},
};

export const WithoutToolbar: Story = {
	args: {
		...Default.args,
		showToolbar: 'never',
	},
};

export const AlwaysVisibleToolbar: Story = {
	args: {
		...Default.args,
		showToolbar: 'always',
	},
};

export const FloatingToolbar: Story = {
	args: {
		...Default.args,
		showToolbar: 'floating',
	},
	parameters: {
		docs: {
			description: {
				story: 'Select text in the editor to show the floating toolbar.',
			},
		},
	},
};

export const GfmContent: Story = {
	args: {
		...Default.args,
		modelValue: gfmMarkdown,
		variant: 'contained',
	},
};

export const Disabled: Story = {
	args: {
		...Default.args,
		disabled: true,
		variant: 'contained',
	},
};

export const Readonly: Story = {
	args: {
		...Default.args,
		readonly: true,
		variant: 'contained',
	},
};

export const LongInstructions: Story = {
	args: {
		...Default.args,
		modelValue: longInstructionsMarkdown,
		variant: 'contained',
	},
};

export const Empty: Story = {
	args: {
		...Default.args,
		modelValue: '',
		showToolbar: 'never',
		variant: 'contained',
		placeholder: 'Write instructions...',
	},
};