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

@Component({
  selector: 'app-change-requests',
  standalone: true,
  imports: [DatePipe, FormsModule, RouterLink],
  template: `
    <div class="head">
      <h1>{{ lang.t('nav_change_requests') }}</h1>
      <div class="tabs">
        @for (s of filters; track s) {
          <button class="tab" [class.on]="status() === s" (click)="setStatus(s)">{{ lang.t('crf_' + s) }}</button>
        }
      </div>
    </div>

    <div class="card fade-in">
      @if (loading()) { <p class="muted pad">{{ lang.t('loading') }}</p> }
      @else if (rows().length) {
        @for (c of rows(); track c.id) {
          <div class="cr">
            <div class="cr-main">
              <div class="cr-top">
                <strong>{{ c.contact || '—' }}</strong>
                <span class="badge cr-{{ c.status }}">{{ lang.t('cr_' + c.status) }}</span>
                @if (c.booking_id) { <a class="lnk" [routerLink]="['/bookings', c.booking_id]">{{ lang.t('booking') }} #{{ c.booking_id }}</a> }
              </div>
              <p class="cr-msg">{{ c.message }}</p>
              @if (c.staff_note) { <p class="muted sm">↳ {{ c.staff_note }}</p> }
              <small class="muted">{{ c.at | date:'short' }}</small>
            </div>
            @if (c.status === 'pending') {
              <div class="cr-actions">
                <input [(ngModel)]="notes[c.id]" [placeholder]="lang.t('note_optional')" />
                <button class="btn btn--gold btn--sm" [disabled]="busy()" (click)="decide(c, 'approved')">{{ lang.t('approve') }}</button>
                <button class="btn btn--ghost btn--sm" [disabled]="busy()" (click)="decide(c, 'rejected')">{{ lang.t('reject') }}</button>
              </div>
            }
          </div>
        }
      } @else { <p class="muted pad">{{ lang.t('no_requests') }}</p> }
    </div>
  `,
  styles: [`
    .head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
    h1 { font-size: 1.5rem; }
    .tabs { display: flex; gap: 4px; background: var(--panel-2, #f1ece3); border-radius: 999px; padding: 4px; }
    .tab { border: 0; background: transparent; border-radius: 999px; padding: 7px 15px; font-weight: 600; font-family: inherit; cursor: pointer; color: var(--ink-soft); font-size: .88rem; }
    .tab.on { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; }
    .card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
    .pad { padding: 26px; }
    .cr { display: flex; gap: 16px; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
    .cr:last-child { border-bottom: 0; }
    .cr-main { flex: 1; min-width: 240px; }
    .cr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
    .cr-msg { margin: 4px 0; }
    .sm { font-size: .82rem; } .lnk { color: var(--gold-deep); font-weight: 600; }
    .badge { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
    .cr-pending { background: #fdeede; color: #b5691a; } .cr-approved { background: #e7f5ec; color: #1d7a46; } .cr-rejected { background: #fde6e6; color: #b5281a; }
    .cr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .cr-actions input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; min-width: 160px; }
  `],
})
export class ChangeRequestsComponent {
  lang = inject(LangService);
  private api = inject(ApiService);

  filters = ['pending', 'approved', 'rejected', 'all'];
  status = signal('pending');
  rows = signal<ChangeReq[]>([]);
  loading = signal(true);
  busy = signal(false);
  notes: Record<number, string> = {};

  constructor() { this.reload(); }
  setStatus(s: string): void { this.status.set(s); this.reload(); }
  reload(): void {
    this.loading.set(true);
    this.api.changeRequests(this.status()).subscribe({
      next: (r) => { this.rows.set(r.data.requests); this.loading.set(false); },
      error: () => this.loading.set(false),
    });
  }
  decide(c: ChangeReq, status: 'approved' | 'rejected'): void {
    this.busy.set(true);
    this.api.decideChangeRequest(c.id, status, this.notes[c.id]).subscribe({
      next: () => { this.busy.set(false); this.reload(); },
      error: (e) => { this.busy.set(false); alert(e?.error?.message || 'Error'); },
    });
  }
}
