import {
  Component,
  ElementRef,
  ViewChild,
  Inject,
  PLATFORM_ID,
  AfterViewInit,
  ChangeDetectorRef
} from '@angular/core';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';

type TrocaKey = 'item' | 'linhaAntiga' | 'linhaNova' | 'iccid' | 'dataTroca' | 'motivo' | 'observacao';

interface TrocaRow {
  id: string;
  item: string;
  linhaAntiga: string;
  linhaNova: string;
  iccid: string;
  dataTroca: string;
  motivo: string;
  observacao: string;
  raw: any;
}

interface ApiPagedResult<T> {
  page?: number;
  pageSize?: number;
  total?: number;
  items?: T[];
}

interface GroupItem {
  key: string;      // aqui é o MOTIVO
  total: number;
  trocas: number;
  comIccid: number;
  semIccid: number;
}

/** ✅ DTO da linha do GERAL (para selects) */
interface LineOptionDto {
  id: string;
  item: number;
  linha: string | null;
  chip: string | null;
  cliente: string | null;
  usuario: string | null;
  skil: string | null;
}

@Component({
  standalone: true,
  imports: [CommonModule, FormsModule, HttpClientModule],
  templateUrl: './troca-numero.html',
  styleUrls: ['./troca-numero.scss']
})
export class TrocaNumero implements AfterViewInit {
  toastMessage = '';
  loading = false;

  @ViewChild('successToast', { static: false }) successToast!: ElementRef;

  constructor(
    @Inject(PLATFORM_ID) private platformId: object,
    private http: HttpClient,
    private cdr: ChangeDetectorRef
  ) {}

  private readonly apiBase = 'https://localhost:7205/api/trocanumero';

  /** ✅ base do GERAL (para buscar clientes/linhas no modal) */
  private readonly linesApiBase = 'https://localhost:7205/api/lines';

  // ====== DATA ======
  groups: GroupItem[] = [];
  pagedGroups: GroupItem[] = [];
  expandedGroup: string | null = null;
  groupRows: TrocaRow[] = [];

  private rowsByKey = new Map<string, TrocaRow[]>();

  // KPIs
  groupLoadedRecords = 0;
  groupTotalTrocas = 0;
  groupTotalIccids = 0;

  // ====== FILTERS & PAGINATION ======
  searchTerm = '';
  private searchTimer: any = null;
  page = 1;
  pageSize = 10;
  total = 0;

  // ====== EDIT MODAL ======
  editOpen = false;
  editSaving = false;
  editModel: any = null;

  // ====== CREATE MODAL ======
  createOpen = false;
  createSaving = false;
  createModel: any = {
    item: '',
    linhaAntiga: '',
    linhaNova: '',
    iccid: '',
    dataTroca: '',
    motivo: '',
    observacao: ''
  };

  /** ✅ selects do GERAL no modal */
  clientsFromGeral: string[] = [];
  linesFromClient: LineOptionDto[] = [];
  selectedCliente: string = '';
  selectedLineId: string = '';
  loadingClients = false;
  loadingLines = false;

  async ngAfterViewInit() {
    if (!isPlatformBrowser(this.platformId)) return;
    this.initAnimations();
    setTimeout(() => this.refresh());
  }

  private initAnimations() {
    document.documentElement.classList.add('js-animate');
    setTimeout(() => {
      const items = document.querySelectorAll<HTMLElement>('[data-animate]');
      items.forEach((el) => el.classList.add('is-visible'));
    }, 100);
  }

  refresh() {
    this.page = 1;
    this.loadForGroups();
  }

  onSearch() {
    if (this.searchTimer) clearTimeout(this.searchTimer);
    this.searchTimer = setTimeout(() => {
      this.page = 1;
      this.expandedGroup = null;
      this.groupRows = [];
      this.loadForGroups();
    }, 300);
  }

  clearSearch() {
    this.searchTerm = '';
    this.page = 1;
    this.expandedGroup = null;
    this.groupRows = [];
    this.loadForGroups();
  }

  onPageSizeChange() {
    this.page = 1;
    this.applyPagination();
  }

  goToPage(p: number) {
    this.page = Math.max(1, Math.min(this.totalPages, p));
    this.applyPagination();
  }

  get totalPages() { return Math.ceil((this.total || 0) / this.pageSize) || 1; }

