import React, { useState, useEffect, useRef } from "react";
import {
  Download,
  Plus,
  ArrowUpDown,
  ArrowUp,
  ArrowDown,
  X,
  AlertCircle,
  Search,
  Upload,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

interface FinancialTransaction {
  id: string;
  fot: number;
  fot_id?: string; // Add fot_id
  data: string; // date string YYYY-MM-DD
  dataRaw?: string; // Optional raw date for editing
  curso: string;
  instituicao: string;
  anoFormatura: number; // or string label
  empresa: string;
  tipoEvento: string;
  tipoServico: string;
  nome: string; // professional_name
  endereco?: string; // Not in DB schema but in UI? Schema doesn't have address. We'll omit or map if needed.
  whatsapp: string;
  cpf: string;
  tabelaFree: string;
  valorFree: number;
  valorExtra: number;
  descricaoExtra: string;
  totalPagar: number;
  dataPgto: string; // date string
  pgtoOk: boolean;
}

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

const Finance: React.FC = () => {
  const navigate = useNavigate();
  const [transactions, setTransactions] = useState<FinancialTransaction[]>([]);
  const [showAddModal, setShowAddModal] = useState(false);
  const [showEditModal, setShowEditModal] = useState(false);
  const [successMessage, setSuccessMessage] = useState(""); // Success message state
  const [selectedTransaction, setSelectedTransaction] =
    useState<FinancialTransaction | null>(null);
  const [sortConfig, setSortConfig] = useState<{
    key: keyof FinancialTransaction;
    direction: "asc" | "desc";
  } | null>(null);

  // API Data States
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [tiposEventos, setTiposEventos] = useState<any[]>([]);
  const [tiposServicos, setTiposServicos] = useState<any[]>([]);
  
  // Filters State (Moved up)
  const [filters, setFilters] = useState({
    fot: "",
    data: "",
    evento: "",
    servico: "",
    nome: "",
    status: "",
    curso: "",
    instituicao: "",
    ano: "",
    empresa: "",
  });
  
  // Pagination State
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(50);
  const [total, setTotal] = useState(0);

  // Scroll Sync Refs
  const topScrollRef = useRef<HTMLDivElement>(null);
  const tableScrollRef = useRef<HTMLDivElement>(null);

  const handleScroll = (source: 'top' | 'table') => {
      if (source === 'top' && topScrollRef.current && tableScrollRef.current) {
          tableScrollRef.current.scrollLeft = topScrollRef.current.scrollLeft;
      } else if (source === 'table' && topScrollRef.current && tableScrollRef.current) {
          topScrollRef.current.scrollLeft = tableScrollRef.current.scrollLeft;
      }
  };

  // Form State
  const [formData, setFormData] = useState<Partial<FinancialTransaction>>({
    fot: 0,
    data: new Date().toISOString().split("T")[0],
    curso: "",
    instituicao: "",
    anoFormatura: new Date().getFullYear(),
    empresa: "",
    tipoEvento: "",
    tipoServico: "",
    nome: "",
    whatsapp: "",
    cpf: "",
    tabelaFree: "",
    valorFree: 0,
    valorExtra: 0,
    descricaoExtra: "",
    totalPagar: 0,
    dataPgto: "",
    pgtoOk: false,
  });
  
  const isEditInitializing = useRef(false);

  // Auto-fill state
  const [fotLoading, setFotLoading] = useState(false);
  const [fotFound, setFotFound] = useState(false);
  const [fotEvents, setFotEvents] = useState<any[]>([]); // New state
  const [showEventSelector, setShowEventSelector] = useState(false);
  // FOT Search State
  const [fotQuery, setFotQuery] = useState("");
  const [fotResults, setFotResults] = useState<any[]>([]);
  const [showFotSuggestions, setShowFotSuggestions] = useState(false);

  // Professional Search State
  const [proQuery, setProQuery] = useState("");
  const [proResults, setProResults] = useState<any[]>([]);
  const [showProSuggestions, setShowProSuggestions] = useState(false);
  const [proFunctions, setProFunctions] = useState<any[]>([]); // Functions of selected professional
  const [selectedProId, setSelectedProId] = useState<string | null>(null);

  // Bulk Edit State
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [showBulkEditModal, setShowBulkEditModal] = useState(false);
  const [bulkFormData, setBulkFormData] = useState({
      valorExtra: 0,
      descricaoExtra: "",
  });

  // Validations
  const validateCpf = (cpf: string) => {
    // Simple length check for now, can be enhanced
    return cpf.replace(/\D/g, "").length === 11;
  };

  const loadTransactions = async () => {
    const token = localStorage.getItem("token");
    if (!token) {
        setError("Usuário não autenticado");
        return;
    }

    setLoading(true);
    try {
      const queryParams = new URLSearchParams({
          page: page.toString(),
          limit: limit.toString(),
          fot: filters.fot || "",
          data: filters.data || "",
          evento: filters.evento || "",
          servico: filters.servico || "",
          nome: filters.nome || "",
          curso: filters.curso || "",
          instituicao: filters.instituicao || "",
          ano: filters.ano || "",
          empresa: filters.empresa || "",
          
          // Send Date Filters to Backend
          startDate: dateFilters.startDate || "",
          endDate: dateFilters.endDate || "",
          includeWeekends: String(dateFilters.includeWeekends),
      });

      const res = await fetch(`${API_BASE_URL}/api/finance?${queryParams.toString()}`, {
          headers: {
              "Authorization": `Bearer ${token}`,
              "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
          }
      });
      if (res.status === 401) throw new Error("Não autorizado");
      if (!res.ok) throw new Error("Falha ao carregar transações");
      const result = await res.json();
      
      const data = result.data || result; // Fallback if API returns array (e.g. filtered by FOT)
      const count = result.total || data.length;
      setTotal(count);

      // Map Backend DTO to Frontend Interface
      const mapped = (Array.isArray(data) ? data : []).map((item: any) => ({
        id: item.id,
        fot: item.fot_numero || 0,
        fot_id: item.fot_id, // Ensure fot_id is mapped!
        data: item.data_cobranca ? new Date(item.data_cobranca).toLocaleDateString("pt-BR", {timeZone: "UTC"}) : "",
        dataRaw: item.data_cobranca ? item.data_cobranca.split("T")[0] : "", 
        curso: item.curso_nome || "", 
        instituicao: item.instituicao_nome || "", 
        anoFormatura: item.ano_formatura || "",
        empresa: item.empresa_nome || "", 
        tipoEvento: item.tipo_evento,
        tipoServico: item.tipo_servico,
        nome: item.professional_name,
        whatsapp: item.whatsapp,
        cpf: item.cpf,
        tabelaFree: item.tabela_free,
        valorFree: parseFloat(item.valor_free),
        valorExtra: parseFloat(item.valor_extra),
        descricaoExtra: item.descricao_extra,
        totalPagar: parseFloat(item.total_pagar),
        dataPgto: item.data_pagamento ? item.data_pagamento.split("T")[0] : "",
        pgtoOk: item.pgto_ok,
      }));
       setTransactions(mapped);
    } catch (err) {
      console.error(err);
      setError("Erro ao carregar dados.");
    } finally {
      setLoading(false);
    }
  };

  const loadAuxiliaryData = async () => {
    const token = localStorage.getItem("token");
    if (!token) return;

    try {
      const headers = { 
          "Authorization": `Bearer ${token}`,
          "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
      };
      const [evRes, servRes] = await Promise.all([
        fetch(`${API_BASE_URL}/api/tipos-eventos`, { headers }),
        fetch(`${API_BASE_URL}/api/tipos-servicos`, { headers }),
      ]);
      if (evRes.ok) setTiposEventos(await evRes.json());
      if (servRes.ok) setTiposServicos(await servRes.json());
    } catch (e) {
      console.error(e);
    }
  };

  useEffect(() => {
    loadTransactions();
    loadAuxiliaryData();
  }, [page, limit]); // Refresh on page/limit change
  


  // Advanced date filters
  const [dateFilters, setDateFilters] = useState({
      startDate: "",
      endDate: "",
      includeWeekends: true,
  });
  const [showDateFilters, setShowDateFilters] = useState(false);

  // Debounce filter changes
  useEffect(() => {
      const timer = setTimeout(() => {
          setPage(1); // Reset to page 1 on filter change
          loadTransactions();
      }, 500);
      return () => clearTimeout(timer);
  }, [filters, dateFilters]);

  // Calculate filtered and sorted transactions
  const sortedTransactions = React.useMemo(() => {
    let result = [...transactions];

    // 1. Filter
    // Filters are handled by Backend
    // if (filters.fot) result = result.filter(t => String(t.fot).includes(filters.fot));
    // if (filters.data) result = result.filter(t => t.data.includes(filters.data));
    // if (filters.evento) result = result.filter(t => t.tipoEvento.toLowerCase().includes(filters.evento.toLowerCase()));
    // if (filters.servico) result = result.filter(t => t.tipoServico.toLowerCase().includes(filters.servico.toLowerCase()));
    // if (filters.nome) result = result.filter(t => t.nome.toLowerCase().includes(filters.nome.toLowerCase()));
    // if (filters.curso) result = result.filter(t => t.curso.toLowerCase().includes(filters.curso.toLowerCase()));
    // if (filters.instituicao) result = result.filter(t => t.instituicao.toLowerCase().includes(filters.instituicao.toLowerCase()));
    // if (filters.ano) result = result.filter(t => String(t.anoFormatura).includes(filters.ano));
    // if (filters.empresa) result = result.filter(t => t.empresa.toLowerCase().includes(filters.empresa.toLowerCase()));
    // if (filters.status) {
    //     const s = filters.status.toLowerCase();
    //     if (s === 'ok' || s === 'sim') result = result.filter(t => t.pgtoOk);
    //     if (s === 'no' || s === 'nao' || s === 'não') result = result.filter(t => !t.pgtoOk);
    // }

    // Advanced date filters
    // Advanced date filters - Handled by Backend now
    // if (dateFilters.startDate || dateFilters.endDate || !dateFilters.includeWeekends) {
    //    // ... filtering logic removed ...
    // }

    // Advanced date filters - Custom Logic
    // Advanced date filters - Custom Logic (Removed)
    // if (dateFilters.startDate || dateFilters.endDate || !dateFilters.includeWeekends) { ... }
    
    // Applying filtered logic reuse
    // ... code kept essentially same ...


    // 2. Sort by FOT (desc) then Date (desc) to group FOTs
    // Default sort is grouped by FOT
    if (!sortConfig) {
        return result.sort((a, b) => {
            // Group by Professional Name if Date Filters are active
            if (dateFilters.startDate || dateFilters.endDate) {
                 const nameA = String(a.nome || "").toLowerCase();
                 const nameB = String(b.nome || "").toLowerCase();
                 if (nameA !== nameB) return nameA.localeCompare(nameB);
                 
                 // Secondary sort by date within the same professional
                 return new Date(a.dataRaw || a.data).getTime() - new Date(b.dataRaw || b.data).getTime();
            }

            // Default Group by FOT (String comparison to handle "20000MG")
            const fotA = String(a.fot || "");
            const fotB = String(b.fot || "");
            if (fotA !== fotB) return fotB.localeCompare(fotA, undefined, { numeric: true });
            
            // Secondary: Date
            return new Date(b.dataRaw || b.data).getTime() - new Date(a.dataRaw || a.data).getTime();
        });
    }

    // Custom sort if implemented
    return result.sort((a, b) => {
        // @ts-ignore
        const aValue = a[sortConfig.key]; 
        // @ts-ignore
        const bValue = b[sortConfig.key];

        // String comparison for specific text fields
        if (['nome', 'instituicao', 'curso', 'empresa', 'tipoEvento', 'tipoServico'].includes(sortConfig.key)) {
             const strA = String(aValue || "").toLowerCase();
             const strB = String(bValue || "").toLowerCase();
             if (strA < strB) return sortConfig.direction === "asc" ? -1 : 1;
             if (strA > strB) return sortConfig.direction === "asc" ? 1 : -1;
             return 0;
        }

        // Default comparison (numbers, booleans)
        if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1;
        if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1;
        return 0;
    });
  }, [transactions, filters, sortConfig, dateFilters]);


  const handleSort = (key: keyof FinancialTransaction) => {
    let direction: "asc" | "desc" = "asc";
    if (sortConfig && sortConfig.key === key && sortConfig.direction === "asc") {
      direction = "desc";
    }
    setSortConfig({ key, direction });
  };

  const handleFotSearch = async (query: string) => {
      setFotQuery(query);
      
      // If user types numbers, list options
      if (query.length < 2) {
          setFotResults([]);
          setShowFotSuggestions(false);
          return;
      }
      
      const token = localStorage.getItem("token");
      try {
          const res = await fetch(`${API_BASE_URL}/api/finance/fot-search?q=${query}`, {
               headers: { 
                   "Authorization": `Bearer ${token}`,
                   "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
               }
          });
          if(res.ok) {
              const data = await res.json();
              setFotResults(data);
              setShowFotSuggestions(true);
          }
      } catch (e) {
          console.error(e);
      }
  };

  const selectFot = (fot: any) => {
      setFotQuery(String(fot.fot));
      setShowFotSuggestions(false);
      handleAutoFill(fot.fot);
  };

  const handleAutoFill = async (fotNum: number) => {
      if (!fotNum) return;

      const token = localStorage.getItem("token");
      if (!token) return;

      setFotLoading(true);
      setFotEvents([]);
      setShowEventSelector(false);
      try {
          const res = await fetch(`${API_BASE_URL}/api/finance/autofill?fot=${fotNum}`, {
              headers: { 
                  "Authorization": `Bearer ${token}`,
                  "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
              }
          });
          if (res.ok) {
              const data = await res.json();
              setFormData(prev => ({
                  ...prev,
                  curso: data.curso_nome,
                  instituicao: data.empresa_nome,
                  empresa: data.empresa_nome,
                  anoFormatura: data.ano_formatura_label, 
                  fot: fotNum,
              }));
              setFotFound(true);
               // @ts-ignore
              const fotId = data.id;
              setFormData(prev => ({ ...prev, fot_id: fotId }));
              setFotQuery(String(fotNum)); // Ensure query matches found fot
              
              // Now fetch events
              const evRes = await fetch(`${API_BASE_URL}/api/finance/fot-events?fot_id=${fotId}`, {
                  headers: { 
                      "Authorization": `Bearer ${token}`,
                      "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
                  }
              });
              if (evRes.ok) {
                  const events = await evRes.json();
                  if (events && events.length > 0) {
                      setFotEvents(events);
                      setShowEventSelector(true);
                  }
              }

          } else {
              setFotFound(false);
          }
      } catch (error) {
          console.error(error);
          setFotFound(false);
      } finally {
          setFotLoading(false);
      }
  };



  const handleProSearch = async (query: string) => {
      setProQuery(query);
      setFormData(prev => ({ ...prev, nome: query })); // Update name as typed
      
      // Allow empty query to list filtered professionals if Function is selected
      if (query.length < 3 && !formData.tipoServico) {
          setProResults([]);
          setShowProSuggestions(false);
          return;
      }
      
      const token = localStorage.getItem("token");
      try {
          const fnParam = formData.tipoServico ? `&function=${encodeURIComponent(formData.tipoServico)}` : "";
          const res = await fetch(`${API_BASE_URL}/api/finance/professionals?q=${query}${fnParam}`, {
               headers: { 
                   "Authorization": `Bearer ${token}`,
                   "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
               }
          });
          if(res.ok) {
              const data = await res.json();
              setProResults(data);
              setShowProSuggestions(true);
          }
      } catch (e) {
          console.error(e);
      }
  };

  // Bulk Selection Logic
  const toggleSelection = (id: string) => {
      const newSet = new Set(selectedIds);
      if (newSet.has(id)) {
          newSet.delete(id);
      } else {
          newSet.add(id);
      }
      setSelectedIds(newSet);
  };

  const toggleSelectAll = () => {
      if (selectedIds.size === sortedTransactions.length && sortedTransactions.length > 0) {
          setSelectedIds(new Set());
      } else {
          const newSet = new Set(sortedTransactions.map(t => t.id).filter(id => id)); // ensure valid IDs
          setSelectedIds(newSet);
      }
  };

  const handleBulkUpdate = async () => {
      if (selectedIds.size === 0) return;
      if (!confirm(`Confirma atualização de ${selectedIds.size} itens?`)) return;

      const token = localStorage.getItem("token");
      if (!token) return;

      try {
          const res = await fetch(`${API_BASE_URL}/api/finance/bulk/extras`, {
              method: "POST",
              headers: {
                  "Content-Type": "application/json",
                  "Authorization": `Bearer ${token}`,
                  "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
              },
              body: JSON.stringify({
                  ids: Array.from(selectedIds),
                  valor_extra: bulkFormData.valorExtra,
                  descricao_extra: bulkFormData.descricaoExtra
              })
          });

          if (res.ok) {
              alert("Itens atualizados com sucesso!");
              setShowBulkEditModal(false);
              setSelectedIds(new Set());
              setBulkFormData({ valorExtra: 0, descricaoExtra: "" });
              loadTransactions(); // Refresh list
          } else {
              const err = await res.json();
              alert(`Erro ao atualizar: ${err.error || "Erro desconhecido"}`);
          }
      } catch (e) {
          console.error(e);
          alert("Erro de conexão ao atualizar.");
      }
  };

  const selectProfessional = (pro: any) => {
      // Parse functions
      let funcs = [];
      try {
        funcs = pro.functions ? (typeof pro.functions === 'string' ? JSON.parse(pro.functions) : pro.functions) : [];
      } catch(e) {
        funcs = [];
      }
      setProFunctions(funcs);
      setSelectedProId(pro.id);

      setFormData(prev => ({
          ...prev,
          nome: pro.nome,
          whatsapp: pro.whatsapp,
          cpf: pro.cpf_cnpj_titular,
          // Default to first function if available, else empty
          tabelaFree: funcs.length > 0 ? funcs[0].nome : "", 
      }));
      setProQuery(pro.nome);
      setShowProSuggestions(false);
  };

  const selectEvent = (ev: any) => {
      setFormData(prev => ({
          ...prev,
          tipoEvento: ev.tipo_evento_nome,
          data: ev.data_evento ? ev.data_evento.split("T")[0] : prev.data,
      }));
      setShowEventSelector(false);
  };

  const handleEdit = async (t: FinancialTransaction) => {
    isEditInitializing.current = true;
    setSelectedTransaction(t);
    setFormData({
        id: t.id,
        fot_id: t.fot_id, 
        data: t.dataRaw || t.data, // Use raw YYYY-MM-DD for input
        tipoEvento: t.tipoEvento,
        tipoServico: t.tipoServico,
        nome: t.nome,
        whatsapp: t.whatsapp,
        cpf: t.cpf,
        tabelaFree: t.tabelaFree,
        valorFree: t.valorFree ?? t.totalPagar, // Use Total as fallback if Free is null (legacy/auto records)
        valorExtra: t.valorExtra,
        descricaoExtra: t.descricaoExtra,
        dataPgto: t.dataPgto,
        pgtoOk: t.pgtoOk,
        totalPagar: t.totalPagar,
    });
    setFotFound(false); // Reset fotFound state for edit modal

    // Fetch FOT details if ID exists
    if (t.fot_id) {
        const token = localStorage.getItem("token");
        if (!token) return;
        try {
            const res = await fetch(`${API_BASE_URL}/api/cadastro-fot/${t.fot_id}`, {
                headers: { 
                    "Authorization": `Bearer ${token}`,
                    "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
                }
            });
            if (res.ok) {
                const data = await res.json();
                setFormData(prev => ({
                    ...prev,
                    curso: data.curso_nome || "",
                    instituicao: data.empresa_nome || data.instituicao || "",
                    empresa: data.empresa_nome || "",
                    anoFormatura: data.ano_formatura_label || "",
                    fot: data.fot,
                }));
                // Update the search query state too
                setFotQuery(String(data.fot));
                setFotFound(true);
            }
        } catch (err) {
            console.error("Error fetching FOT details for edit:", err);
        }
    } else if (t.fot) {
        // Fallback if no ID but we have the number (Legacy records)
        setFotQuery(String(t.fot));
        handleAutoFill(t.fot); // Fetch details using FOT number
    }

    // Fetch professional functions if professional name is present
    if (t.nome) {
        const token = localStorage.getItem("token");
        if (!token) return;
        try {
            const res = await fetch(`${API_BASE_URL}/api/finance/professionals?q=${encodeURIComponent(t.nome)}`, {
                headers: { 
                    "Authorization": `Bearer ${token}`,
                    "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
                }
            });
            if (res.ok) {
                const data = await res.json();
                const professional = data.find((p: any) => p.nome === t.nome);
                if (professional) {
                    let funcs = [];
                    try {
                        funcs = professional.functions ? (typeof professional.functions === 'string' ? JSON.parse(professional.functions) : professional.functions) : [];
                    } catch(e) {
                        funcs = [];
                    }
                    setProFunctions(funcs);
                }
            }
        } catch (err) {
            console.error("Error fetching professional functions for edit:", err);
        }
    }

    setShowEditModal(true);
  };



  const handleSmartSave = async () => {
       const token = localStorage.getItem("token");
       if (!token) { alert("Login expirado"); return; }
       
       // 1. Duplicate Check
       // Duplicate if: Same FOT + Same Name + Same Date + Same Event Type (optional)
       // Let's use FOT + Name + Date as primary key
       const isDuplicate = transactions.some(t => 
           Number(t.fot) === Number(formData.fot) &&
           t.nome.trim().toLowerCase() === (formData.nome || "").trim().toLowerCase() &&
           t.tipoEvento === formData.tipoEvento && // Event needed to distinguish pre-event vs formatura?
           (t.dataRaw === formData.data || t.data === new Date(formData.data || "").toLocaleDateString("pt-BR", {timeZone: "UTC"})) 
       );

       if (isDuplicate && !selectedTransaction) { // Only check on Create
           alert("Já existe um lançamento para este Profissional neste Evento e Data.");
           return;
       }

       // 2. Prepare Payload
       const payload = {
          fot_id: formData.fot_id,
          data_cobranca: formData.data,
          tipo_evento: formData.tipoEvento,
          tipo_servico: formData.tipoServico,
          professional_name: formData.nome,
          whatsapp: formData.whatsapp,
          cpf: formData.cpf,
          tabela_free: formData.tabelaFree,
          valor_free: formData.valorFree ? Number(formData.valorFree) : 0,
          valor_extra: formData.valorExtra ? Number(formData.valorExtra) : 0,
          descricao_extra: formData.descricaoExtra,
          total_pagar: (Number(formData.valorFree) || 0) + (Number(formData.valorExtra) || 0),
          data_pagamento: formData.dataPgto || null,
          pgto_ok: formData.pgtoOk
       };

       try {
           let res;
           if (formData.id) {
               // Edit Mode
               res = await fetch(`${API_BASE_URL}/api/finance/${formData.id}`, {
                   method: "PUT",
                   headers: { 
                       "Content-Type": "application/json", 
                       "Authorization": `Bearer ${token}`,
                       "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
                   },
                   body: JSON.stringify(payload) 
               });
           } else {
               // Create Mode
               res = await fetch(`${API_BASE_URL}/api/finance`, {
                   method: "POST",
                   headers: { 
                       "Content-Type": "application/json", 
                       "Authorization": `Bearer ${token}`,
                       "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
                   },
                   body: JSON.stringify(payload) 
               });
           }
           
           if (!res.ok) throw new Error("Erro ao salvar");

           // 3. Post-Save Logic
           if (selectedTransaction) {
               // If editing, close modal
               setShowEditModal(false);
               setSelectedTransaction(null);
               setSuccessMessage("Transação atualizada com sucesso!");
           } else {
               // If creating, KEEP OPEN and CLEAR professional data
               setSuccessMessage("Lançamento salvo! Pronto para o próximo.");
               setFormData(prev => ({
                   ...prev,
                   // Keep Event Data
                   fot: prev.fot,
                   fot_id: prev.fot_id,
                   curso: prev.curso,
                   instituicao: prev.instituicao,
                   empresa: prev.empresa,
                   anoFormatura: prev.anoFormatura,
                   data: prev.data,
                   tipoEvento: prev.tipoEvento,
                   // Clear Professional Data
                   nome: "",
                   whatsapp: "",
                   cpf: "",
                   tipoServico: "",
                   tabelaFree: "",
                   valorFree: 0,
                   valorExtra: 0,
                   descricaoExtra: "",
                   totalPagar: 0,
                   pgtoOk: false
               }));
               setProQuery("");
               setSelectedProId(null);
           }
           
           // Clear success message after 3s
           setTimeout(() => setSuccessMessage(""), 3000);
           
           // Reload list background
           await loadTransactions();

       } catch (err) {
           alert("Erro ao salvar: " + err);
       }
  };
  
  // Calculations
   // Calculations
    useEffect(() => {
     const vFree = Number(formData.valorFree) || 0;
     const vExtra = Number(formData.valorExtra) || 0;
     setFormData((prev) => ({ ...prev, totalPagar: vFree + vExtra }));
   }, [formData.valorFree, formData.valorExtra]);
 
   // Fetch Price on Event/Service/Function Change
   useEffect(() => {
     if (isEditInitializing.current) {
         isEditInitializing.current = false;
         return;
     }
 
     // Use Tabela Free (Function) if available, otherwise Tipo Servico
     const serviceParam = formData.tabelaFree || formData.tipoServico;
 
     if (!formData.tipoEvento || !serviceParam) return;
 
     const fetchPrice = async () => {
         const token = localStorage.getItem("token");
         if (!token) return;
 
         try {
             // Use the new endpoint
             const res = await fetch(`${API_BASE_URL}/api/finance/price?event=${encodeURIComponent(formData.tipoEvento!)}&service=${encodeURIComponent(serviceParam)}`, {
                 headers: { 
                     "Authorization": `Bearer ${token}`,
                     "x-regiao": localStorage.getItem("photum_selected_region") || "SP"
                 }
             });
             
             if (res.ok) {
                 const data = await res.json();
                 // Update Valor Free if different
                 // Check if data.valor is a number
                 const price = Number(data.valor);
                 if (!isNaN(price) && price !== formData.valorFree) {
                    setFormData(prev => ({ ...prev, valorFree: price }));
                 }
             }
         } catch (err) {
             console.error("Error fetching price:", err);
         }
     };
 
     // Debounce slightly or just call
     const timeoutId = setTimeout(() => {
         fetchPrice();
     }, 300);
     return () => clearTimeout(timeoutId);
 
   }, [formData.tipoEvento, formData.tipoServico, formData.tabelaFree]);

  const handleExportExcel = async () => {
    if (sortedTransactions.length === 0) {
        alert("Nenhum dado para exportar.");
        return;
    }

    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet("Extrato Financeiro");

    // Columns matching the legacy Excel sheet
    worksheet.columns = [
        { header: "", key: "fot", width: 10 },
        { header: "", key: "data", width: 12 },
        { header: "", key: "curso", width: 20 },
        { header: "", key: "instituicao", width: 20 },
        { header: "", key: "ano", width: 10 },
        { header: "", key: "empresa", width: 15 },
        { header: "", key: "evento", width: 15 },
        { header: "", key: "servico", width: 15 },
        { header: "", key: "nome", width: 25 },
        { header: "", key: "whatsapp", width: 15 },
        { header: "", key: "cpf", width: 16 },
        { header: "", key: "tabelaFree", width: 15 },
        { header: "", key: "valorFree", width: 15 },
        { header: "", key: "valorExtra", width: 15 },
        { header: "", key: "descricaoExtra", width: 40 },
        { header: "", key: "totalPagar", width: 15 },
        { header: "", key: "dataPgto", width: 12 },
        { header: "", key: "pgtoOk", width: 10 },
    ];

    // Standard Headers (Row 1 now)
    const headerRow = worksheet.addRow([
        "FOT", "Data", "Curso", "Instituição", "Ano Format.", "Empresa", "Tipo Evento", "Tipo de Serviço", 
        "Nome", "WhatsApp", "CPF", "Tabela Free", "Valor Free", "Valor Extra", 
        "Descrição do Extra", "Total a Pagar", "Data Pgto", "Pgto OK"
    ]);

    // Header Styling (Red #FF0000 based on screenshot 3)
    headerRow.eachCell((cell, colNumber) => {
        cell.fill = {
            type: 'pattern',
            pattern: 'solid',
            fgColor: { argb: 'FFFF0000' } // Red Header
        };
        cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
        
        // Even the header in the screenshot has Yellow for Total? The screenshot 3 shows pure blue/grey for table headers, let's use the standard blue that matches their columns
        // Looking at screenshot 3, the columns header is actually a light blue! "A4:R4"
        cell.fill = {
            type: 'pattern',
            pattern: 'solid',
            fgColor: { argb: 'FF9BC2E6' } // Light Blue from standard excel
        };
        cell.font = { bold: true, color: { argb: 'FF000000' }, size: 10 }; // Black text on blue

        if (worksheet.getColumn(colNumber).key === 'totalPagar') {
             cell.fill = {
                type: 'pattern',
                pattern: 'solid',
                fgColor: { argb: 'FFFFFF00' } 
            };
        }
    });

    let currentName = "";
    let groupSum = 0;

    const applyRowColor = (row: ExcelJS.Row) => {
        for (let colNumber = 1; colNumber <= 18; colNumber++) {
            const cell = row.getCell(colNumber);
            const colKey = worksheet.getColumn(colNumber).key as string;

            cell.border = {
                top: {style:'thin'},
                left: {style:'thin'},
                bottom: {style:'thin'},
                right: {style:'thin'}
            };
            cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };

            if (colKey === 'descricaoExtra' || colKey === 'nome') {
                 cell.alignment = { vertical: 'middle', horizontal: 'left', wrapText: true };
            }

            if (colKey === 'totalPagar') {
                cell.fill = {
                    type: 'pattern',
                    pattern: 'solid',
                    fgColor: { argb: 'FFFFFF00' } // Yellow column
                };
            }
            if (["valorFree", "valorExtra", "totalPagar"].includes(colKey)) {
                 cell.alignment = { vertical: 'middle', horizontal: 'right', wrapText: true };
                 cell.numFmt = '"R$" #,##0.00';
            }
        }
    };

    if (dateFilters.startDate || dateFilters.endDate) {
        sortedTransactions.forEach((t, i) => {
             const tName = t.nome || "Sem Nome";
             
             if (currentName !== "" && tName !== currentName) {
                  // Subtotal Row
                  const subRow = worksheet.addRow({
                      descricaoExtra: `SUBTOTAL ${currentName}`,
                      totalPagar: groupSum
                  });
                  subRow.font = { bold: true };
                  for (let colNumber = 1; colNumber <= 18; colNumber++) {
                      const cell = subRow.getCell(colNumber);
                      const colKey = worksheet.getColumn(colNumber).key as string;

                      cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFFFF00' } }; // Entire row yellow!
                      cell.border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'} };
                      cell.alignment = { vertical: 'middle', horizontal: 'right' };
                      if (["valorFree", "valorExtra", "totalPagar"].includes(colKey)) {
                           cell.numFmt = '"R$" #,##0.00';
                      }
                  }

                  groupSum = 0;
             }
             if (currentName === "") {
                 currentName = tName;
             }
             currentName = tName;
             groupSum += t.totalPagar;

             const row = worksheet.addRow({
                fot: t.fot,
                data: t.data,
                curso: t.curso,
                instituicao: t.instituicao,
                ano: t.anoFormatura,
                empresa: t.empresa,
                evento: t.tipoEvento,
                servico: t.tipoServico,
                nome: t.nome, 
                whatsapp: t.whatsapp,
                cpf: t.cpf,
                tabelaFree: t.tabelaFree,
                valorFree: t.valorFree,
                valorExtra: t.valorExtra,
                descricaoExtra: t.descricaoExtra,
                totalPagar: t.totalPagar,
                dataPgto: t.dataPgto,
                pgtoOk: t.pgtoOk ? "Sim" : "Não"
            });
            applyRowColor(row);

            // Final subtotal
            if (i === sortedTransactions.length - 1) {
                  const subRow = worksheet.addRow({
                      descricaoExtra: `SUBTOTAL ${currentName}`,
                      totalPagar: groupSum
                  });
                  subRow.font = { bold: true };
                  for (let colNumber = 1; colNumber <= 18; colNumber++) {
                      const cell = subRow.getCell(colNumber);
                      const colKey = worksheet.getColumn(colNumber).key as string;

                      cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFFFFF00' } };
                      cell.border = { top: {style:'thin'}, left: {style:'thin'}, bottom: {style:'thin'}, right: {style:'thin'} };
                      cell.alignment = { vertical: 'middle', horizontal: 'right' };
                      if (["valorFree", "valorExtra", "totalPagar"].includes(colKey)) {
                           cell.numFmt = '"R$" #,##0.00';
                      }
                  }
            }
        });
    } else {
        // Flat standard export without grouped subtotals if not filtering dates
        sortedTransactions.forEach(t => {
            const row = worksheet.addRow({
                fot: t.fot,
                data: t.data,
                evento: t.tipoEvento,
                servico: t.tipoServico,
                nome: t.nome, 
                whatsapp: t.whatsapp,
                cpf: t.cpf,
                curso: t.curso,
                instituicao: t.instituicao,
                ano: t.anoFormatura,
                empresa: t.empresa,
                tabelaFree: t.tabelaFree,
                valorFree: t.valorFree,
                valorExtra: t.valorExtra,
                descricaoExtra: t.descricaoExtra,
                totalPagar: t.totalPagar,
                dataPgto: t.dataPgto,
                pgtoOk: t.pgtoOk ? "Sim" : "Não"
            });
            applyRowColor(row);
        });
    }

    // Global Total Row
    const totalValue = sortedTransactions.reduce((sum, t) => sum + t.totalPagar, 0);
    const sumRow = worksheet.addRow({
        descricaoExtra: "TOTAL GERAL",
        totalPagar: totalValue
    });
    sumRow.font = { bold: true, size: 12 };
    for (let colNumber = 1; colNumber <= 18; colNumber++) {
        const cell = sumRow.getCell(colNumber);
        const colKey = worksheet.getColumn(colNumber).key as string;

        if (colKey === 'totalPagar' || colKey === 'descricaoExtra') {
            cell.fill = {
                type: 'pattern',
                pattern: 'solid',
                fgColor: { argb: 'FFFFFF00' } // Yellow
            };
            if (colKey === 'totalPagar') {
                 cell.alignment = { vertical: 'middle', horizontal: 'right' };
                 cell.numFmt = '"R$" #,##0.00';
            } else {
                 cell.alignment = { vertical: 'middle', horizontal: 'right' };
            }
        }
    }

    // Save
    let filename = "extrato_financeiro";
    if (filters.nome) {
        filename += `_${filters.nome.trim().replace(/\s+/g, '_').toLowerCase()}`;
    }
    const formatDateFilename = (isoDate: string) => {
        if (!isoDate) return "";
        const [y, m, d] = isoDate.split("-");
        return `${d}-${m}-${y}`;
    };

    if (dateFilters.startDate) {
        filename += `_de_${formatDateFilename(dateFilters.startDate)}`;
    }
    if (dateFilters.endDate) {
        filename += `_ate_${formatDateFilename(dateFilters.endDate)}`;
    }
    if (!filters.nome && !dateFilters.startDate && !dateFilters.endDate) {
        const today = new Date().toLocaleDateString("pt-BR").split("/").join("-");
        filename += `_${today}`;
    }
    filename += ".xlsx";

    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
    saveAs(blob, filename);
  };

  // Calculate Total for Display
  const filteredTotal = sortedTransactions.reduce((acc, curr) => acc + curr.totalPagar, 0);

  return (
    <div className="min-h-screen bg-gray-50 pt-20 sm:pt-24 md:pt-28 lg:pt-32 pb-8 sm:pb-12">
      <div className="max-w-[98%] mx-auto px-2">
        <div className="mb-6 flex justify-between items-center">
             <div>
               <h1 className="text-3xl font-serif font-bold text-gray-900">Extrato</h1>
               <p className="text-gray-500 text-sm">Controle financeiro e transações</p>
             </div>
             <div className="flex gap-2">
                 <button
                     onClick={handleExportExcel} 
                     className="bg-green-600 text-white px-4 py-2 rounded shadow hover:bg-green-700 transition flex items-center gap-2"
                 >
                     <Download size={18} /> Exportar Dados
                 </button>
                <button 
                   onClick={() => {
                   setFormData({ // Clear form to initial state
                    fot: 0,
                    data: new Date().toISOString().split("T")[0],
                    curso: "",
                    instituicao: "",
                    anoFormatura: new Date().getFullYear(),
                    empresa: "",
                    tipoEvento: "",
                    tipoServico: "",
                    nome: "",
                    whatsapp: "",
                    cpf: "",
                    tabelaFree: "",
                    valorFree: 0,
                    valorExtra: 0,
                    descricaoExtra: "",
                    totalPagar: 0,
                    dataPgto: "",
                    pgtoOk: false,
                   }); 
                   setFotFound(false);
                   setFotQuery(""); // Clear FOT search query
                   setFotEvents([]); // Clear found events
                   setProFunctions([]); // Clear professional functions
                   setSelectedTransaction(null); // Ensure no transaction is selected for add
                   setShowAddModal(true);
               }}
               className="bg-brand-gold text-white px-4 py-2 rounded shadow hover:bg-yellow-600 transition flex items-center gap-2">
                 <Plus size={18}/> Nova Transação
             </button>
        </div>
        </div>

        {/* Advanced Date Filters */}
        <div className="mb-4">
          <button
            onClick={() => setShowDateFilters(!showDateFilters)}
            className="text-sm text-gray-600 hover:text-gray-900 flex items-center gap-2 mb-2"
          >
            {showDateFilters ? "▼" : "▶"} Filtros Avançados de Data
          </button>
          
          {showDateFilters && (
            <div className="bg-white rounded shadow p-4 grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Data Início</label>
                <input
                  type="date"
                  className="w-full border rounded px-3 py-2 text-sm"
                  value={dateFilters.startDate}
                  onChange={e => setDateFilters({...dateFilters, startDate: e.target.value})}
                />
              </div>
              
              <div>
                <label className="block text-xs font-medium text-gray-700 mb-1">Data Final</label>
                <input
                  type="date"
                  className="w-full border rounded px-3 py-2 text-sm"
                  value={dateFilters.endDate}
                  onChange={e => setDateFilters({...dateFilters, endDate: e.target.value})}
                />
              </div>
              
              <div className="flex items-end">
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    className="w-4 h-4 rounded text-brand-gold focus:ring-brand-gold"
                    checked={dateFilters.includeWeekends}
                    onChange={e => setDateFilters({...dateFilters, includeWeekends: e.target.checked})}
                  />
                  <span className="text-sm text-gray-700">Incluir finais de semana</span>
                </label>
              </div>

              {(dateFilters.startDate || dateFilters.endDate || !dateFilters.includeWeekends) && (
                <div className="col-span-1 md:col-span-3 flex justify-end">
                  <button
                    onClick={() => setDateFilters({ startDate: "", endDate: "", includeWeekends: true })}
                    className="text-sm text-red-600 hover:text-red-800 flex items-center gap-1"
                  >
                    <X size={14} /> Limpar Filtros de Data
                  </button>
                </div>
              )}
            </div>
          )}
        </div>

        {/* Pagination Controls (Top) */}
        <div className="flex justify-between items-center px-4 py-2 bg-gray-50 border-b rounded-t-lg">
             <span className="text-xs text-gray-600">
                Mostrando {transactions.length} de {total} registros | 
                <span className="ml-2 font-bold text-gray-900">Total Filtrado: R$ {filteredTotal.toFixed(2).replace('.', ',')}</span>
             </span>
             <div className="flex gap-2 items-center">
                <button 
                  disabled={page === 1 || loading}
                  onClick={() => setPage(p => Math.max(1, p - 1))}
                  className="px-3 py-1 border rounded bg-white hover:bg-gray-100 disabled:opacity-50 text-xs"
                >
                  Anterior
                </button>
                <span className="text-xs font-medium">Página {page}</span>
                <button 
                  disabled={page * limit >= total || loading}
                  onClick={() => setPage(p => p + 1)}
                  className="px-3 py-1 border rounded bg-white hover:bg-gray-100 disabled:opacity-50 text-xs"
                >
                  Próxima
                </button>
             </div>
        </div>

        {/* List */}
        <div className="bg-white rounded shadow flex flex-col border-t-0 rounded-t-none">
          {/* Top Scrollbar Sync */}
          <div 
            ref={topScrollRef}
            onScroll={() => handleScroll('top')}
            className="overflow-x-scroll w-full border-b bg-gray-50 mb-1"
          >
             <div className="h-3 min-w-[1800px]"></div>
          </div>

          {/* Bulk Actions Bar */}
          {selectedIds.size > 0 && (
              <div className="bg-blue-50 border-b p-2 flex justify-between items-center px-4 sticky left-0 z-10">
                  <span className="text-sm font-bold text-blue-800">{selectedIds.size} itens selecionados</span>
                  <button 
                      onClick={() => setShowBulkEditModal(true)}
                      className="bg-blue-600 text-white px-3 py-1 rounded text-xs hover:bg-blue-700 shadow"
                  >
                      Editar Selecionados
                  </button>
              </div>
          )}

          <div 
            ref={tableScrollRef}
            onScroll={() => handleScroll('table')}
            className="overflow-x-scroll pb-2"
          >
             <table className="w-full text-xs text-left whitespace-nowrap min-w-[1800px]">
                  <thead className="bg-gray-100 border-b">
                      <tr>
                           <th className="px-3 py-2 w-10 text-center">
                               <input 
                                  type="checkbox" 
                                  checked={sortedTransactions.length > 0 && selectedIds.size === sortedTransactions.length}
                                  onChange={toggleSelectAll}
                                  className="rounded text-blue-600 focus:ring-blue-500"
                               />
                           </th>
                           {[
                             { label: "FOT", key: "fot" },
                             { label: "Data Evento", key: "data" },
                             { label: "Curso", key: "curso" },
                             { label: "Instituição", key: "instituicao" },
                             { label: "Ano", key: "anoFormatura" },
                             { label: "Empresa", key: "empresa" },
                             { label: "Evento", key: "tipoEvento" },
                             { label: "Serviço", key: "tipoServico" },
                             { label: "Nome", key: "nome" },
                             { label: "WhatsApp", key: "whatsapp" },
                             { label: "CPF", key: "cpf" },
                             { label: "Tab. Free", key: "tabelaFree" },
                             { label: "V. Free", key: "valorFree" },
                             { label: "V. Extra", key: "valorExtra" },
                             { label: "Desc. Extra", key: "descricaoExtra" },
                             { label: "Total", key: "totalPagar" },
                             { label: "Dt. Pgto", key: "dataPgto" },
                             { label: "OK", key: "pgtoOk" }
                           ].map((h) => (
                               <th 
                                 key={h.label} 
                                 className="px-3 py-2 font-semibold text-gray-700 align-top cursor-pointer hover:bg-gray-200"
                                 onClick={() => handleSort(h.key as keyof FinancialTransaction)}
                               >
                                   <div className="flex flex-col gap-1">
                                       <div className="flex items-center gap-1">
                                         <span>{h.label}</span>
                                         {sortConfig?.key === h.key && (
                                           <span>{sortConfig.direction === "asc" ? <ArrowUp size={12}/> : <ArrowDown size={12}/>}</span>
                                         )}
                                       </div>
                                       {/* Filters - Stop Propagation to prevent sort when clicking input */}
                                       <div onClick={(e) => e.stopPropagation()}>
                                          {h.label === "FOT" && <input className="w-full text-[10px] border rounded px-1" placeholder="Filtrar" value={filters.fot} onChange={e => setFilters({...filters, fot: e.target.value})} />}
                                          {h.label === "Data Evento" && <input className="w-full text-[10px] border rounded px-1" placeholder="Filtrar" value={filters.data} onChange={e => setFilters({...filters, data: e.target.value})} />}
                                          {h.label === "Curso" && <input className="w-full text-[10px] border rounded px-1" placeholder="Filtrar" value={filters.curso} onChange={e => setFilters({...filters, curso: e.target.value})} />}
                                          {h.label === "Instituição" && <input className="w-full text-[10px] border rounded px-1" placeholder="Filtrar" value={filters.instituicao} onChange={e => setFilters({...filters, instituicao: e.target.value})} />}
                                          {h.label === "Ano" && <input className="w-full text-[10px] border rounded px-1" placeholder="Filtrar" value={filters.ano} onChange={e => setFilters({...filters, ano: e.target.value})} />}
                                          {h.label === "Empresa" && <input className="w-full text-[10px] border rounded px-1" placeholder="Filtrar" value={filters.empresa} onChange={e => setFilters({...filters, empresa: e.target.value})} />}
                                          {h.label === "Evento" && <input className="w-full text-[10px] border rounded px-1" placeholder="Filtrar" value={filters.evento} onChange={e => setFilters({...filters, evento: e.target.value})} />}
                                          {h.label === "Serviço" && <input className="w-full text-[10px] border rounded px-1" placeholder="Filtrar" value={filters.servico} onChange={e => setFilters({...filters, servico: e.target.value})} />}
                                          {h.label === "Nome" && <input className="w-full text-[10px] border rounded px-1" placeholder="Filtrar" value={filters.nome} onChange={e => setFilters({...filters, nome: e.target.value})} />}
                                          {h.label === "OK" && <input className="w-full text-[10px] border rounded px-1" placeholder="Sim/Não" value={filters.status} onChange={e => setFilters({...filters, status: e.target.value})} />}
                                       </div>
                                   </div>
                               </th>
                           ))}
                      </tr>
                  </thead>
                  <tbody className="divide-y relative">
                      {loading && (
                          <tr>
                              <td colSpan={14} className="p-8 text-center text-gray-500">
                                  <div className="flex flex-col items-center justify-center">
                                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-green mb-2"></div>
                                      Carregando...
                                  </div>
                              </td>
                          </tr>
                      )}
                      {loading && (
                          <tr>
                              <td colSpan={14} className="p-8 text-center text-gray-500">
                                  <div className="flex flex-col items-center justify-center">
                                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-green mb-2"></div>
                                      Carregando...
                                  </div>
                              </td>
                          </tr>
                      )}
                      {!loading && sortedTransactions.map((t, index) => {
                          const isDateFilterActive = !!(dateFilters.startDate || dateFilters.endDate);
                          const isNewGroup = isDateFilterActive 
                              ? index > 0 && t.nome !== sortedTransactions[index - 1].nome
                              : index > 0 && t.fot !== sortedTransactions[index - 1].fot;
                          
                          // Check if this is the last item of the group (or list) to show summary
                          const isLastOfGroup = isDateFilterActive
                              ? index === sortedTransactions.length - 1 || t.nome !== sortedTransactions[index + 1].nome
                              : index === sortedTransactions.length - 1 || t.fot !== sortedTransactions[index + 1].fot;

                          // Only show summary if sorted by default (which groups by FOT) or explicitly sorted by FOT, 
                          // OR if Date Filters are active (which groups by Professional Name)
                          const showSummary = isLastOfGroup && (
                              (!sortConfig || sortConfig.key === 'fot') || isDateFilterActive
                          );
                          
                          return (
                          <React.Fragment key={t.id}>
                            <tr 
                                className={`hover:bg-gray-50 cursor-pointer ${isNewGroup ? "border-t-[3px] border-gray-400" : ""} ${selectedIds.has(t.id!) ? "bg-blue-50" : ""}`} 
                                onClick={() => handleEdit(t)}
                            >
                                <td className="px-3 py-2 text-center" onClick={(e) => e.stopPropagation()}>
                                    <input 
                                        type="checkbox" 
                                        checked={selectedIds.has(t.id!)}
                                        onChange={(e) => { e.stopPropagation(); toggleSelection(t.id!); }}
                                        className="rounded text-blue-600 focus:ring-blue-500"
                                    />
                                </td>
                                <td className="px-3 py-2 font-bold">{t.fot || "?"}</td>
                                <td className="px-3 py-2">{t.data}</td>
                                <td className="px-3 py-2">{t.curso}</td>
                                <td className="px-3 py-2">{t.instituicao}</td>
                                <td className="px-3 py-2">{t.anoFormatura}</td>
                                <td className="px-3 py-2">{t.empresa}</td>
                                <td className="px-3 py-2">{t.tipoEvento}</td>
                                <td className="px-3 py-2">{t.tipoServico}</td>
                                <td className="px-3 py-2">{t.nome}</td>
                                <td className="px-3 py-2">{t.whatsapp}</td>
                                <td className="px-3 py-2">{t.cpf}</td>
                                <td className="px-3 py-2">{t.tabelaFree}</td>
                                <td className="px-3 py-2 text-right">{t.valorFree != null ? t.valorFree.toFixed(2) : "-"}</td>
                                <td className="px-3 py-2 text-right">{t.valorExtra != null ? t.valorExtra.toFixed(2) : "-"}</td>
                                <td className="px-3 py-2 max-w-[150px] truncate" title={t.descricaoExtra}>{t.descricaoExtra}</td>
                                <td className="px-3 py-2 text-right font-bold text-green-700">{t.totalPagar?.toFixed(2)}</td>
                                <td className="px-3 py-2">
                                    {(() => {
                                        try {
                                        if (!t.dataPgto) return "-";
                                        const d = new Date(t.dataPgto);
                                        if (isNaN(d.getTime())) return "-";
                                        return d.toLocaleDateString("pt-BR", {timeZone: "UTC"});
                                        } catch (e) {
                                        return "-";
                                        }
                                    })()}
                                </td>
                                <td className="px-3 py-2 text-center">
                                    {t.pgtoOk 
                                        ? <span className="bg-green-100 text-green-800 px-2 py-0.5 rounded-full text-[10px]">Sim</span> 
                                        : <span className="bg-red-100 text-red-800 px-2 py-0.5 rounded-full text-[10px]">Não</span>}
                                </td>
                            </tr>
                            {showSummary && (
                                <tr className="bg-gray-100 font-bold text-gray-800 border-b-2 border-gray-300">
                                    <td colSpan={11} className="px-3 py-2 text-right uppercase text-[10px] tracking-wide text-gray-500">
                                        {isDateFilterActive ? `Subtotal ${t.nome}:` : `Total FOT ${t.fot}:`}
                                    </td>
                                    <td className="px-3 py-2 text-right text-brand-gold">
                                        {/* Calculate sum for this group */}
                                        {sortedTransactions
                                            .filter(tr => isDateFilterActive ? tr.nome === t.nome : tr.fot === t.fot)
                                            .reduce((sum, curr) => sum + (curr.totalPagar || 0), 0)
                                            .toFixed(2)}
                                    </td>
                                    <td colSpan={2}></td>
                                </tr>
                            )}
                          </React.Fragment>
                        );
                     })}
                 </tbody>
             </table>
             {sortedTransactions.length === 0 && !loading && (
                 <div className="p-8 text-center text-gray-500">Nenhuma transação encontrada.</div>
             )}
          </div>
        
        {/* Pagination Controls */}
        <div className="flex justify-between items-center px-4 py-2 bg-gray-50 border-t rounded-b-lg">
             <span className="text-xs text-gray-600">
                Mostrando {transactions.length} de {total} registros
             </span>
             <div className="flex gap-2 items-center">
                <button 
                  disabled={page === 1 || loading}
                  onClick={() => setPage(p => Math.max(1, p - 1))}
                  className="px-3 py-1 border rounded bg-white hover:bg-gray-100 disabled:opacity-50 text-xs"
                >
                  Anterior
                </button>
                <span className="text-xs font-medium">Página {page}</span>
                <button 
                  disabled={page * limit >= total || loading}
                  onClick={() => setPage(p => p + 1)}
                  className="px-3 py-1 border rounded bg-white hover:bg-gray-100 disabled:opacity-50 text-xs"
                >
                  Próxima
                </button>
             </div>
        </div>
        </div>
      </div>
      
      {/* Modal */}
      {(showAddModal || showEditModal) && (
          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
              <div className="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
                  <div className="p-4 border-b flex justify-between items-center bg-gray-50 sticky top-0">
                      <h2 className="text-xl font-bold text-gray-800">
                          {showAddModal ? "Nova Transação" : "Editar Transação"}
                      </h2>
                      <button onClick={() => { setShowAddModal(false); setShowEditModal(false); setSelectedTransaction(null); setProFunctions([]); }} className="p-1 hover:bg-gray-200 rounded">
                          <X size={20}/>
                      </button>
                  </div>
                  
                  <div className="p-6 grid grid-cols-1 md:grid-cols-3 gap-4">
                  {/* Auto-fill Section */}
                  <div className="col-span-1 md:col-span-3 bg-blue-50 p-3 rounded border border-blue-100 mb-2">
                       <div className="flex gap-2 items-end">
                           <div className="w-1/3 relative">
                               <label className="block text-xs font-bold text-blue-700">Buscar por FOT</label>
                               <div className="flex relative">
                                   <input 
                                     type="text" 
                                     className="border rounded-l w-full px-2 py-1"
                                     placeholder="Nº FOT"
                                     value={fotQuery}
                                     onChange={e => handleFotSearch(e.target.value)}
                                     onBlur={() => setTimeout(() => setShowFotSuggestions(false), 200)}
                                   />
                                   <button disabled className="bg-blue-600 text-white px-2 rounded-r hover:bg-blue-700">
                                       <Search size={16}/>
                                   </button>
                                   {showFotSuggestions && fotResults && fotResults.length > 0 && (
                                       <div className="absolute top-10 z-10 w-full bg-white border rounded shadow-lg max-h-60 overflow-y-auto">
                                           {fotResults.map(f => (
                                               <div 
                                                 key={f.id} 
                                                 className="p-2 hover:bg-gray-100 cursor-pointer text-xs border-b last:border-0"
                                                 onClick={() => selectFot(f)}
                                               >
                                                   <div className="font-bold">FOT: {f.fot}</div>
                                                   <div className="text-gray-500">{f.curso_nome} | {f.empresa_nome}</div>
                                                   <div className="text-gray-400 text-[10px]">{f.ano_formatura_label}</div>
                                               </div>
                                           ))}
                                       </div>
                                   )}
                               </div>
                           </div>
                           {fotLoading && <span className="text-xs text-gray-500 mb-2">Buscando...</span>}
                       </div>
                          {fotFound && (
                              <div className="mt-2 text-xs text-green-700 flex flex-col gap-1">
                                  <div className="flex gap-4">
                                      <span><strong>Curso:</strong> {formData.curso}</span>
                                      <span><strong>Inst:</strong> {formData.instituicao}</span>
                                      <span><strong>Ano:</strong> {formData.anoFormatura}</span>
                                  </div>
                                  {fotEvents.length > 0 && (
                                      <div className="bg-yellow-50 p-2 rounded border border-yellow-200 mt-1">
                                          <p className="font-bold text-yellow-800 mb-1">Eventos encontrados:</p>
                                          <div className="flex flex-wrap gap-2">
                                              {fotEvents.map(ev => (
                                                  <button
                                                    key={ev.id}
                                                    onClick={() => selectEvent(ev)}
                                                    className="bg-white border px-2 py-1 rounded hover:bg-yellow-100 text-yellow-900 border-yellow-300"
                                                  >
                                                      {ev.tipo_evento_nome} ({new Date(ev.data_evento).toLocaleDateString()})
                                                  </button>
                                              ))}
                                          </div>
                                      </div>
                                  )}
                              </div>
                          )}
                      </div>

                      {/* Data */}
                       <div>
                          <label className="block text-xs font-medium text-gray-700">Data Evento</label>
                          <input type="date" className="w-full border rounded px-2 py-1.5 mt-1" 
                            value={formData.data} onChange={e => setFormData({...formData, data: e.target.value})}
                          />
                      </div>

                      {/* Tipo Evento */}
                      <div>
                          <label className="block text-xs font-medium text-gray-700">Tipo Evento</label>
                          <select className="w-full border rounded px-2 py-1.5 mt-1"
                            value={formData.tipoEvento} onChange={e => setFormData({...formData, tipoEvento: e.target.value})}
                          >
                              <option value="">Selecione...</option>
                              {tiposEventos.map(t => <option key={t.id} value={t.nome}>{t.nome}</option>)}
                          </select>
                      </div>

                      {/* Tipo Serviço */}
                      <div>
                          <label className="block text-xs font-medium text-gray-700">Tipo Serviço</label>
                          <select className="w-full border rounded px-2 py-1.5 mt-1"
                            value={formData.tipoServico} onChange={e => setFormData({...formData, tipoServico: e.target.value})}
                          >
                               <option value="">Selecione...</option>
                              {tiposServicos.map(t => <option key={t.id} value={t.nome}>{t.nome}</option>)}
                          </select>
                      </div>

                      {/* Professional Info */}
                       <div className="md:col-span-2 relative">
                          <label className="block text-xs font-medium text-gray-700">Nome Profissional</label>
                          <input 
                            type="text" 
                            className="w-full border rounded px-2 py-1.5 mt-1" 
                            value={formData.nome} 
                            onChange={e => handleProSearch(e.target.value)}
                            onBlur={() => setTimeout(() => setShowProSuggestions(false), 200)} // Delay to allow click
                            placeholder="Digite para buscar..."
                          />
                          {showProSuggestions && proResults && proResults.length > 0 && (
                              <div className="absolute z-10 w-full bg-white border rounded shadow-lg max-h-40 overflow-y-auto mt-1">
                                  {proResults.map(p => (
                                      <div 
                                        key={p.id} 
                                        className="p-2 hover:bg-gray-100 cursor-pointer text-xs"
                                        onClick={() => selectProfessional(p)}
                                      >
                                          <strong>{p.nome}</strong> <span className="text-gray-500">({p.funcao_nome})</span>
                                      </div>
                                  ))}
                              </div>
                          )}
                      </div>
                      <div>
                          <label className="block text-xs font-medium text-gray-700">WhatsApp</label>
                          <input type="text" className="w-full border rounded px-2 py-1.5 mt-1" 
                            value={formData.whatsapp} onChange={e => setFormData({...formData, whatsapp: e.target.value})}
                          />
                      </div>
                      <div>
                          <label className="block text-xs font-medium text-gray-700">CPF</label>
                          <input type="text" className="w-full border rounded px-2 py-1.5 mt-1" 
                             value={formData.cpf} onChange={e => setFormData({...formData, cpf: e.target.value})}
                          />
                      </div>

                      {/* Values */}
                       <div>
                          <label className="block text-xs font-medium text-gray-700">Tabela Free</label>
                          {proFunctions.length > 0 ? (
                              <select 
                                className="w-full border rounded px-2 py-1.5 mt-1"
                                value={formData.tabelaFree || ""}
                                onChange={e => {
                                    setFormData({...formData, tabelaFree: e.target.value});
                                    // Also set Tipo Servico to match? Or keep them separate?
                                    // Usually Tabela Free matches the function they are performing.
                                }}
                              >
                                  {proFunctions.map((fn: any) => (
                                      <option key={fn.id} value={fn.nome}>{fn.nome}</option>
                                  ))}
                              </select>
                          ) : (
                              <input type="text" className="w-full border rounded px-2 py-1.5 mt-1" 
                                value={formData.tabelaFree || ""} onChange={e => setFormData({...formData, tabelaFree: e.target.value})}
                              />
                          )}
                      </div>
                      <div>
                          <label className="block text-xs font-medium text-gray-700">Valor Free (R$)</label>
                          <input type="number" step="0.01" className="w-full border rounded px-2 py-1.5 mt-1" 
                             value={formData.valorFree ?? ""} 
                             onChange={e => {
                                 const val = e.target.value;
                                 setFormData({...formData, valorFree: val === "" ? null : parseFloat(val)});
                             }}
                          />
                      </div>
                      <div>
                          <label className="block text-xs font-medium text-gray-700">Valor Extra (R$)</label>
                          <input type="number" step="0.01" className="w-full border rounded px-2 py-1.5 mt-1" 
                             value={formData.valorExtra ?? ""} 
                             onChange={e => {
                                 const val = e.target.value;
                                 setFormData({...formData, valorExtra: val === "" ? null : parseFloat(val)});
                             }}
                          />
                      </div>
                      
                      <div className="md:col-span-3">
                           <label className="block text-xs font-medium text-gray-700">Descrição Extra</label>
                           <input type="text" className="w-full border rounded px-2 py-1.5 mt-1" 
                             value={formData.descricaoExtra} onChange={e => setFormData({...formData, descricaoExtra: e.target.value})}
                           />
                      </div>

                      {/* Payment */}
                      <div>
                          <label className="block text-xs font-medium text-gray-700">Data Pagamento</label>
                          <input type="date" className="w-full border rounded px-2 py-1.5 mt-1" 
                             value={formData.dataPgto} onChange={e => setFormData({...formData, dataPgto: e.target.value})}
                          />
                      </div>
                      <div className="flex items-end pb-3">
                          <label className="flex items-center gap-2 cursor-pointer">
                              <input type="checkbox" className="w-4 h-4 rounded text-brand-gold focus:ring-brand-gold"
                                checked={formData.pgtoOk} onChange={e => setFormData({...formData, pgtoOk: e.target.checked})}
                              />
                              <span className="text-sm font-medium text-gray-700">Pagamento Realizado?</span>
                          </label>
                      </div>
                      <div className="bg-gray-100 p-2 rounded text-right flex flex-col justify-center">
                          <span className="text-xs text-gray-500">Total a Pagar</span>
                          <span className="text-xl font-bold text-gray-800">
                             R$ {formData.totalPagar?.toFixed(2)}
                          </span>
                      </div>
                  </div>

                  <div className="p-4 border-t bg-gray-50 flex justify-between items-center sticky bottom-0">
                      <button onClick={() => { setShowAddModal(false); setShowEditModal(false); }} className="px-4 py-2 text-gray-700 hover:bg-gray-200 rounded border bg-white">
                          Fechar
                      </button>
                      
                       {successMessage && (
                          <span className="text-green-600 font-medium text-sm animate-pulse">
                              {successMessage}
                          </span>
                      )}

                      <button onClick={handleSmartSave} className="px-6 py-2 bg-brand-gold text-white rounded hover:bg-yellow-600 shadow font-medium">
                          {formData.id ? "Atualizar" : "Salvar Lançamento"}
                      </button>
                  </div>
              </div>
          </div>
      )}
      {/* Bulk Edit Modal */}
      {showBulkEditModal && (
          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
              <div className="bg-white rounded-lg shadow-xl w-full max-w-md">
                  <div className="p-4 border-b flex justify-between items-center bg-gray-50">
                      <h2 className="text-lg font-bold text-gray-800">Editar {selectedIds.size} Itens</h2>
                      <button onClick={() => setShowBulkEditModal(false)} className="p-1 hover:bg-gray-200 rounded">
                          <X size={20}/>
                      </button>
                  </div>
                  <div className="p-6 flex flex-col gap-4">
                      <div className="bg-blue-50 border border-blue-200 p-3 rounded text-xs text-blue-800">
                          Atenção: Os valores inseridos serão <strong>adicionados</strong> aos valores existentes. A descrição será concatenada.
                      </div>
                      
                      <div>
                          <label className="block text-xs font-medium text-gray-700">Adicionar Valor Extra (R$)</label>
                          <input 
                              type="number" 
                              step="0.01"
                              className="w-full border rounded px-2 py-1.5 mt-1"
                              value={bulkFormData.valorExtra}
                              onChange={e => setBulkFormData({...bulkFormData, valorExtra: parseFloat(e.target.value) || 0})}
                              placeholder="Ex: 50.00"
                          />
                      </div>

                      <div>
                          <label className="block text-xs font-medium text-gray-700">Adicionar Descrição (Será concatenada)</label>
                          <input 
                              type="text" 
                              className="w-full border rounded px-2 py-1.5 mt-1"
                              value={bulkFormData.descricaoExtra}
                              onChange={e => setBulkFormData({...bulkFormData, descricaoExtra: e.target.value})}
                              placeholder="Ex: + Ajuda de Custo"
                          />
                      </div>
                  </div>
                  <div className="p-4 border-t bg-gray-50 flex justify-end gap-2">
                      <button onClick={() => setShowBulkEditModal(false)} className="px-4 py-2 border rounded hover:bg-gray-100 text-sm">Cancelar</button>
                      <button onClick={handleBulkUpdate} className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm font-medium">
                          Salvar Alterações
                      </button>
                  </div>
              </div>
          </div>
      )}
    </div>
  );
};

export default Finance;