import { html, LitElement } from "lit";
import { customElement, state } from "lit/decorators.js";

export type Mood = "neutral" | "focused" | "excited" | "warning" | "frustrated" | "angry";

const MOOD_CONFIG: Record<Mood, { emoji: string; label: string; color: string; glow: string }> = {
  neutral:    { emoji: "\ud83d\udc09", label: "Calm",       color: "rgba(148,163,184,0.8)", glow: "none" },
  focused:    { emoji: "\ud83e\udde0", label: "Focused",    color: "rgba(96,165,250,0.9)",  glow: "0 0 12px rgba(96,165,250,0.3)" },
  excited:    { emoji: "\u2728",       label: "Excited",    color: "rgba(250,204,21,0.9)",  glow: "0 0 12px rgba(250,204,21,0.3)" },
  warning:    { emoji: "\u26a0\ufe0f", label: "Cautious",   color: "rgba(251,146,60,0.9)",  glow: "0 0 12px rgba(251,146,60,0.3)" },
  frustrated: { emoji: "\ud83d\ude24", label: "Frustrated", color: "rgba(248,113,113,0.9)", glow: "0 0 15px rgba(248,113,113,0.4)" },
  angry:      { emoji: "\ud83d\udd25", label: "Furious",    color: "rgba(220,38,38,1)",     glow: "0 0 25px rgba(220,38,38,0.6)" },
};

@customElement("jae-mood-indicator")
export class JaeMoodIndicator extends LitElement {
  @state() private mood: Mood = "neutral";
  @state() private shaking = false;
  @state() private cracked = false;
  @state() private crackOpacity = 1.0;

  private fadeTimer: ReturnType<typeof setInterval> | null = null;

  protected override createRenderRoot() { return this; }

  setMood(m: Mood) {
    this.mood = m;

    if (m === "angry") {
      this.triggerAnger();
    }
    if (m === "neutral" || m === "focused") {
      // User calmed JAE down
      this.shaking = false;
    }
    this.requestUpdate();
  }

  getMood(): Mood { return this.mood; }

  /** Analyse message text to infer mood */
  analyseText(text: string) {
    const lower = text.toLowerCase();
    // Check for error indicators
    if (/error|exception|failed|crash|panic|fatal/i.test(lower)) {
      if (this.mood === "frustrated") {
        this.setMood("angry");
      } else if (this.mood === "warning") {
        this.setMood("frustrated");
      } else {
        this.setMood("warning");
      }
      return;
    }
    // Check for success / excitement
    if (/success|perfect|awesome|brilliant|done|works|excellent/i.test(lower)) {
      this.setMood("excited");
      return;
    }
    // Check for deep work
    if (/analyzing|processing|computing|building|compiling|thinking/i.test(lower)) {
      this.setMood("focused");
      return;
    }
    // User calming JAE
    if (/calm down|relax|chill|easy|settle/i.test(lower)) {
      this.setMood("neutral");
      this.shaking = false;
      this.cracked = false;
      if (this.fadeTimer) clearInterval(this.fadeTimer);
      return;
    }
  }

  private triggerAnger() {
    this.shaking = true;
    this.cracked = true;
    this.crackOpacity = 1.0;

    // Shake for 2 seconds
    setTimeout(() => { this.shaking = false; this.requestUpdate(); }, 2000);

    // Fade crack over 5 minutes
    if (this.fadeTimer) clearInterval(this.fadeTimer);
    const steps = 300; // 300 seconds = 5 min
    const decrement = 1.0 / steps;
    this.fadeTimer = setInterval(() => {
      this.crackOpacity = Math.max(0, this.crackOpacity - decrement);
      if (this.crackOpacity <= 0) {
        this.cracked = false;
        if (this.fadeTimer) clearInterval(this.fadeTimer);
      }
      this.requestUpdate();
    }, 1000);
  }

  override disconnectedCallback() {
    super.disconnectedCallback();
    if (this.fadeTimer) clearInterval(this.fadeTimer);
  }

  override render() {
    const cfg = MOOD_CONFIG[this.mood];

    return html`
      <!-- Mood badge -->
      <div class="flex items-center gap-1.5 px-2 py-1 rounded-full text-[10px] transition-all duration-500"
        style="background:rgba(255,255,255,0.04);border:1px solid ${cfg.color};box-shadow:${cfg.glow}">
        <span class="text-sm jae-mood-emoji ${this.mood === "angry" ? "jae-angry-pulse" : ""}">${cfg.emoji}</span>
        <span class="font-medium" style="color:${cfg.color}">${cfg.label}</span>
      </div>

      <!-- Crack overlay on chat -->
      ${this.cracked ? html`
        <div class="jae-crack-overlay" style="opacity:${this.crackOpacity};pointer-events:none"></div>
      ` : html``}

      <!-- Shake class injector -->
      ${this.shaking ? html`<style>.jae-chat-area { animation: jae-shake 0.1s infinite alternate !important; }</style>` : html``}
    `;
  }
}
