import React, { useState } from 'react';
import * as XLSX from 'xlsx';
import { useAuth } from '../contexts/AuthContext';
import { Button } from '../components/Button';
import { Upload, FileText, CheckCircle, AlertTriangle, Calendar, Database } from 'lucide-react';

const API_BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:8080";

type ImportType = 'fot' | 'agenda';

interface ImportFotInput {
  fot: string;
  empresa_nome: string;
  curso_nome: string;
  ano_formatura_label: string;
  instituicao: string;
  cidade: string;
  estado: string;
  observacoes: string;
  gastos_captacao: number;
  pre_venda: boolean;
}

interface ImportAgendaInput {
  fot: string;
  data: string;
  tipo_evento: string;
  observacoes: string;
  local: string;
  endereco: string;
  horario: string;
  qtd_formandos: number;
  qtd_fotografos: number;
  qtd_cinegrafistas: number;
  qtd_recepcionistas: number;
  qtd_estudios: number;
  qtd_ponto_foto: number;
  qtd_ponto_id: number;
  qtd_ponto_decorado: number;
  qtd_pontos_led: number;
  qtd_plataforma_360: number;
  foto_faltante: number;
  recep_faltante: number;
  cine_faltante: number;
  logistica_observacoes: string;
  pre_venda: boolean;
}

