import { html, TemplateResult } from 'lit'
import reactive from '../../../src/decorators/reactive.js'
import { DemoPage } from '../../../src/demo/DemoPage.js'
import type {
  MentionTextAreaElement,
  MentionSuggestion,
  MentionInsertEvent,
  MentionRemoveEvent,
} from '../../../src/elements/mention-textarea/ui-mention-textarea.js'
import '../../../src/elements/mention-textarea/ui-mention-textarea.js'

class ComponentDemoPage extends DemoPage {
  override accessor componentName = 'Mention Textarea'

  @reactive() accessor value = 'Hello @{john-doe}, please review the document with @{jane-smith}.'

  @reactive() accessor suggestions: MentionSuggestion[] = [
    {
      id: 'john-doe',
      label: 'John Doe',
      description: 'Senior Developer',
      suffix: 'Engineering',
    },
    {
      id: 'jane-smith',
      label: 'Jane Smith',
      description: 'Product Manager',
      suffix: 'Product',
    },
    {
      id: 'bob-wilson',
      label: 'Bob Wilson',
      description: 'UI/UX Designer',
      suffix: 'Design',
    },
    {
      id: 'alice-johnson',
      label: 'Alice Johnson',
      description: 'Quality Assurance Engineer',
      suffix: 'QA',
    },
    {
      id: 'mike-brown',
      label: 'Mike Brown',
      description: 'DevOps Engineer',
      suffix: 'Infrastructure',
    },
    {
      id: 'sarah-davis',
      label: 'Sarah Davis',
      description: 'Technical Writer',
      suffix: 'Documentation',
    },
  ]

  handleMentionInsert(event: CustomEvent<MentionInsertEvent>): void {
    console.log('Mention inserted:', event.detail)
  }

  handleMentionRemove(event: CustomEvent<MentionRemoveEvent>): void {
    console.log('Mention removed:', event.detail)
  }

  handleInput(event: Event): void {
    const target = event.target as MentionTextAreaElement
    this.value = target.value
    console.log('Value changed:', this.value)
  }

  contentTemplate(): TemplateResult {
    return html`
      <a href="../">Back</a>

      <section class="demo-section">
        <h2 class="display-large">Basic Usage</h2>
        <p>
          Type @ to trigger mentions. The component supports rich suggestions with headline, description, and suffix.
        </p>

        <mention-textarea
          label="Message"
          supporting-text="Type @ to mention someone"
          .value="${this.value}"
          .suggestions="${this.suggestions}"
          @mention-insert="${this.handleMentionInsert}"
          @mention-remove="${this.handleMentionRemove}"
          @input="${this.handleInput}"
        ></mention-textarea>

        <h3 class="title-large">Current Value:</h3>
        <pre
          style="background: var(--md-sys-color-surface-variant); padding: 16px; border-radius: 8px; overflow-x: auto;"
        >
${this.value}
        </pre
        >
      </section>

      <section class="demo-section">
        <h2 class="display-large">Different States</h2>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
          <mention-textarea label="Default" .suggestions="${this.suggestions}"></mention-textarea>

          <mention-textarea
            label="With placeholder"
            placeholder="Start typing..."
            .suggestions="${this.suggestions}"
          ></mention-textarea>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
          <mention-textarea label="Required" required .suggestions="${this.suggestions}"></mention-textarea>

          <mention-textarea
            label="Invalid"
            invalid
            supporting-text="This field has an error"
            .suggestions="${this.suggestions}"
          ></mention-textarea>
        </div>

        <mention-textarea
          label="Disabled"
          disabled
          value="This is disabled"
          .suggestions="${this.suggestions}"
        ></mention-textarea>
      </section>

      <section class="demo-section">
        <h2 class="display-large">Custom Trigger</h2>
        <p>This example uses '#' as the mention trigger instead of '@'.</p>

        <mention-textarea
          label="Tags"
          supporting-text="Type # to add tags"
          mention-trigger="#"
          .suggestions="${this.suggestions.map((s) => ({ ...s, label: s.label.toLowerCase().replace(' ', '-') }))}"
        ></mention-textarea>
      </section>

      <section class="demo-section">
        <h2 class="display-large">Minimum Query Length</h2>
        <p>This example requires at least 2 characters after @ before showing suggestions.</p>

        <mention-textarea
          label="Message with min query"
          supporting-text="Type @+ at least 2 characters"
          min-query-length="2"
          .suggestions="${this.suggestions}"
        ></mention-textarea>
      </section>

      <section class="demo-section">
        <h2 class="display-large">Overflow: Hidden Test</h2>
        <p>
          This test ensures the popover works correctly even inside containers with overflow: hidden. The Popover API
          should handle this properly.
        </p>

        <div
          style="height: 150px; overflow: hidden; border: 2px solid var(--md-sys-color-outline); border-radius: 8px; padding: 16px;"
        >
          <p>Container with overflow: hidden (height: 150px)</p>
          <mention-textarea
            label="Test @mentions here"
            supporting-text="Type @ - the suggestions should appear outside this container"
            .suggestions="${this.suggestions}"
          ></mention-textarea>
        </div>

        <div
          style="height: 100px; width: 300px; overflow: hidden; border: 2px solid var(--md-sys-color-outline); border-radius: 8px; padding: 16px; margin-top: 20px;"
        >
          <p>Small container with overflow: hidden</p>
          <mention-textarea label="Constrained" .suggestions="${this.suggestions}"></mention-textarea>
        </div>
      </section>

      <style>
        .demo-section {
          max-width: 900px;
          margin: 40px auto;
          padding: 0 20px;
        }

        mention-textarea {
          width: 100%;
          margin-bottom: 20px;
        }

        pre {
          font-family: 'Courier New', monospace;
          font-size: 14px;
          white-space: pre-wrap;
          word-break: break-all;
        }
      </style>
    `
  }
}

const instance = new ComponentDemoPage()
instance.render()
