import React from "react";

import { useAuth } from "../../contexts/AuthContext";
import { useDashboardStats } from "../../hooks/useDashboardStats";

import { AlertasPrazos } from "./AlertasPrazos";
import { AtividadesRecentes } from "./AtividadesRecentes";
import { AtendimentosStats } from "./stats/AtendimentosStats";
import { FinanceiroStats } from "./stats/FinanceiroStats";
import { KPIsFinanceiros } from "./stats/KPIsFinanceiros";
import { ProcessosStats } from "./stats/ProcessosStats";
import { TarefasStats } from "./stats/TarefasStats";
import { TaxaSucessoCard } from "./TaxaSucessoCard";

export const DashboardLayout: React.FC = () => {
  const { user } = useAuth();
  const {
    processosStats,
    tarefasStats,
    atendimentosStats,
    financeiroStats,
    proximosPrazos,
    atividades,
  } = useDashboardStats();

  const isAdminOrAdvogado = ["ADVOGADO_ADMIN", "ADVOGADO"].includes(
    user?.perfil || "",
  );

  return (
    <div className="space-y-6 p-6">
      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {processosStats.data && <ProcessosStats data={processosStats.data} />}
        {tarefasStats.data && <TarefasStats data={tarefasStats.data} />}
        {atendimentosStats.data && (
          <AtendimentosStats data={atendimentosStats.data} />
        )}
        {isAdminOrAdvogado && financeiroStats.data && (
          <FinanceiroStats data={financeiroStats.data} />
        )}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Coluna da esquerda */}
        <div className="lg:col-span-2 space-y-6">
          <TaxaSucessoCard />
          {isAdminOrAdvogado && <KPIsFinanceiros />}
        </div>

        {/* Coluna da direita */}
        <div className="space-y-6">
          <AlertasPrazos />
          <AtividadesRecentes />
        </div>
      </div>
    </div>
  );
};