export const ImportData: React.FC = () => {
  const { token } = useAuth();
  const [activeTab, setActiveTab] = useState<ImportType>('fot');
  
  // Generic data state (can be Fot or Agenda)
  const [data, setData] = useState<any[]>([]);
  const [filename, setFilename] = useState<string>("");
  const [isLoading, setIsLoading] = useState(false);
  const [result, setResult] = useState<{ success: number; errors: string[] } | null>(null);

  // Clear data when switching tabs
  const handleTabChange = (tab: ImportType) => {
      if (tab !== activeTab) {
          setActiveTab(tab);
          setData([]);
          setFilename("");
          setResult(null);
      }
  };

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setFilename(file.name);
    const reader = new FileReader();
    reader.onload = (evt) => {
      const bstr = evt.target?.result;
      const wb = XLSX.read(bstr, { type: 'binary' });
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      const jsonData = XLSX.utils.sheet_to_json(ws, { header: 1 }) as any[][];

      let mappedData: any[] = [];
      
      // Start from row 1 (skip header)
      for (let i = 1; i < jsonData.length; i++) {
        const row = jsonData[i];
        if (!row || row.length === 0) continue;

        // Helper to get string
        const getStr = (idx: number) => row[idx] ? String(row[idx]).trim() : "";
        // Helper to get int
        const getInt = (idx: number) => {
            const val = row[idx];
            if (!val) return 0;
            if (typeof val === 'number') return Math.floor(val);
            const parsed = parseInt(String(val).replace(/\D/g, ''), 10);
            return isNaN(parsed) ? 0 : parsed;
        };

        const fot = getStr(0);
        if (!fot) continue;

        if (activeTab === 'fot') {
            // Parse Gastos
            let gastosStr = getStr(8);
            gastosStr = gastosStr.replace(/[R$\s.]/g, '').replace(',', '.');
            const gastos = parseFloat(gastosStr) || 0;

            const item: ImportFotInput = {
              fot: fot,
              empresa_nome: getStr(1),
              curso_nome: getStr(2),
              observacoes: getStr(3),
              instituicao: getStr(4),
              ano_formatura_label: getStr(5),
              cidade: getStr(6),
              estado: getStr(7),
              gastos_captacao: gastos,
              pre_venda: getStr(9).toLowerCase().includes('sim'),
            };
            mappedData.push(item);

        } else if (activeTab === 'agenda') {
            // Agenda Parsing
            // A: FOT (0)
            // B: Data (1) - Excel often stores dates as numbers. Need formatting helper?
            // If cell.t is 'n', use XLSX.SSF? Or XLSX.utils.sheet_to_json with raw: false might help but header:1 is safer.
            // If using header:1, date might be number (days since 1900) or string.
            // Let's assume text for simplicity or basic number check.
            let dateStr = getStr(1);
            if (typeof row[1] === 'number') {
                // Approximate JS Date
                const dateObj = new Date(Math.round((row[1] - 25569)*86400*1000));
                // Convert to DD/MM/YYYY
                dateStr = dateObj.toLocaleDateString('pt-BR');
            }

            const item: ImportAgendaInput = {
                fot: fot,
                data: dateStr,
                tipo_evento: getStr(7), // H
                observacoes: getStr(8), // I
                local: getStr(9), // J
                endereco: getStr(10), // K
                horario: getStr(11), // L
                qtd_formandos: getInt(12), // M
                qtd_fotografos: getInt(13), // N
                qtd_cinegrafistas: getInt(14), // O
                qtd_estudios: getInt(15), // P (Assumed Estufio?) Screenshot check: Col P header unreadable? "estúdio"?
                qtd_recepcionistas: getInt(22) > 0 ? getInt(22) : 0, // Wait, where is recep?
                // Look at screenshot headers:
                // M: Formandos
                // N: fotografo
                // O: cinegrafista / cinegrafista
                // P: estúdio
                // Q: ponto de foto
                // R: ponto de ID
                // S: Ponto
                // T: pontos Led
                // U: plataforma 360
                // W: Profissionais Ok?
                // Recp missing? Maybe column V?
                // Or maybe Recepcionistas are implied in "Profissionais"?
                // Let's assume 0 for now unless we find columns.
                // Wait, screenshot shows icons.
                // X: Camera icon (Falta Foto)
                // Y: Woman icon (Falta Recep) -> so Recep info exists?
                // Maybe "Recepcionistas" is column ? 
                // Let's stick to what we see.
                
                qtd_ponto_foto: getInt(16), // Q
                qtd_ponto_id: getInt(17), // R
                qtd_ponto_decorado: getInt(18), // S
                qtd_pontos_led: getInt(19), // T
                qtd_plataforma_360: getInt(20), // U
                
                // Falta
                foto_faltante: parseInt(row[23]) || 0, // X (Allow negative)
                recep_faltante: parseInt(row[24]) || 0, // Y
                cine_faltante: parseInt(row[25]) || 0, // Z
                
                logistica_observacoes: getStr(26), // AA
                pre_venda: getStr(27).toLowerCase().includes('sim'), // AB
            };
            mappedData.push(item);
        }
      }
      setData(mappedData);
      setResult(null);
    };
    reader.readAsBinaryString(file);
  };

  const handleImport = async () => {
    if (!token) return;
    setIsLoading(true);
    try {
      const endpoint = activeTab === 'fot' ? '/api/import/fot' : '/api/import/agenda';
      const response = await fetch(`${API_BASE_URL}${endpoint}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${token}`
        },
        body: JSON.stringify(data)
      });

      if (!response.ok) {
        throw new Error(`Erro na importação: ${response.statusText}`);
      }

      const resData = await response.json();
      // Agenda response might be different?
      // Fot response: {SuccessCount, Errors}.
      // Agenda response: {message}. I should unifiy or handle both.
      
      if (resData.message) {
         setResult({ success: data.length, errors: [] }); // Assume all success if message only
      } else {
         setResult({
            success: resData.SuccessCount,
            errors: resData.Errors || []
         });
      }
    } catch (error) {
      console.error("Import error:", error);
      alert("Erro ao importar dados. Verifique o console.");
    } finally {
      setIsLoading(false);
    }
  };

  // Drag scroll logic
  const tableContainerRef = React.useRef<HTMLDivElement>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [startX, setStartX] = useState(0);
  const [scrollLeft, setScrollLeft] = useState(0);

  const handleMouseDown = (e: React.MouseEvent) => {
    if (!tableContainerRef.current) return;
    setIsDragging(true);
    setStartX(e.pageX - tableContainerRef.current.offsetLeft);
    setScrollLeft(tableContainerRef.current.scrollLeft);
  };
  const handleMouseLeave = () => { setIsDragging(false); };
  const handleMouseUp = () => { setIsDragging(false); };
  const handleMouseMove = (e: React.MouseEvent) => {
    if (!isDragging || !tableContainerRef.current) return;
    e.preventDefault();
    const x = e.pageX - tableContainerRef.current.offsetLeft;
    const walk = (x - startX) * 2;
    tableContainerRef.current.scrollLeft = scrollLeft - walk;
  };

  return (
    <div className="min-h-screen bg-gray-50 pt-20 pb-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto space-y-8">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Importação de Dados</h1>
          <p className="mt-2 text-gray-600">
            Carregue planilhas do Excel para alimentar o sistema.
          </p>
        </div>

        {/* Tabs */}
        <div className="border-b border-gray-200">
          <nav className="-mb-px flex space-x-8" aria-label="Tabs">
            <button
              onClick={() => handleTabChange('fot')}
              className={`${
                activeTab === 'fot'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              } whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2`}
            >
              <Database className="w-4 h-4" />
              Cadastro FOT
            </button>
            <button
              onClick={() => handleTabChange('agenda')}
              className={`${
                activeTab === 'agenda'
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              } whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2`}
            >
              <Calendar className="w-4 h-4" />
              Agenda de Eventos
            </button>
          </nav>
        </div>

        {/* Info Box */}
        <div className="mt-2 text-sm text-gray-500 bg-blue-50 p-4 rounded-md">
            {activeTab === 'fot' ? (
                <strong>Colunas Esperadas (A-J):</strong> 
            ) : (
                <strong>Colunas Esperadas (A-AB):</strong>
            )}
             &nbsp;
            {activeTab === 'fot' 
                ? "FOT, Empresa, Curso, Observações, Instituição, Ano Formatura, Cidade, Estado, Gastos Captação, Pré Venda."
                : "FOT, Data, ..., Tipo Evento, Obs, Local, Endereço, Horário, Qtds (Formandos, Foto, Cine...), Faltantes, Logística."
            }
        </div>

        <div className="bg-white p-6 rounded-lg shadow space-y-4">
          <div className="flex items-center justify-center w-full">
            <label htmlFor="dropzone-file" className="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
              <div className="flex flex-col items-center justify-center pt-5 pb-6">
                <Upload className="w-8 h-8 mb-3 text-gray-400" />
                <p className="mb-2 text-sm text-gray-500"><span className="font-semibold">Clique para enviar</span> ou arraste o arquivo</p>
                <p className="text-xs text-gray-500">XLSX, XLS (Excel)</p>
              </div>
              <input id="dropzone-file" type="file" className="hidden" accept=".xlsx, .xls" onChange={handleFileUpload} />
            </label>
          </div>
          {filename && (
            <div className="flex items-center gap-2 text-sm text-gray-700">
              <FileText className="w-4 h-4" />
              Arquivo selecionado: <span className="font-medium">{filename}</span> ({data.length} registros)
            </div>
          )}
        </div>

        {data.length > 0 && !result && (
          <div className="bg-white rounded-lg shadow overflow-hidden flex flex-col">
            <div className="px-6 py-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center flex-wrap gap-2">
              <div className="flex items-center gap-2">
                 <h3 className="text-lg font-medium text-gray-900">Pré-visualização ({activeTab === 'fot' ? 'FOT' : 'Agenda'})</h3>
                 <span className="text-sm font-semibold bg-gray-200 px-2 py-1 rounded-full text-gray-700">Total: {data.length}</span>
              </div>
               <Button onClick={handleImport} isLoading={isLoading}>
                 Confirmar Importação
               </Button>
            </div>
            
            <div 
                ref={tableContainerRef}
                className={`overflow-auto max-h-[600px] border-b border-gray-200 ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
                onMouseDown={handleMouseDown}
                onMouseLeave={handleMouseLeave}
                onMouseUp={handleMouseUp}
                onMouseMove={handleMouseMove}
            >
              <table className="min-w-full divide-y divide-gray-200 relative">
                <thead className="bg-gray-50 sticky top-0 z-10 shadow-sm">
                  <tr>
                    {activeTab === 'fot' ? (
                        <>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">FOT</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Empresa</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Curso</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Instituição</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Ano</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Gastos</th>
                        </>
                    ) : (
                        <>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">FOT</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Data</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Evento</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Local</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Horário</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Formandos</th>
                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Logística</th>
                        </>
                    )}
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {data.map((row, idx) => (
                    <tr key={idx} className="hover:bg-gray-50 transition-colors">
                        {activeTab === 'fot' ? (
                            <>
                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{row.fot}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{row.empresa_nome}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{row.curso_nome}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{row.instituicao}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{row.ano_formatura_label}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ {row.gastos_captacao?.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}</td>
                            </>
                        ) : (
                            <>
                                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{row.fot}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{row.data}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{row.tipo_evento}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{row.local}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{row.horario}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{row.qtd_formandos}</td>
                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 truncate max-w-xs">{row.logistica_observacoes}</td>
                            </>
                        )}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
             <div className="px-6 py-4 border-t border-gray-200 bg-gray-50 text-right">
                <span className="text-sm font-semibold text-gray-700">Total de Registros: {data.length}</span>
            </div>
          </div>
        )}

        {result && (
           <div className={`p-4 rounded-md ${result.errors.length > 0 ? 'bg-yellow-50' : 'bg-green-50'}`}>
             <div className="flex items-center mb-2">
               {result.errors.length === 0 ? (
                 <CheckCircle className="w-6 h-6 text-green-500 mr-2" />
               ) : (
                 <AlertTriangle className="w-6 h-6 text-yellow-500 mr-2" />
               )}
               <h3 className="text-lg font-medium text-gray-900">Resultado da Importação</h3>
             </div>
             <p className="text-sm text-gray-700 mb-2">
               Sucesso: <strong>{result.success}</strong> registros importados/atualizados.
             </p>
             {result.errors.length > 0 && (
                <div className="mt-2">
                  <p className="text-sm font-bold text-red-600 mb-1">Erros ({result.errors.length}):</p>
                  <ul className="list-disc pl-5 text-xs text-red-600 max-h-40 overflow-y-auto">
                    {result.errors.map((err, idx) => (
                      <li key={idx}>{err}</li>
                    ))}
                  </ul>
                </div>
             )}
             <div className="mt-4">
               <Button variant="outline" onClick={() => { setData([]); setResult(null); setFilename(""); }}>
                 Importar Novo Arquivo
               </Button>
             </div>
           </div>
        )}
      </div>
    </div>
  );
};