import { html, css } from '@design.estate/dees-element';
import '@design.estate/dees-wcctools/demotools';
import '../../dees-panel/dees-panel.js';
import type { DeesWorkspaceMarkdownoutlet } from './dees-workspace-markdownoutlet.js';

export const demoFunc = () => html`
  <dees-demowrapper>
    <style>
      ${css`
        .demo-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          padding: 24px;
          max-width: 900px;
          margin: 0 auto;
        }
      `}
    </style>

    <div class="demo-container">
      <!-- Demo 1: Headings -->
      <dees-panel
        .title=${'Headings'}
        .subtitle=${'All heading levels from H1 to H6'}
        .runAfterRender=${async (panelEl: HTMLElement) => {
          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
          await outlet?.updateHtmlText(`
            <h1>Heading Level 1</h1>
            <h2>Heading Level 2</h2>
            <h3>Heading Level 3</h3>
            <h4>Heading Level 4</h4>
            <h5>Heading Level 5</h5>
            <h6>Heading Level 6</h6>
          `);
        }}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 2: Text Formatting -->
      <dees-panel
        .title=${'Text Formatting'}
        .subtitle=${'Bold, italic, links, code, and keyboard input'}
        .runAfterRender=${async (panelEl: HTMLElement) => {
          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
          await outlet?.updateHtmlText(`
            <p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
            <p>You can also use <strong><em>bold italic</em></strong> for emphasis.</p>
            <p>Here's a <a href="#">link example</a> and some <code>inline code</code>.</p>
            <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
            <hr>
            <p>Above is a horizontal rule separator.</p>
          `);
        }}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 3: Lists -->
      <dees-panel
        .title=${'Lists'}
        .subtitle=${'Ordered, unordered, and task lists'}
        .runAfterRender=${async (panelEl: HTMLElement) => {
          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
          await outlet?.updateHtmlText(`
            <h3>Unordered List</h3>
            <ul>
              <li>First item</li>
              <li>Second item
                <ul>
                  <li>Nested item 1</li>
                  <li>Nested item 2</li>
                </ul>
              </li>
              <li>Third item</li>
            </ul>

            <h3>Ordered List</h3>
            <ol>
              <li>Step one</li>
              <li>Step two</li>
              <li>Step three</li>
            </ol>

            <h3>Task List</h3>
            <ul>
              <li class="task-list-item"><input type="checkbox" checked disabled> Completed task</li>
              <li class="task-list-item"><input type="checkbox" disabled> Pending task</li>
              <li class="task-list-item"><input type="checkbox" disabled> Another task</li>
            </ul>
          `);
        }}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 4: Code Blocks -->
      <dees-panel
        .title=${'Code Blocks'}
        .subtitle=${'Syntax highlighted code examples'}
        .runAfterRender=${async (panelEl: HTMLElement) => {
          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
          await outlet?.updateHtmlText(`
            <p>Inline code: <code>const greeting = "Hello, World!";</code></p>

            <h3>TypeScript Example</h3>
            <pre><code><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'@design.estate/dees-element'</span>;

<span class="hljs-keyword">interface</span> <span class="hljs-title">IUser</span> {
  <span class="hljs-attr">name</span>: <span class="hljs-built_in">string</span>;
  <span class="hljs-attr">email</span>: <span class="hljs-built_in">string</span>;
  <span class="hljs-attr">age</span>?: <span class="hljs-built_in">number</span>;
}

