import { LitElement, html, css } from './plugins.js';
import type { CSSResult, TemplateResult } from './plugins.js';

export class SmartchatMessage extends LitElement {
  declare role: 'user' | 'assistant' | 'tool';
  declare content: string;
  declare toolName: string;

  static properties = {
    role: { type: String },
    content: { type: String },
    toolName: { type: String },
  };

  static styles: CSSResult = css`
    :host {
      display: block;
      margin-bottom: 8px;
    }

    .message {
      padding: 8px 12px;
      border-radius: 8px;
      max-width: 85%;
      word-wrap: break-word;
      white-space: pre-wrap;
    }

    .user {
      background: var(--smartchat-user-bubble, #2563eb);
      color: var(--smartchat-user-text, #fff);
      margin-left: auto;
      border-bottom-right-radius: 2px;
    }

    .assistant {
      background: var(--smartchat-assistant-bubble, #374151);
      color: var(--smartchat-assistant-text, #e5e7eb);
      margin-right: auto;
      border-bottom-left-radius: 2px;
    }

    .tool {
      background: var(--smartchat-tool-bubble, #1e293b);
      color: var(--smartchat-tool-text, #94a3b8);
      margin-right: auto;
      font-size: 0.85em;
      font-family: monospace;
      border-left: 3px solid var(--smartchat-tool-accent, #6366f1);
    }

    .tool-name {
      font-weight: bold;
      margin-bottom: 4px;
      color: var(--smartchat-tool-accent, #6366f1);
    }
  `;

  constructor() {
    super();
    this.role = 'user';
    this.content = '';
    this.toolName = '';
  }

  render(): TemplateResult {
    return html`
      <div class="message ${this.role}">
        ${this.role === 'tool' && this.toolName
          ? html`<div class="tool-name">${this.toolName}</div>`
          : ''}
        <div>${this.content}</div>
      </div>
    `;
  }
}

customElements.define('smartchat-message', SmartchatMessage);