import { DatePipe } from '@angular/common';
import { Component, inject, signal } from '@angular/core';
import { Router } from '@angular/router';
import { ApiService, VisitRow } from '../../core/api.service';
import { LangService } from '../../core/lang.service';

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

    <div class="card fade-in">
      @if (loading()) { <p class="muted pad">{{ lang.t('loading') }}</p> }
      @else if (visits().length) {
        <table class="tbl">
          <thead>
            <tr>
              <th>{{ lang.t('col_when') }}</th>
              <th>{{ lang.t('col_client') }}</th>
              <th>{{ lang.t('col_location') }}</th>
              <th>{{ lang.t('col_status') }}</th>
            </tr>
          </thead>
          <tbody>
            @for (v of visits(); track v.id) {
              <tr class="clickable" [class.is-late]="v.overdue" (click)="open(v)">
                <td>
                  <strong>{{ v.date ? (v.date | date:'mediumDate') : '—' }}</strong>
                  <div class="muted sm">{{ v.time || '' }}@if (v.overdue) { · <span class="late">{{ lang.t('overdue') }}</span> }</div>
                </td>
                <td>
                  <strong>{{ v.contact || '—' }}</strong>
                  <div class="muted sm">{{ v.mobile }}</div>
                </td>
                <td>{{ v.location || '—' }}</td>
                <td><span class="badge {{ statusClass(v.status) }}">{{ lang.t('vis_' + v.status) }}</span></td>
              </tr>
            }
          </tbody>
        </table>
      } @else {
        <p class="muted pad">{{ lang.t('no_visits') }}</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; flex-wrap: wrap; }
    .tab { border: 0; background: transparent; border-radius: 999px; padding: 7px 15px; font-weight: 600; font-family: inherit;
      cursor: pointer; color: var(--ink-soft, #6b6b6b); 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; }
    .tbl { width: 100%; border-collapse: collapse; }
    .tbl th { text-align: start; font-size: .78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft, #888);
      padding: 13px 16px; border-bottom: 1px solid var(--line); }
    .tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .92rem; vertical-align: top; }
    .tbl tr:last-child td { border-bottom: 0; }
    .clickable { cursor: pointer; }
    .clickable:hover { background: var(--bg); }
    .is-late { background: #fff6f5; }
    .sm { font-size: .82rem; }
    .late { color: var(--danger); font-weight: 700; }
    .badge { font-size: .74rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; }
    .b-req { background: #fdeede; color: #b5691a; }
    .b-conf { background: #e9f0fb; color: #2a5db0; }
    .b-done { background: #e7f5ec; color: #1d7a46; }
    .b-canc { background: #efeae0; color: #777; }
  `],
})
export class VisitsComponent {
  lang = inject(LangService);
  private api = inject(ApiService);
  private router = inject(Router);

  filters = ['upcoming', 'requested', 'confirmed', 'done', 'cancelled', 'all'];
  status = signal<string>('upcoming');
  visits = signal<VisitRow[]>([]);
  loading = signal(true);

  constructor() { this.reload(); }

  setStatus(s: string): void { this.status.set(s); this.reload(); }

  reload(): void {
    this.loading.set(true);
    this.api.visits(this.status()).subscribe({
      next: (r) => { this.visits.set(r.data.visits); this.loading.set(false); },
      error: () => { this.loading.set(false); },
    });
  }

  open(v: VisitRow): void {
    if (v.lead_id) { this.router.navigate(['/leads', v.lead_id]); }
  }

  statusClass(s: string): string {
    return ({ requested: 'b-req', scheduled: 'b-conf', confirmed: 'b-conf', done: 'b-done', cancelled: 'b-canc' } as Record<string, string>)[s] || 'b-req';
  }
}
