import { defineStory } from '@djangocfg/playground';
import { MarkdownEditor } from './MarkdownEditor';
import { useState } from 'react';
import type { MentionConfig } from './types';

export default defineStory({
  title: 'Tools/Markdown Editor',
  component: MarkdownEditor,
  description: 'WYSIWYG markdown editor with Tiptap. Supports headings, lists, mentions, and more.',
});

const SAMPLE_MARKDOWN = `# Character Bio

**Type:** Maltipoo (apricot coat)
**Age:** 3 years

## Visual Design

Medium-small Maltipoo, compact and agile.

- Sharp, intelligent eyes (dark brown)
- Simple collar (hides micro-gear)
- Expressions shift quickly

## Personality

> Pixar Note: Her face must carry duality.

1. Emotionally guarded
2. Independent and decisive
3. Dry sense of humor
`;

const MENTION_ITEMS: MentionConfig = {
  items: [
    { id: '1', label: 'Alice', description: 'Protagonist', thumbnail: 'https://i.pravatar.cc/48?u=alice' },
    { id: '2', label: 'Bob', description: 'Antagonist', thumbnail: 'https://i.pravatar.cc/48?u=bob' },
    { id: '3', label: 'Charlie', description: 'Side character', thumbnail: 'https://i.pravatar.cc/48?u=charlie' },
    { id: '4', label: 'Diana', description: 'Narrator' },
    { id: '5', label: 'Eve', description: 'Mystery character' },
  ],
};

export function Default() {
  const [value, setValue] = useState(SAMPLE_MARKDOWN);
  return (
    <div style={{ maxWidth: 700 }}>
      <MarkdownEditor value={value} onChange={setValue} />
      <RawPreview value={value} />
    </div>
  );
}

export function WithMentions() {
  const [value, setValue] = useState('Hello @Alice! This scene features @Bob too.\n\nType @ to mention characters.');
  const [ids, setIds] = useState<string[]>([]);

  return (
    <div style={{ maxWidth: 700 }}>
      <MarkdownEditor
        value={value}
        onChange={setValue}
        mentions={MENTION_ITEMS}
        onMentionIdsChange={setIds}
        placeholder="Describe the scene... Use @ to mention characters"
      />
      {ids.length > 0 && (
        <div style={{ marginTop: 8, fontSize: 12, opacity: 0.6 }}>
          Mentioned IDs: {ids.join(', ')}
        </div>
      )}
      <RawPreview value={value} />
    </div>
  );
}

export function Empty() {
  const [value, setValue] = useState('');
  return (
    <div style={{ maxWidth: 600 }}>
      <MarkdownEditor value={value} onChange={setValue} placeholder="Start writing..." />
    </div>
  );
}

export function Disabled() {
  return (
    <div style={{ maxWidth: 600 }}>
      <MarkdownEditor value="This editor is **read-only**." onChange={() => {}} disabled />
    </div>
  );
}

export function NoToolbar() {
  const [value, setValue] = useState('Plain text without toolbar.\n\nStill supports **markdown** shortcuts.');
  return (
    <div style={{ maxWidth: 600 }}>
      <MarkdownEditor value={value} onChange={setValue} showToolbar={false} />
    </div>
  );
}

export function Compact() {
  const [value, setValue] = useState('Short note');
  return (
    <div style={{ maxWidth: 400 }}>
      <MarkdownEditor value={value} onChange={setValue} minHeight={60} placeholder="Quick note..." />
    </div>
  );
}

function RawPreview({ value }: { value: string }) {
  return (
    <details style={{ marginTop: 16 }}>
      <summary style={{ cursor: 'pointer', opacity: 0.5, fontSize: 12 }}>Raw markdown</summary>
      <pre style={{ fontSize: 11, opacity: 0.6, whiteSpace: 'pre-wrap', marginTop: 8 }}>{value}</pre>
    </details>
  );
}
