'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Header from '@/components/Header';
import styles from './page.module.css';
import { useUser } from '@/lib/auth/UserContext';

interface ValidationError {
  row: number;
  column: string;
  value: any;
  code: string;
  metadata: any;
}

const TRANSLATIONS: Record<string, string> = {
  USER_NOT_FOUND: "El colaborador '{username}' no existe en el sistema.",
  INVALID_PERIOD_FORMAT: "El período '{value}' no tiene formato válido (esperado: {expected}).",
  HOTEL_NOT_FOUND: "El hotel '{hotelCode}' no existe en el sistema.",
  HOTEL_REGION_MISMATCH: "El hotel '{hotelCode}' no pertenece a su región autorizada.",
  INVALID_AMOUNT: "El monto '{value}' no es válido. Debe ser un número positivo.",
  INVALID_COUNT: "La cantidad '{value}' no es válida. Debe ser un número entero positivo.",
  USER_REQUIRED: "El colaborador es obligatorio.",
  HOTEL_REQUIRED: "El hotel es obligatorio.",
  IMPORT_VALIDATION_FAILED: "El archivo cargado contiene inconsistencias de validación.",
  MISSING_IDEMPOTENCY_KEY: "El encabezado de idempotencia es obligatorio.",
  FILE_REQUIRED: "Debe seleccionar un archivo válido.",
  EMPTY_FILE: "El archivo está vacío y no contiene registros.",
  INTEGRATION_ERROR: "El motor de integraciones (n8n) reportó un fallo al procesar la solicitud.",
  IMPORT_ALREADY_PROCESSED: "Este archivo ya fue cargado y procesado con éxito anteriormente.",
  IMPORT_SUCCESSFUL: "Importación completada con éxito. Se cargaron {count} registros.",
  IMPORT_ACCEPTED: "La importación ha sido aceptada y se está procesando mediante n8n en segundo plano."
};

const translate = (code: string, metadata: any = {}, value?: any) => {
  let template = TRANSLATIONS[code] || code;
  const merged = { ...metadata };
  if (value !== undefined) {
    merged.value = value;
  }
  for (const key of Object.keys(merged)) {
    template = template.replace(`{${key}}`, String(merged[key]));
  }
  return template;
};