  get pageNumbers() {
    const total = this.totalPages;
    const current = this.page;
    const max = 5;
    let start = Math.max(1, current - 2);
    let end = Math.min(total, start + (max - 1));
    start = Math.max(1, end - (max - 1));

    const pages: number[] = [];
    for (let i = start; i <= end; i++) pages.push(i);
    return pages;
  }

  get pageStart() { return this.total === 0 ? 0 : (this.page - 1) * this.pageSize + 1; }
  get pageEnd() {
    if (this.total === 0) return 0;
    return Math.min(this.page * this.pageSize, this.total);
  }

  trackById(_: number, row: TrocaRow) { return row.id; }

  // =======================================================================
  // LOAD LOGIC (igual MUREG: puxa bastante e agrupa no front)
  // =======================================================================
  private loadForGroups() {
    this.loading = true;
    const MAX_FETCH = 5000;

    let params = new HttpParams()
      .set('page', '1')
      .set('pageSize', String(MAX_FETCH))
      .set('search', (this.searchTerm ?? '').trim())
      .set('sortBy', 'motivo')
      .set('sortDir', 'asc');

    this.http.get<ApiPagedResult<any> | any[]>(this.apiBase, { params }).subscribe({
      next: (res: any) => {
        const items = Array.isArray(res) ? res : (res.items ?? []);
        const normalized = (items ?? []).map((x: any, idx: number) => this.normalizeRow(x, idx));
        this.buildGroups(normalized);
        this.applyPagination();
        this.loading = false;
        this.cdr.detectChanges();
      },
      error: async () => {
        this.loading = false;
        await this.showToast('Erro ao carregar Troca de Número.');
      }
    });
  }

  private buildGroups(all: TrocaRow[]) {
    this.rowsByKey.clear();

    const safeKey = (v: any) => (String(v ?? '').trim() || 'SEM MOTIVO');

    for (const r of all) {
      const key = safeKey(r.motivo);
      r.motivo = key;
      const arr = this.rowsByKey.get(key) ?? [];
      arr.push(r);
      this.rowsByKey.set(key, arr);
    }

    const groups: GroupItem[] = [];
    let trocasTotal = 0;
    let iccidsTotal = 0;

    this.rowsByKey.forEach((arr, key) => {
      const total = arr.length;
      const trocas = arr.filter(x => this.isTroca(x)).length;
      const comIccid = arr.filter(x => String(x.iccid ?? '').trim() !== '').length;
      const semIccid = total - comIccid;

      trocasTotal += trocas;
      iccidsTotal += comIccid;

      groups.push({ key, total, trocas, comIccid, semIccid });
    });

    groups.sort((a, b) => a.key.localeCompare(b.key, 'pt-BR', { sensitivity: 'base' }));

    this.groups = groups;
    this.total = groups.length;
    this.groupLoadedRecords = all.length;
    this.groupTotalTrocas = trocasTotal;
    this.groupTotalIccids = iccidsTotal;
  }

  private applyPagination() {
    const start = (this.page - 1) * this.pageSize;
    const end = start + this.pageSize;
    this.pagedGroups = this.groups.slice(start, end);

    if (this.expandedGroup && !this.pagedGroups.some(g => g.key === this.expandedGroup)) {
      this.expandedGroup = null;
      this.groupRows = [];
    }
  }

  toggleGroup(key: string) {
    if (this.expandedGroup === key) {
      this.expandedGroup = null;
      this.groupRows = [];
      return;
    }

    this.expandedGroup = key;
    const rows = this.rowsByKey.get(key) ?? [];
    this.groupRows = [...rows].sort((a, b) => {
      const ai = parseInt(String(a.item ?? '0'), 10);
      const bi = parseInt(String(b.item ?? '0'), 10);
      if (Number.isFinite(ai) && Number.isFinite(bi) && ai !== bi) return ai - bi;
      return String(a.linhaNova ?? '').localeCompare(String(b.linhaNova ?? ''), 'pt-BR', { sensitivity: 'base' });
    });
  }

  isTroca(r: TrocaRow): boolean {
    const a = String(r.linhaAntiga ?? '').trim();
    const b = String(r.linhaNova ?? '').trim();
    if (!a || !b) return false;
    return a !== b;
  }

