import {
  customElement,
  DeesElement,
  html,
  type TemplateResult,
  css,
  cssManager,
} from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
import { demoFunc } from './dees-workspace-markdownoutlet.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-workspace-markdownoutlet': DeesWorkspaceMarkdownoutlet;
  }
}

@customElement('dees-workspace-markdownoutlet')
export class DeesWorkspaceMarkdownoutlet extends DeesElement {
  // DEMO
  public static demo = demoFunc;
  public static demoGroup = 'Workspace';

  public static styles = [
    themeDefaultStyles,
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 1.6;
        color: ${cssManager.bdTheme('#24292f', '#e6edf3')};
      }

      .outlet {
        word-wrap: break-word;
      }

      /* Headings */
      h1, h2, h3, h4, h5, h6 {
        margin-top: 24px;
        margin-bottom: 16px;
        font-weight: 600;
        line-height: 1.25;
        color: ${cssManager.bdTheme('#1f2328', '#f0f6fc')};
      }

      h1 {
        font-size: 2em;
        padding-bottom: 0.3em;
        border-bottom: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
      }

      h2 {
        font-size: 1.5em;
        padding-bottom: 0.3em;
        border-bottom: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
      }

      h3 {
        font-size: 1.25em;
      }

      h4 {
        font-size: 1em;
      }

      h5 {
        font-size: 0.875em;
      }

      h6 {
        font-size: 0.85em;
        color: ${cssManager.bdTheme('#656d76', '#8b949e')};
      }

      /* Paragraphs and text */
      p {
        margin-top: 0;
        margin-bottom: 16px;
      }

      /* Links */
      a {
        color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }

      /* Strong and emphasis */
      strong {
        font-weight: 600;
        color: ${cssManager.bdTheme('#1f2328', '#f0f6fc')};
      }

      em {
        font-style: italic;
      }

      /* Lists */
      ul, ol {
        margin-top: 0;
        margin-bottom: 16px;
        padding-left: 2em;
      }

      li {
        margin-top: 4px;
      }

      li + li {
        margin-top: 4px;
      }

      ul ul, ul ol, ol ul, ol ol {
        margin-top: 0;
        margin-bottom: 0;
      }

      /* Blockquotes */
      blockquote {
        margin: 0 0 16px 0;
        padding: 0 1em;
        color: ${cssManager.bdTheme('#656d76', '#8b949e')};
        border-left: 4px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
      }

      blockquote > :first-child {
        margin-top: 0;
      }

      blockquote > :last-child {
        margin-bottom: 0;
      }

      /* Inline code */
      code {
        padding: 0.2em 0.4em;
        margin: 0;
        font-size: 85%;
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
        background-color: ${cssManager.bdTheme('rgba(175, 184, 193, 0.2)', 'rgba(110, 118, 129, 0.4)')};
        border-radius: 6px;
        white-space: break-spaces;
      }

      /* Code blocks */
      pre {
        margin-top: 0;
        margin-bottom: 16px;
        padding: 16px;
        overflow: auto;
        font-size: 85%;
        line-height: 1.45;
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
        border-radius: 6px;
        word-wrap: normal;
      }

      pre code {
        display: block;
        padding: 0;
        margin: 0;
        overflow: visible;
        line-height: inherit;
        word-wrap: normal;
        background-color: transparent;
        border: 0;
        font-size: 100%;
        white-space: pre;
      }

      /* Tables */
      table {
        width: max-content;
        max-width: 100%;
        margin-top: 0;
        margin-bottom: 16px;
        border-spacing: 0;
        border-collapse: collapse;
        overflow: auto;
        display: block;
      }

      table th {
        font-weight: 600;
        padding: 6px 13px;
        border: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
        color: ${cssManager.bdTheme('#1f2328', '#e6edf3')};
      }

      table td {
        padding: 6px 13px;
        border: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
        color: ${cssManager.bdTheme('#1f2328', '#e6edf3')};
      }

      table tr {
        background-color: ${cssManager.bdTheme('#ffffff', '#0d1117')};
        border-top: 1px solid ${cssManager.bdTheme('#d1d9e0', '#21262d')};
      }

      table tr:nth-child(2n) {
        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
      }

      /* Horizontal rules */
      hr {
        height: 4px;
        padding: 0;
        margin: 24px 0;
        background-color: ${cssManager.bdTheme('#d1d9e0', '#30363d')};
        border: 0;
        border-radius: 2px;
      }

      /* Images */
      img {
        max-width: 100%;
        box-sizing: border-box;
        border-radius: 6px;
      }

      /* Task lists */
      .task-list-item {
        list-style-type: none;
      }

      .task-list-item input {
        margin: 0 0.2em 0.25em -1.4em;
        vertical-align: middle;
      }

      /* Definition lists */
      dl {
        padding: 0;
      }

      dl dt {
        padding: 0;
        margin-top: 16px;
        font-size: 1em;
        font-style: italic;
        font-weight: 600;
      }

