import { Component, Inject, inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
import { HttpClient } from '@angular/common/http';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { webConfig } from '../../config';
import { MatIconModule } from '@angular/material/icon';
import { FFBProduction } from '../../ffb/ffb-production.interface';

import { CreateFfbProductionDialogComponent } from '../../components/ffb-production-dialog/create-ffb-production-dialog.component';

@Component({
  selector: 'app-ffb-vector-search-dialog',
  templateUrl: './ffb-vector-search-dialog.component.html',
  styleUrls: ['./ffb-vector-search-dialog.component.css'],
  standalone: true,
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    MatTableModule,
    MatIconModule,
    MatDialogModule
  ],
})
export class FfbVectorSearchDialogComponent {
  private http = inject(HttpClient);
  private dialog = inject(MatDialog);
  dialogRef = inject(MatDialogRef<FfbVectorSearchDialogComponent>);

  queryControl = new FormControl('');
  kControl = new FormControl(5);

  loading = false;
  results: FFBProduction[] = [];

  displayedColumns: string[] = ['productionDate', 'site', 'phase', 'block', 'weight', 'quantity', 'score'];

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }

  search() {
    const q = this.queryControl.value?.trim();
    const k = this.kControl.value || 5;

    if (!q) return;

    this.loading = true;
    this.results = [];

    this.http.get<FFBProduction[]>(`${webConfig.exposedUrl}/api/ffb-production/search?q=${encodeURIComponent(q)}&k=${k}`)
      .subscribe({
        next: (data) => {
          console.log(data)
          // Strip vector to save memory/UI
          this.results = data.map(h => ({ ...h, vector: undefined, productionDate: new Date(h.productionDate) }));
          this.loading = false;
        },
        error: (err) => {
          console.error(err);
          this.loading = false;
        }
      });
  }

  close() {
    this.dialogRef.close();
  }

  applyResults() {
    // Return results to parent
    this.dialogRef.close(this.results);
  }

  formatDate(date: Date | string) {
    const d = new Date(date);
    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: '2-digit' });
  }

  openDetails(harvest: FFBProduction) {
    const dialogRef = this.dialog.open(CreateFfbProductionDialogComponent, {
      width: '800px',
      data: {
        harvest,
        allSites: this.data.allSites || [],
        allPhases: this.data.allPhases || [],
        allBlocks: this.data.allBlocks || [],
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      // Ideally we might want to refresh the search results if edited, 
      // but for now we just let them close it.
      if (result === 'refresh') {
        // We could re-trigger search if we want to reflect changes immediately
        this.search();
      }
    });
  }
}