  private normalizeRow(x: any, idx: number): TrocaRow {
    const pick = (obj: any, keys: string[]): any => {
      for (const k of keys) {
        if (obj && obj[k] !== undefined && obj[k] !== null && String(obj[k]).trim() !== '') return obj[k];
      }
      return '';
    };

    const item = pick(x, ['item', 'ITEM', 'ITÉM']);
    const linhaAntiga = pick(x, ['linhaAntiga', 'linha_antiga', 'LINHA ANTIGA']);
    const linhaNova = pick(x, ['linhaNova', 'linha_nova', 'LINHA NOVA']);
    const iccid = pick(x, ['iccid', 'ICCID']);
    const dataTroca = pick(x, ['dataTroca', 'data_troca', 'DATA TROCA', 'DATA DA TROCA']);
    const motivo = pick(x, ['motivo', 'MOTIVO']);
    const observacao = pick(x, ['observacao', 'OBSERVAÇÃO', 'OBSERVACAO']);

    const id = String(pick(x, ['id', 'ID']) || `${idx}-${item}-${linhaNova}-${iccid}`);

    return {
      id,
      item: String(item ?? ''),
      linhaAntiga: String(linhaAntiga ?? ''),
      linhaNova: String(linhaNova ?? ''),
      iccid: String(iccid ?? ''),
      dataTroca: String(dataTroca ?? ''),
      motivo: String(motivo ?? ''),
      observacao: String(observacao ?? ''),
      raw: x
    };
  }

  // =======================================================================
  // ✅ GERAL -> selects do modal (Clientes / Linhas do cliente)
  // =======================================================================
  private loadClientsFromGeral() {
    this.loadingClients = true;

    this.http.get<string[]>(`${this.linesApiBase}/clients`).subscribe({
      next: (res) => {
        this.clientsFromGeral = (res ?? []).filter(x => !!String(x ?? '').trim());
        this.loadingClients = false;
        this.cdr.detectChanges();
      },
      error: async () => {
        this.loadingClients = false;
        await this.showToast('Erro ao carregar clientes do GERAL.');
      }
    });
  }

  private loadLinesByClient(cliente: string) {
    const c = String(cliente ?? '').trim();
    if (!c) {
      this.linesFromClient = [];
      this.selectedLineId = '';
      return;
    }

    this.loadingLines = true;

    const params = new HttpParams().set('cliente', c);

    this.http.get<LineOptionDto[]>(`${this.linesApiBase}/by-client`, { params }).subscribe({
      next: (res) => {
        this.linesFromClient = (res ?? []);
        this.loadingLines = false;
        this.cdr.detectChanges();
      },
      error: async () => {
        this.loadingLines = false;
        await this.showToast('Erro ao carregar linhas do cliente (GERAL).');
      }
    });
  }

  onClienteChange() {
    // reset quando troca cliente
    this.selectedLineId = '';
    this.linesFromClient = [];

    // limpa campos auto
    this.createModel.linhaAntiga = '';
    this.createModel.iccid = '';

    this.loadLinesByClient(this.selectedCliente);
  }

  onLineChange() {
    const id = String(this.selectedLineId ?? '').trim();
    const found = this.linesFromClient.find(x => x.id === id);

    // preenche automaticamente a partir do GERAL
    this.createModel.linhaAntiga = found?.linha ?? '';
    this.createModel.iccid = found?.chip ?? ''; // Chip do GERAL => ICCID aqui

    // se quiser, pode setar item automaticamente também:
    if (found?.item !== undefined && found?.item !== null) {
      // só seta se estiver vazio (pra não atrapalhar quem quiser digitar)
      if (!String(this.createModel.item ?? '').trim()) {
        this.createModel.item = String(found.item);
      }
    }
  }

  // ====== MODAL EDIÇÃO ======
  onEditar(r: TrocaRow) {
    this.editOpen = true;
    this.editSaving = false;

    this.editModel = {
      id: r.id,
      item: r.item,
      linhaAntiga: r.linhaAntiga,
      linhaNova: r.linhaNova,
      iccid: r.iccid,
      motivo: r.motivo,
      observacao: r.observacao,
      dataTroca: this.isoToDateInput(r.dataTroca)
    };
  }

  closeEdit() {
    this.editOpen = false;
    this.editModel = null;
    this.editSaving = false;
  }