export default function SalesImportPage() {
  const router = useRouter();
  const [file, setFile] = useState<File | null>(null);
  const [dragActive, setDragActive] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [idempotencyKey, setIdempotencyKey] = useState('');
  const [successData, setSuccessData] = useState<{ count: number; totalAmount?: number } | null>(null);
  const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
  const [generalError, setGeneralError] = useState<string | null>(null);
  const [statusMessage, setStatusMessage] = useState('');
  const { role, user: currentUser, isLoading: contextLoading } = useUser();

  useEffect(() => {
    if (!contextLoading) {
      if (!currentUser) {
        router.push('/login');
        return;
      }
      const allowed = ['admin', 'analyst', 'commercial_leader'];
      if (!allowed.includes(role || '')) {
        router.push('/unauthorized');
        return;
      }
    }
  }, [contextLoading, currentUser, role, router]);

  useEffect(() => {
    // Generate unique idempotency key for this session/upload instance
    const key = 'key-' + Date.now() + '-' + Math.random().toString(36).substring(2, 9);
    setIdempotencyKey(key);
  }, []);

  if (contextLoading) {
    return (
      <div className={styles.container}>
        <Header activeTab="import" />
        <main className={styles.main}>
          <div className={styles.card} style={{ textAlign: 'center', padding: '2rem' }}>
            <p>Cargando módulo de importación...</p>
          </div>
        </main>
      </div>
    );
  }

  const handleDrag = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true);
    } else if (e.type === "dragleave") {
      setDragActive(false);
    }
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      const droppedFile = e.dataTransfer.files[0];
      if (droppedFile.name.endsWith('.xlsx') || droppedFile.name.endsWith('.xls') || droppedFile.name.endsWith('.csv')) {
        setFile(droppedFile);
        setGeneralError(null);
        setValidationErrors([]);
        setSuccessData(null);
      } else {
        setGeneralError("Tipo de archivo no soportado. Cargue archivos .xlsx, .xls o .csv");
      }
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files[0]) {
      const selectedFile = e.target.files[0];
      setFile(selectedFile);
      setGeneralError(null);
      setValidationErrors([]);
      setSuccessData(null);
    }
  };

  const startPolling = (key: string) => {
    setStatusMessage("Procesando integración asíncrona mediante n8n...");
    const interval = setInterval(async () => {
      try {
        const res = await fetch(`/api/sales/import/status/${key}`);
        if (res.ok) {
          const data = await res.json();
          if (data.metadata?.status === 'SUCCESS') {
            clearInterval(interval);
            setIsUploading(false);
            setProgress(100);
            setSuccessData({ count: data.metadata.count || 0 });
            setStatusMessage('');
          } else if (data.metadata?.status === 'FAILED') {
            clearInterval(interval);
            setIsUploading(false);
            setProgress(0);
            setGeneralError(data.metadata.errorMessage || "Fallo en el procesamiento de n8n.");
            setStatusMessage('');
          }
        }
      } catch (err) {
        console.error('Polling status error:', err);
      }
    }, 2000);

    // Safety timeout: stop polling after 30 seconds
    setTimeout(() => {
      clearInterval(interval);
      if (isUploading) {
        setIsUploading(false);
        setGeneralError("El procesamiento por n8n está tomando más tiempo de lo esperado. Revise el historial más tarde.");
      }
    }, 30000);
  };

  const handleUpload = async () => {
    if (!file || !idempotencyKey) return;

    setIsUploading(true);
    setProgress(10);
    setGeneralError(null);
    setValidationErrors([]);
    setSuccessData(null);

    const formData = new FormData();
    formData.append('file', file);

    try {
      setProgress(40);
      const res = await fetch('/api/sales/import', {
        method: 'POST',
        headers: {
          'idempotency-key': idempotencyKey
        },
        body: formData
      });

      setProgress(80);
      const data = await res.json();

      if (res.status === 201) {
        // Direct successful import
        setProgress(100);
        setIsUploading(false);
        setSuccessData(data.metadata || { count: 0 });
      } else if (res.status === 202) {
        // Accepted (asynchronous processing via n8n)
        setProgress(90);
        startPolling(idempotencyKey);
      } else if (res.status === 200 && data.code === 'IMPORT_ALREADY_PROCESSED') {
        // Idempotency cached response
        setProgress(100);
        setIsUploading(false);
        setSuccessData(data.metadata);
        setGeneralError(translate(data.code, data.metadata));
      } else {
        // Error occurred
        setIsUploading(false);
        setProgress(0);
        if (data.error?.code === 'IMPORT_VALIDATION_FAILED') {
          setValidationErrors(data.error.details || []);
          setGeneralError(translate(data.error.code));
        } else {
          setGeneralError(translate(data.error?.code || 'INTERNAL_SERVER_ERROR', data.error?.metadata));
        }
      }

    } catch (err: any) {
      setIsUploading(false);
      setProgress(0);
      setGeneralError("Fallo de red o error inesperado al subir el archivo.");
    }
  };

  return (
    <div className={styles.container}>
      <Header activeTab="import" />
      <main className={styles.main}>
        <div className={styles.card}>
          <div className={styles.header}>
            <h1 className={styles.title}>Cargar Ventas Comerciales</h1>
            <p className={styles.subtitle}>Importe el archivo de resultados para procesar las comisiones del periodo.</p>
          </div>

          <div className={styles.templateDownload}>
            <span className={styles.templateLabel}>Utilice la plantilla oficial para evitar inconsistencias:</span>
            <a 
              href="/templates/import_sales_template.xlsx" 
              download="import_sales_template.xlsx" 
              className={styles.downloadBtn}
              id="btn-download-template"
            >
              Descargar Plantilla (.xlsx)
            </a>
          </div>

          {/* Drag & Drop Area */}
          <div 
            className={`${styles.dropZone} ${dragActive ? styles.dropZoneActive : ''} ${file ? styles.dropZoneHasFile : ''}`}
            onDragEnter={handleDrag}
            onDragLeave={handleDrag}
            onDragOver={handleDrag}
            onDrop={handleDrop}
          >
            <input 
              type="file" 
              id="file-upload" 
              className={styles.fileInput} 
              onChange={handleFileChange}
              accept=".xlsx,.xls,.csv"
            />
            <label htmlFor="file-upload" className={styles.dropLabel}>
              <div className={styles.uploadIcon}>📥</div>
              {file ? (
                <div>
                  <p className={styles.fileName}>{file.name}</p>
                  <p className={styles.fileSize}>{(file.size / 1024).toFixed(1)} KB</p>
                </div>
              ) : (
                <div>
                  <p className={styles.dropText}>Arrastre y suelte su archivo aquí, o <span className={styles.browseText}>explore archivos</span></p>
                  <p className={styles.supportedText}>Formatos permitidos: .xlsx, .xls, .csv</p>
                </div>
              )}
            </label>
          </div>

          {/* Progress Bar */}
          {isUploading && (
            <div className={styles.progressContainer}>
              <div className={styles.progressBarWrapper}>
                <div className={styles.progressBar} style={{ width: `${progress}%` }}></div>
              </div>
              <div className={styles.progressText}>
                <span>Subiendo y verificando archivo... {progress}%</span>
                {statusMessage && <p className={styles.statusText}>{statusMessage}</p>}
              </div>
            </div>
          )}

          {/* Action buttons */}
          <div className={styles.actions}>
            <button 
              onClick={handleUpload} 
              disabled={!file || isUploading} 
              className={styles.btnPrimary}
              id="btn-submit-upload"
            >
              Procesar Archivo
            </button>
            {file && !isUploading && (
              <button 
                onClick={() => { setFile(null); setSuccessData(null); setValidationErrors([]); setGeneralError(null); }} 
                className={styles.btnSecondary}
                id="btn-clear-file"
              >
                Limpiar
              </button>
            )}
          </div>

          {/* Successful Import Alert */}
          {successData && (
            <div className={styles.alertSuccess} id="upload-success-msg">
              <span className={styles.alertIcon}>✓</span>
              <div>
                <strong>Carga exitosa:</strong>
                <p>Se importaron exitosamente {successData.count} registros de venta.</p>
                {successData.totalAmount !== undefined && <p>Monto consolidado: ${successData.totalAmount.toLocaleString()}</p>}
              </div>
            </div>
          )}

          {/* General Error Alert */}
          {generalError && (
            <div className={styles.alertError} id="upload-error-msg">
              <span className={styles.alertIcon}>⚠️</span>
              <div>
                <strong>Inconsistencia detectada:</strong>
                <p>{generalError}</p>
              </div>
            </div>
          )}

          {/* Row-Level Inconsistency Panel */}
          {validationErrors.length > 0 && (
            <div className={styles.inconsistencyContainer} id="inconsistency-panel">
              <h3 className={styles.inconsistencyTitle}>Detalle de Inconsistencias en las Filas</h3>
              <div className={styles.tableWrapper}>
                <table className={styles.inconsistencyTable}>
                  <thead>
                    <tr>
                      <th>Fila</th>
                      <th>Columna</th>
                      <th>Valor Leído</th>
                      <th>Detalle del Error</th>
                    </tr>
                  </thead>
                  <tbody>
                    {validationErrors.map((err, idx) => (
                      <tr key={idx} className={styles.inconsistencyRow}>
                        <td className={styles.cellRow}>Fila {err.row}</td>
                        <td className={styles.cellCol}>{err.column}</td>
                        <td className={styles.cellVal}><code>{String(err.value || '')}</code></td>
                        <td className={styles.cellMsg}>{translate(err.code, err.metadata, err.value)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

        </div>
      </main>
    </div>
  );
}
