import { DatePipe } from '@angular/common';
import { Component, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ApiService, LeadRow } from '../../core/api.service';
import { LangService } from '../../core/lang.service';
import { stageBadge } from '../../core/stage';

const STAGES = ['wizard_incomplete', 'wizard_complete', 'qualified_awaiting_contact', 'contacted', 'proposal_sent', 'negotiation', 'won', 'lost'];

@Component({
  selector: 'app-leads',
  standalone: true,
  imports: [FormsModule, DatePipe],
  template: `
    <div class="head">
      <h1>{{ lang.t('leads_title') }}</h1>
      <select class="filter" [(ngModel)]="stage" (ngModelChange)="reload()">
        <option value="">{{ lang.t('all_stages') }}</option>
        @for (s of allStages; track s) { <option [value]="s">{{ lang.stage(s) }}</option> }
      </select>
    </div>

    <div class="card fade-in">
      @if (loading()) { <p class="muted pad">{{ lang.t('loading') }}</p> }
      @else if (rows().length) {
        <table class="tbl">
          <thead>
            <tr>
              <th>{{ lang.t('col_contact') }}</th>
              <th>{{ lang.t('col_event') }}</th>
              <th>{{ lang.t('col_guests') }}</th>
              <th>{{ lang.t('col_budget') }}</th>
              <th>{{ lang.t('col_stage') }}</th>
              <th>{{ lang.t('col_created') }}</th>
            </tr>
          </thead>
          <tbody>
            @for (l of rows(); track l.id) {
              <tr class="clickable" (click)="open(l.id)">
                <td>
                  <strong>{{ l.contact?.name || '—' }}</strong>
                  <div class="muted sm">{{ l.contact?.mobile }}</div>
                </td>
                <td>{{ l.event_type || '—' }}</td>
                <td>{{ l.attendees || '—' }}</td>
                <td>{{ l.budget_max ? lang.money(l.budget_max) : '—' }}</td>
                <td><span class="badge {{ badge(l.stage) }}">{{ lang.stage(l.stage) }}</span></td>
                <td class="muted sm">{{ l.created_at ? (l.created_at | date:'mediumDate') : '' }}</td>
              </tr>
            }
          </tbody>
        </table>
      } @else { <p class="muted pad">{{ lang.t('no_leads') }}</p> }
    </div>
  `,
  styles: [`
    .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
    .filter { padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-family: inherit; font-size: .9rem; }
    .pad { padding: 26px; }
    .sm { font-size: .82rem; }
  `],
})
export class LeadsComponent {
  lang = inject(LangService);
  private api = inject(ApiService);
  private route = inject(ActivatedRoute);
  private router = inject(Router);

  allStages = STAGES;
  stage = '';
  rows = signal<LeadRow[]>([]);
  loading = signal(true);
  badge = stageBadge;

  // Lazy date pipe needs CommonModule's DatePipe; import standalone instead.
  constructor() {
    this.stage = this.route.snapshot.queryParamMap.get('stage') || '';
    this.reload();
  }

  reload(): void {
    this.loading.set(true);
    this.api.leads(this.stage || undefined).subscribe({
      next: (r) => { this.rows.set(r.data.leads.data); this.loading.set(false); },
      error: () => this.loading.set(false),
    });
  }

  open(id: number): void { this.router.navigate(['/leads', id]); }
}
