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 } from 'lucide-react';

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

interface ImportInput {
  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;
}

export const ImportData: React.FC = () => {
  const { token } = useAuth();
  const [data, setData] = useState<ImportInput[]>([]);
  const [preview, setPreview] = useState<ImportInput[]>([]);
  const [filename, setFilename] = useState<string>("");
  const [isLoading, setIsLoading] = useState(false);
  const [result, setResult] = useState<{ success: number; errors: string[] } | null>(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[][];

      // Assuming header is row 0
      // Map columns based on index (A=0, B=1, ... J=9) based on screenshot
      const mappedData: ImportInput[] = [];
      // 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 safely
        const getStr = (idx: number) => row[idx] ? String(row[idx]).trim() : "";
        
        // Skip empty FOT lines?
        const fot = getStr(0);
        if (!fot) continue;

        // Parse Gastos (Remove 'R$', replace ',' with '.')
        let gastosStr = getStr(8); // Col I
        // Remove R$, spaces, thousands separator (.) and replace decimal (,) with .
        // Example: "R$ 2.500,00" -> "2500.00"
        gastosStr = gastosStr.replace(/[R$\s.]/g, '').replace(',', '.');
        const gastos = parseFloat(gastosStr) || 0;

        const importItem: ImportInput = {
          fot: fot,
          empresa_nome: getStr(1), // Col B
          curso_nome: getStr(2),   // Col C
          observacoes: getStr(3),  // Col D
          instituicao: getStr(4),  // Col E
          ano_formatura_label: getStr(5), // Col F
          cidade: getStr(6),       // Col G
          estado: getStr(7),       // Col H
          gastos_captacao: gastos, // Col I
          pre_venda: getStr(9).toLowerCase().includes('sim'), // Col J
        };
        mappedData.push(importItem);
      }
      setData(mappedData);
      setPreview(mappedData.slice(0, 5));
      setResult(null);
    };
    reader.readAsBinaryString(file);
  };

  const handleImport = async () => {
    if (!token) return;
    setIsLoading(true);
    try {
      const response = await fetch(`${API_BASE_URL}/api/import/fot`, {
        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();
      setResult({
        success: resData.SuccessCount,
        errors: resData.Errors || []
      });
      // Clear data on success? Maybe keep for review.
    } 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; // Scroll-fast
    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 (FOT)</h1>
          <p className="mt-2 text-gray-600">
            Importe dados da planilha Excel para o sistema. Certifique-se que as colunas seguem o padrão.
          </p>
          <div className="mt-2 text-sm text-gray-500 bg-blue-50 p-4 rounded-md">
            <strong>Colunas Esperadas (A-J):</strong> FOT, Empresa, Curso, Observações, Instituição, Ano Formatura, Cidade, Estado, Gastos Captação, Pré Venda.
          </div>
        </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</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>
            
            {/* Scrollable Container with Drag Support */}
            <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>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">FOT</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Empresa</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Curso</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Instituição</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Ano</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Cidade/UF</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Gastos</th>
                    <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Pré Venda</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">
                      <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">{row.cidade}/{row.estado}</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 text-gray-500">{row.pre_venda ? 'Sim' : 'Não'}</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([]); setPreview([]); setResult(null); setFilename(""); }}>
                 Importar Novo Arquivo
               </Button>
             </div>
           </div>
        )}
      </div>
    </div>
  );
};