  saveEdit() {
    if (!this.editModel || !this.editModel.id) return;
    this.editSaving = true;

    const payload = {
      item: this.toNumberOrNull(this.editModel.item),
      linhaAntiga: this.editModel.linhaAntiga,
      linhaNova: this.editModel.linhaNova,
      iccid: this.editModel.iccid,
      motivo: this.editModel.motivo,
      observacao: this.editModel.observacao,
      dataTroca: this.dateInputToIso(this.editModel.dataTroca)
    };

    this.http.put(`${this.apiBase}/${this.editModel.id}`, payload).subscribe({
      next: async () => {
        this.editSaving = false;
        await this.showToast('Registro atualizado com sucesso!');
        this.closeEdit();
        const currentGroup = this.expandedGroup;
        this.loadForGroups();
        if (currentGroup) setTimeout(() => this.expandedGroup = currentGroup, 350);
      },
      error: async () => {
        this.editSaving = false;
        await this.showToast('Erro ao salvar edição.');
      }
    });
  }

  // ====== MODAL CRIAÇÃO ======
  onCreate() {
    this.createOpen = true;
    this.createSaving = false;

    // reset do form
    this.createModel = {
      item: '',
      linhaAntiga: '',
      linhaNova: '',
      iccid: '',
      dataTroca: '',
      motivo: '',
      observacao: ''
    };

    // reset dos selects
    this.selectedCliente = '';
    this.selectedLineId = '';
    this.clientsFromGeral = [];
    this.linesFromClient = [];

    // carrega clientes do GERAL
    this.loadClientsFromGeral();
  }

  closeCreate() {
    this.createOpen = false;
  }

  saveCreate() {
    // ✅ validações do "beber do GERAL"
    if (!String(this.selectedCliente ?? '').trim()) {
      this.showToast('Selecione um Cliente do GERAL.');
      return;
    }
    if (!String(this.selectedLineId ?? '').trim()) {
      this.showToast('Selecione uma Linha do Cliente (GERAL).');
      return;
    }
    if (!String(this.createModel.linhaNova ?? '').trim()) {
      this.showToast('Informe a Linha Nova.');
      return;
    }

    this.createSaving = true;

    const payload = {
      item: this.toNumberOrNull(this.createModel.item),
      linhaAntiga: this.createModel.linhaAntiga, // auto do GERAL
      linhaNova: this.createModel.linhaNova,
      iccid: this.createModel.iccid, // auto do GERAL
      motivo: this.createModel.motivo,
      observacao: this.createModel.observacao,
      dataTroca: this.dateInputToIso(this.createModel.dataTroca)
    };

    this.http.post(this.apiBase, payload).subscribe({
      next: async () => {
        this.createSaving = false;
        await this.showToast('Troca criada com sucesso!');
        this.closeCreate();
        this.loadForGroups();
      },
      error: async () => {
        this.createSaving = false;
        await this.showToast('Erro ao criar Troca.');
      }
    });
  }

  // Helpers
  private toNumberOrNull(v: any): number | null {
    const n = parseInt(String(v ?? '').trim(), 10);
    return Number.isFinite(n) ? n : null;
  }

  private isoToDateInput(iso: string | null | undefined): string {
    if (!iso) return '';
    const dt = new Date(iso);
    if (Number.isNaN(dt.getTime())) return '';
    return dt.toISOString().slice(0, 10);
  }

  private dateInputToIso(val: string | null | undefined): string | null {
    if (!val) return null;
    const dt = new Date(val);
    if (Number.isNaN(dt.getTime())) return null;
    return dt.toISOString();
  }

  displayValue(key: TrocaKey, v: any): string {
    if (v === null || v === undefined || String(v).trim() === '') return '-';

    if (key === 'dataTroca') {
      const s = String(v).trim();
      const d = new Date(s);
      if (!Number.isNaN(d.getTime())) return new Intl.DateTimeFormat('pt-BR').format(d);
      return s;
    }
    return String(v);
  }

  private async showToast(message: string) {
    if (!isPlatformBrowser(this.platformId)) return;
    this.toastMessage = message;
    this.cdr.detectChanges();

    if (!this.successToast?.nativeElement) return;

    try {
      const bs = await import('bootstrap');
      const toastInstance = bs.Toast.getOrCreateInstance(this.successToast.nativeElement, {
        autohide: true,
        delay: 3000
      });
      toastInstance.show();
    } catch (error) {
      console.error(error);
    }
  }
}