<span class="hljs-keyword">const</span> <span class="hljs-title">getUser</span> = <span class="hljs-keyword">async</span> (<span class="hljs-attr">id</span>: <span class="hljs-built_in">string</span>): <span class="hljs-built_in">Promise</span>&lt;IUser&gt; =&gt; {
  <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> fetch(\`/api/users/\${id}\`);
  <span class="hljs-keyword">return</span> response.json();
};</code></pre>

            <h3>JSON Example</h3>
            <pre><code>{
  <span class="hljs-attr">"name"</span>: <span class="hljs-string">"dees-catalog"</span>,
  <span class="hljs-attr">"version"</span>: <span class="hljs-string">"3.0.0"</span>,
  <span class="hljs-attr">"dependencies"</span>: {
    <span class="hljs-attr">"@design.estate/dees-element"</span>: <span class="hljs-string">"^2.0.0"</span>
  }
}</code></pre>
          `);
        }}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 5: Tables -->
      <dees-panel
        .title=${'Tables'}
        .subtitle=${'Styled tables with alternating rows'}
        .runAfterRender=${async (panelEl: HTMLElement) => {
          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
          await outlet?.updateHtmlText(`
            <table>
              <thead>
                <tr>
                  <th>Feature</th>
                  <th>Status</th>
                  <th>Priority</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Dark mode support</td>
                  <td>Completed</td>
                  <td>High</td>
                </tr>
                <tr>
                  <td>Responsive design</td>
                  <td>In Progress</td>
                  <td>Medium</td>
                </tr>
                <tr>
                  <td>Accessibility</td>
                  <td>Planned</td>
                  <td>High</td>
                </tr>
                <tr>
                  <td>Documentation</td>
                  <td>In Progress</td>
                  <td>Low</td>
                </tr>
              </tbody>
            </table>
          `);
        }}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 6: Blockquotes & Alerts -->
      <dees-panel
        .title=${'Blockquotes & Alerts'}
        .subtitle=${'Quotes and GitHub-style alerts'}
        .runAfterRender=${async (panelEl: HTMLElement) => {
          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
          await outlet?.updateHtmlText(`
            <blockquote>
              <p>This is a standard blockquote. It's great for highlighting important information or quotes from other sources.</p>
            </blockquote>

            <div class="markdown-alert markdown-alert-note">
              <p><strong>Note:</strong> This is an informational note to draw attention to important details.</p>
            </div>

            <div class="markdown-alert markdown-alert-tip">
              <p><strong>Tip:</strong> Here's a helpful tip to improve your workflow.</p>
            </div>

            <div class="markdown-alert markdown-alert-important">
              <p><strong>Important:</strong> This information is crucial for understanding the topic.</p>
            </div>

            <div class="markdown-alert markdown-alert-warning">
              <p><strong>Warning:</strong> Be careful when performing this action.</p>
            </div>

            <div class="markdown-alert markdown-alert-caution">
              <p><strong>Caution:</strong> This action may have unintended consequences.</p>
            </div>
          `);
        }}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>

      <!-- Demo 7: Full Document -->
      <dees-panel
        .title=${'Full Document'}
        .subtitle=${'A complete markdown document example'}
        .runAfterRender=${async (panelEl: HTMLElement) => {
          const outlet = panelEl.querySelector('dees-workspace-markdownoutlet') as DeesWorkspaceMarkdownoutlet;
          await outlet?.updateHtmlText(`
            <h1>Getting Started Guide</h1>
            <p>Welcome to the <strong>dees-catalog</strong> component library. This guide will help you get up and running quickly.</p>

            <h2>Installation</h2>
            <p>Install the package using your preferred package manager:</p>
            <pre><code><span class="hljs-comment"># Using pnpm (recommended)</span>
pnpm add @design.estate/dees-catalog

<span class="hljs-comment"># Using npm</span>
npm install @design.estate/dees-catalog</code></pre>

            <h2>Basic Usage</h2>
            <p>Import and use components in your TypeScript files:</p>
            <pre><code><span class="hljs-keyword">import</span> { DeesButton } <span class="hljs-keyword">from</span> <span class="hljs-string">'@design.estate/dees-catalog'</span>;

<span class="hljs-comment">// Use in your templates</span>
html\`&lt;dees-button&gt;Click me&lt;/dees-button&gt;\`</code></pre>

            <div class="markdown-alert markdown-alert-tip">
              <p><strong>Tip:</strong> Check the demo showcase for live examples of all components.</p>
            </div>

            <h2>Available Components</h2>
            <table>
              <thead>
                <tr>
                  <th>Component</th>
                  <th>Description</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><code>dees-button</code></td>
                  <td>Primary button component</td>
                </tr>
                <tr>
                  <td><code>dees-input-text</code></td>
                  <td>Text input field</td>
                </tr>
                <tr>
                  <td><code>dees-table</code></td>
                  <td>Data table with sorting</td>
                </tr>
                <tr>
                  <td><code>dees-modal</code></td>
                  <td>Modal dialog</td>
                </tr>
              </tbody>
            </table>

            <h2>Next Steps</h2>
            <ul>
              <li>Explore the <a href="#">component documentation</a></li>
              <li>Check out the <a href="#">theming guide</a></li>
              <li>Join our <a href="#">community Discord</a></li>
            </ul>

            <blockquote>
              <p>"The best component library is one that gets out of your way." — Design Systems Team</p>
            </blockquote>
          `);
        }}
      >
        <dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;
