import { Component, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ApiService } from '../../core/api.service';
import { LangService } from '../../core/lang.service';

interface Msg { role: 'user' | 'ai'; text: string; }

@Component({
  selector: 'app-assistant',
  standalone: true,
  imports: [FormsModule],
  template: `
    <div class="head"><h1>{{ lang.t('nav_assistant') }}</h1></div>

    <div class="card chat fade-in">
      <div class="thread">
        @if (!msgs().length) {
          <div class="empty">
            <p class="muted">{{ lang.t('assistant_intro') }}</p>
            <div class="suggest">
              @for (s of suggestions; track s) { <button class="chip" (click)="ask(lang.t(s))">{{ lang.t(s) }}</button> }
            </div>
          </div>
        }
        @for (m of msgs(); track $index) {
          <div class="bubble {{ m.role }}">{{ m.text }}</div>
        }
        @if (busy()) { <div class="bubble ai typing">…</div> }
      </div>

      <div class="composer">
        <input [(ngModel)]="draft" [placeholder]="lang.t('assistant_placeholder')" (keyup.enter)="send()" [disabled]="busy()" />
        <button class="btn btn--gold" [disabled]="busy() || !draft.trim()" (click)="send()">{{ lang.t('send') }}</button>
      </div>
    </div>
  `,
  styles: [`
    .head { margin-bottom: 18px; } h1 { font-size: 1.5rem; }
    .chat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 420px; }
    .thread { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
    .empty { margin: auto; text-align: center; max-width: 420px; }
    .suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
    .chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: .85rem; cursor: pointer; font-family: inherit; color: var(--ink-soft); }
    .chip:hover { border-color: var(--gold); color: var(--gold-deep); }
    .bubble { max-width: 80%; padding: 11px 15px; border-radius: 14px; font-size: .92rem; white-space: pre-wrap; line-height: 1.5; }
    .bubble.user { align-self: flex-end; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; border-bottom-right-radius: 4px; }
    .bubble.ai { align-self: flex-start; background: var(--bg, #f4f1ea); color: var(--ink); border-bottom-left-radius: 4px; }
    [dir='rtl'] .bubble.user { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }
    [dir='rtl'] .bubble.ai { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
    .typing { opacity: .6; letter-spacing: 2px; }
    .composer { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
    .composer input { flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; }
  `],
})
export class AssistantComponent {
  lang = inject(LangService);
  private api = inject(ApiService);

  msgs = signal<Msg[]>([]);
  draft = '';
  busy = signal(false);
  suggestions = ['sugg_today', 'sugg_revenue', 'sugg_overdue'];

  ask(text: string): void { this.draft = text; this.send(); }

  send(): void {
    const text = this.draft.trim();
    if (!text || this.busy()) { return; }
    this.msgs.set([...this.msgs(), { role: 'user', text }]);
    this.draft = '';
    this.busy.set(true);
    this.api.aiChat(text, this.lang.lang()).subscribe({
      next: (r) => { this.msgs.set([...this.msgs(), { role: 'ai', text: r.data.reply }]); this.busy.set(false); },
      error: (e) => { this.msgs.set([...this.msgs(), { role: 'ai', text: e?.error?.message || 'Error' }]); this.busy.set(false); },
    });
  }
}