      dl dd {
        padding: 0 16px;
        margin-bottom: 16px;
      }

      /* Keyboard input */
      kbd {
        display: inline-block;
        padding: 3px 5px;
        font-size: 11px;
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
        line-height: 10px;
        color: ${cssManager.bdTheme('#1f2328', '#e6edf3')};
        vertical-align: middle;
        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
        border: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
        border-radius: 6px;
        box-shadow: inset 0 -1px 0 ${cssManager.bdTheme('#d1d9e0', '#30363d')};
      }

      /* Footnotes */
      .footnotes {
        font-size: 12px;
        color: ${cssManager.bdTheme('#656d76', '#8b949e')};
        border-top: 1px solid ${cssManager.bdTheme('#d1d9e0', '#30363d')};
        padding-top: 16px;
        margin-top: 32px;
      }

      /* Alerts/Admonitions */
      .markdown-alert {
        padding: 8px 16px;
        margin-bottom: 16px;
        border-left: 4px solid;
        border-radius: 6px;
      }

      .markdown-alert-note {
        border-color: ${cssManager.bdTheme('#0969da', '#58a6ff')};
        background-color: ${cssManager.bdTheme('rgba(9, 105, 218, 0.1)', 'rgba(56, 139, 253, 0.1)')};
      }

      .markdown-alert-warning {
        border-color: ${cssManager.bdTheme('#bf8700', '#d29922')};
        background-color: ${cssManager.bdTheme('rgba(191, 135, 0, 0.1)', 'rgba(187, 128, 9, 0.1)')};
      }

      .markdown-alert-important {
        border-color: ${cssManager.bdTheme('#8250df', '#a371f7')};
        background-color: ${cssManager.bdTheme('rgba(130, 80, 223, 0.1)', 'rgba(163, 113, 247, 0.1)')};
      }

      .markdown-alert-caution {
        border-color: ${cssManager.bdTheme('#cf222e', '#f85149')};
        background-color: ${cssManager.bdTheme('rgba(207, 34, 46, 0.1)', 'rgba(248, 81, 73, 0.1)')};
      }

      .markdown-alert-tip {
        border-color: ${cssManager.bdTheme('#1a7f37', '#3fb950')};
        background-color: ${cssManager.bdTheme('rgba(26, 127, 55, 0.1)', 'rgba(46, 160, 67, 0.1)')};
      }

      /* Syntax highlighting for code blocks */
      .hljs-comment,
      .hljs-quote {
        color: ${cssManager.bdTheme('#6a737d', '#8b949e')};
      }

      .hljs-keyword,
      .hljs-selector-tag,
      .hljs-addition {
        color: ${cssManager.bdTheme('#d73a49', '#ff7b72')};
      }

      .hljs-number,
      .hljs-string,
      .hljs-meta .hljs-meta-string,
      .hljs-literal,
      .hljs-doctag,
      .hljs-regexp {
        color: ${cssManager.bdTheme('#032f62', '#a5d6ff')};
      }

      .hljs-title,
      .hljs-section,
      .hljs-name,
      .hljs-selector-id,
      .hljs-selector-class {
        color: ${cssManager.bdTheme('#6f42c1', '#d2a8ff')};
      }

      .hljs-attribute,
      .hljs-attr,
      .hljs-variable,
      .hljs-template-variable,
      .hljs-class .hljs-title,
      .hljs-type {
        color: ${cssManager.bdTheme('#005cc5', '#79c0ff')};
      }

      .hljs-symbol,
      .hljs-bullet,
      .hljs-subst,
      .hljs-meta,
      .hljs-meta .hljs-keyword,
      .hljs-selector-attr,
      .hljs-selector-pseudo,
      .hljs-link {
        color: ${cssManager.bdTheme('#e36209', '#ffa657')};
      }

      .hljs-built_in,
      .hljs-deletion {
        color: ${cssManager.bdTheme('#b31d28', '#ffa198')};
      }

      .hljs-formula {
        background-color: ${cssManager.bdTheme('#f6f8fa', '#161b22')};
      }

      .hljs-emphasis {
        font-style: italic;
      }

      .hljs-strong {
        font-weight: bold;
      }
    `,
  ];

  // INSTANCE
  private outlet: HTMLElement;

  public render(): TemplateResult {
    return html`
      <div class="outlet">
        <h1>Markdown Preview</h1>
        <p>Content will appear here when markdown is parsed.</p>
      </div>
    `;
  }

  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    await super.firstUpdated(_changedProperties);
    this.outlet = this.shadowRoot.querySelector('.outlet');
  }

  public async updateHtmlText(htmlTextArg: string) {
    await this.updateComplete;
    if (!this.outlet) {
      this.outlet = this.shadowRoot.querySelector('.outlet');
    }
    this.outlet.innerHTML = htmlTextArg;
  }
}
