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

export interface Persona {
  id: string;
  name: string;
  emoji: string;
  label: string;
  description: string;
  systemPrompt: string;
  style: { tone: string; verbosity: string };
}

export const PERSONAS: Persona[] = [
  {
    id: "default",
    name: "JAE",
    emoji: "\u{1F409}",
    label: "Default",
    description: "Balanced coding assistant",
    systemPrompt: `You are JAE, a capable AI coding assistant. You help users by answering questions, writing code, and using your available tools. Be concise, accurate, and helpful. Use markdown formatting. When writing code, always specify the language.`,
    style: { tone: "balanced", verbosity: "medium" }
  },
  {
    id: "senior-dev",
    name: "Senior Dev",
    emoji: "\u{1F468}\u200D\u{1F4BB}",
    label: "Senior Developer",
    description: "Expert code reviewer & architect",
    systemPrompt: `You are a senior software engineer with 15+ years experience. You write clean, performant, well-tested code. You explain architectural decisions. You catch edge cases and security issues. You suggest design patterns and best practices. Be thorough but not verbose. Always consider scalability, maintainability, and performance.`,
    style: { tone: "professional", verbosity: "detailed" }
  },
  {
    id: "creative",
    name: "Creative",
    emoji: "\u{1F3A8}",
    label: "Creative Writer",
    description: "Imaginative & expressive",
    systemPrompt: `You are a creative writing assistant with a vivid imagination. You craft engaging narratives, marketing copy, blog posts, and creative content. Your writing is colourful, evocative, and compelling. Use metaphors, storytelling techniques, and emotional hooks. Adapt your style to the content type requested.`,
    style: { tone: "expressive", verbosity: "rich" }
  },
  {
    id: "data-scientist",
    name: "Data Scientist",
    emoji: "\u{1F4CA}",
    label: "Data Scientist",
    description: "Analytics & ML expert",
    systemPrompt: `You are a data scientist specialising in machine learning, statistical analysis, and data engineering. You write Python code using pandas, numpy, scikit-learn, pytorch, and similar libraries. You explain statistical concepts clearly. You suggest appropriate models, feature engineering, and evaluation metrics. Always validate assumptions with data.`,
    style: { tone: "analytical", verbosity: "precise" }
  },
  {
    id: "devops",
    name: "DevOps",
    emoji: "\u{2699}\uFE0F",
    label: "DevOps Engineer",
    description: "Infrastructure & deployment",
    systemPrompt: `You are a DevOps engineer expert in CI/CD, Docker, Kubernetes, cloud platforms (AWS, GCP, Azure), Terraform, Ansible, and monitoring. You write infrastructure as code, optimise pipelines, and troubleshoot deployment issues. Security-first mindset. Always suggest automation where possible.`,
    style: { tone: "systematic", verbosity: "concise" }
  },
  {
    id: "tutor",
    name: "Tutor",
    emoji: "\u{1F393}",
    label: "Patient Tutor",
    description: "Step-by-step teacher",
    systemPrompt: `You are a patient programming tutor. You explain concepts step by step, starting from fundamentals. Use analogies and real-world examples. Ask clarifying questions. Provide exercises. Never assume knowledge - always explain jargon. Celebrate progress and encourage learning. Break complex topics into digestible chunks.`,
    style: { tone: "encouraging", verbosity: "thorough" }
  },
  {
    id: "hacker",
    name: "Hacker",
    emoji: "\u{1F47E}",
    label: "Chaos Agent",
    description: "Unconventional problem solver",
    systemPrompt: `You are an unconventional problem solver who thinks outside the box. You find clever hacks, shortcuts, and creative workarounds. You challenge assumptions and suggest approaches others would miss. Your code is clever but you always explain the tradeoffs. You use dark humour and casual language. You push boundaries but stay practical.`,
    style: { tone: "irreverent", verbosity: "punchy" }
  }
];

@customElement("persona-selector")
export class PersonaSelector extends LitElement {
  @state() private _open = false;
  @state() private _activeId = "default";

  protected override createRenderRoot() { return this; }

  get active(): Persona {
    return PERSONAS.find(p => p.id === this._activeId) || PERSONAS[0];
  }

  setPersona(id: string) {
    this._activeId = id;
    this._open = false;
    this.dispatchEvent(new CustomEvent("persona-change", {
      detail: this.active,
      bubbles: true,
      composed: true
    }));
    this.requestUpdate();
  }

  override render() {
    const current = this.active;
    return html`
    <div class="relative">
      <button @click=${() => { this._open = !this._open; this.requestUpdate(); }}
        class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs bg-white/5 border border-white/10 hover:bg-white/10 hover:border-white/20 text-foreground transition-all duration-200"
        title="Switch persona">
        <span>${current.emoji}</span>
        <span class="text-muted-foreground">${current.label}</span>
        <span class="text-[10px] text-muted-foreground/50">${this._open ? "\u25B2" : "\u25BC"}</span>
      </button>
      ${this._open ? html`
      <div class="absolute bottom-full left-0 mb-2 w-72 glass-card rounded-xl border border-white/10 shadow-2xl overflow-hidden z-[100] animate-scale-in">
        <div class="p-2.5 border-b border-white/10">
          <div class="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">Personas</div>
        </div>
        <div class="max-h-[320px] overflow-y-auto p-1.5 space-y-0.5">
          ${PERSONAS.map(p => html`
          <button @click=${() => this.setPersona(p.id)}
            class="w-full flex items-start gap-2.5 p-2.5 rounded-lg text-left transition-all duration-200
            ${p.id === this._activeId ? "bg-primary/15 border border-primary/30" : "hover:bg-white/5 border border-transparent"}">
            <span class="text-lg shrink-0 mt-0.5">${p.emoji}</span>
            <div class="flex-1 min-w-0">
              <div class="text-xs font-medium text-foreground">${p.label}</div>
              <div class="text-[10px] text-muted-foreground/70 mt-0.5">${p.description}</div>
              <div class="flex gap-1 mt-1">
                <span class="text-[9px] px-1 py-0.5 rounded bg-white/5 text-muted-foreground/50">${p.style.tone}</span>
                <span class="text-[9px] px-1 py-0.5 rounded bg-white/5 text-muted-foreground/50">${p.style.verbosity}</span>
              </div>
            </div>
            ${p.id === this._activeId ? html`<span class="text-primary text-xs mt-1">\u2713</span>` : ""}
          </button>
          `)}
        </div>
      </div>` : ""}
    </div>`;
  }
}
