import React, { useEffect, useMemo } from 'react';
import { useDispatcher } from '../hooks/useDispatcher';
import ExcelTable from '../components/ExcelTable';

const DispatcherView = () => {
    const { data, loading, fetchData } = useDispatcher();

    useEffect(() => {
        fetchData();
    }, [fetchData]);

    const columns = useMemo(() => {
        if (!data || data.length === 0) return [];
        
        // Take the first item to generate columns
        const firstItem = data[0];
        return Object.keys(firstItem).map(key => ({
            field: key,
            header: key.replace(/_/g, ' '), // Simple formatter: replace underscores with spaces
            width: 150, // Default width
            className: 'text-xs'
        }));
    }, [data]);

    const filterDefs = useMemo(() => {
        // Create filters for all columns by default, or maybe just some specific ones?
        // For "advanced filters", let's just enable all of them as 'select' type for now
        return columns.map(col => ({
            field: col.field,
            label: col.header,
            type: 'select'
        }));
    }, [columns]);

    return (
        <div className="h-full flex flex-col p-4 gap-4">
             <div className="flex flex-col gap-1">
                <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Dispatcher</h1>
                <p className="text-sm text-slate-500 dark:text-slate-400">Visualização de dados do Dispatcher.</p>
            </div>

            <div className="flex-1 min-h-0">
                <ExcelTable 
                    data={data}
                    columns={columns}
                    filterDefs={filterDefs}
                    loading={loading}
                    pageSize={50}
                />
            </div>
        </div>
    );
};

export default DispatcherView;