import React, { useEffect } from 'react';
import { ConciliacaoHeader, ConciliacaoMetrics, ConciliacaoCharts } from './components/ConciliacaoComponents';
import ConciliacaoTables from './components/ConciliacaoTables';
import useConciliacao from '../../hooks/useConciliacao';

export const ConciliacaoView = () => {
  const { loadData, isLoading } = useConciliacao();

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

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[500px] gap-4">
        <div className="w-16 h-16 border-4 border-emerald-200 border-t-emerald-600 rounded-full animate-spin shadow-[0_0_20px_rgba(16,185,129,0.2)]"></div>
        <p className="text-[10px] font-black text-slate-600 uppercase tracking-[0.3em] animate-pulse">Sincronizando Dados...</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-8 p-0 md:p-6 animate-in fade-in slide-in-from-bottom-4 duration-1000 relative pb-20">
      {/* Decorative Background Glows */}
      <div className="absolute top-0 right-0 w-96 h-96 bg-emerald-500/5 rounded-full blur-[120px] pointer-events-none" />
      <div className="absolute bottom-40 left-0 w-96 h-96 bg-emerald-500/5 rounded-full blur-[120px] pointer-events-none" />

      <ConciliacaoHeader />
      
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 relative z-10">
        <div className="lg:col-span-12">
            <ConciliacaoMetrics />
        </div>
        <div className="lg:col-span-8">
            <ConciliacaoTables />
        </div>
        <div className="lg:col-span-4">
            <ConciliacaoCharts />
        </div>
      </div>
    </div>
  );
};
