import React, { useState, useEffect } from 'react';
import { AppLayout } from '@/components/layout/AppLayout';
import { FinanceiroV2Sidebar } from './components/FinanceiroV2Sidebar';
import { DashboardView } from './views/DashboardView';
import { FluxoCaixaView } from './views/FluxoCaixaView';
import { ContasPagarView } from './views/ContasPagarView';
import { ContasReceberView } from './views/contas-receber/ContasReceberView';
import { ConciliacaoView } from './views/conciliacao/ConciliacaoView';
import { RelatoriosView } from './views/RelatoriosView';

// External Module views
import { DashboardView as FleetDashboardView } from '../fleet-v2/views/DashboardView';
import { FleetManagementView } from '../fleet-v2/views/FleetManagementView';
import { FuelingView } from '../fleet-v2/views/FuelingView';
import { MaintenanceView } from '../fleet-v2/views/MaintenanceView';
import { HRDashboard } from '../rh/components/HRDashboard';

import { useAuthContext } from '@/components/shared/AuthProvider';
import { useNavigate } from 'react-router-dom';
import { Clock, Construction, Building } from 'lucide-react';

/**
 * Placeholder for views not yet migrated or implemented with full parity.
 */
const PlaceholderView = ({ title }) => (
  <div className="flex flex-col items-center justify-center min-h-[60vh] text-center space-y-6 animate-in fade-in slide-in-from-bottom-10 duration-700">
    <div className="w-24 h-24 bg-emerald-500/10 rounded-3xl flex items-center justify-center border border-emerald-500/20 shadow-2xl shadow-emerald-900/10">
      <Construction className="w-12 h-12 text-emerald-500" />
    </div>
    <div>
      <h2 className="text-3xl font-black text-slate-900 tracking-tighter mb-2">{title}</h2>
      <p className="text-slate-500 max-w-md mx-auto font-medium">
        Esta funcionalidade está sendo preparada para o novo ambiente premium. 
        Em breve você terá acesso a todos os recursos com visual 1:1.
      </p>
    </div>
    <div className="flex gap-4">
       <div className="px-4 py-2 bg-slate-100 rounded-lg border border-slate-200 text-[10px] font-bold text-slate-500 uppercase tracking-widest">
         Módulo: Em Desenvolvimento
       </div>
    </div>
  </div>
);

/**
 * HeaderExtras Component - Restores the Ticker and Real-time Clock
 */
const HeaderExtras = () => {
  const [time, setTime] = useState(new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }));

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date().toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' }));
    }, 60000);
    return () => clearInterval(timer);
  }, []);

  const tickers = [
    { label: 'DÓLAR', value: 'R$ 5.37', trend: 'down', change: '0.4%' },
    { label: 'EURO', value: 'R$ 6.26', trend: 'up', change: '0.2%' },
    { label: 'SELIC', value: '0.055131%', trend: 'neutral', change: '-' },
    { label: 'IPCA', value: '0.33%', trend: 'neutral', change: '-' },
  ];

  return (
    <div className="hidden lg:flex items-center gap-10">
      <div className="flex items-center gap-8">
        {tickers.map((ticker, index) => (
          <div key={index} className="flex flex-col items-start gap-1">
             <span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">{ticker.label}</span>
             <div className="flex items-center gap-1.5">
               <span className="text-xs font-black text-slate-200 tracking-tight whitespace-nowrap">{ticker.value}</span>
               {ticker.trend === 'up' && <div className="w-0 h-0 border-l-[3px] border-l-transparent border-r-[3px] border-r-transparent border-b-[5px] border-b-emerald-500" />}
               {ticker.trend === 'down' && <div className="w-0 h-0 border-l-[3px] border-l-transparent border-r-[3px] border-r-transparent border-t-[5px] border-t-rose-500" />}
               {ticker.change !== '-' && <span className={cn("text-[9px] font-bold", ticker.trend === 'up' ? "text-emerald-500" : "text-rose-500")}>{ticker.change}</span>}
             </div>
          </div>
        ))}
      </div>

      <div className="flex items-center gap-4 pl-8 border-l border-slate-800">
        <span className="font-mono text-base font-black text-slate-200 tracking-wider tabular-nums">
          {time}
        </span>
        <div className="w-10 h-10 rounded-lg bg-slate-800/50 flex items-center justify-center border border-slate-700/50">
           <span className="text-[10px] font-black text-emerald-500">AD</span>
        </div>
      </div>
    </div>
  );
};

/**
 * Main Controller for Financeiro V2 Environment.
 * Manages views and state within this domain.
 */
export const FinanceiroV2App = () => {
  const [currentView, setCurrentView] = React.useState('dashboard');
  const { logout, user } = useAuthContext();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/plataforma/auth/login-finance');
  };

  const getTitle = () => {
    switch (currentView) {
      case 'dashboard': return 'Dashboard';
      case 'fluxo': return 'Fluxo de Caixa';
      case 'pagar': return 'Contas a Pagar';
      case 'receber': return 'Contas a Receber';
      case 'conciliacao': return 'Conciliação Bancária';
      case 'relatorios': return 'Relatórios e BI';
      case 'ponto': return 'Bater Ponto';
      case 'gestao-rh': return 'Gestão de Equipe';
      case 'frota-overview': return 'Visão Geral da Frota';
      case 'frota-veiculos': return 'Gestão de Veículos';
      case 'frota-abastecimento': return 'Controle de Abastecimento';
      case 'frota-manutencao': return 'Controle de Manutenção';
      case 'frota-pneus': return 'Gestão de Pneus';
      case 'frota-multas': return 'Gestão de Multas';
      case 'admin-clientes': return 'Gestão de Clientes';
      default: return 'Financeiro V2';
    }
  };

  const getSubtitle = () => {
    switch (currentView) {
      case 'dashboard': return 'Visão Geral & Indicadores';
      case 'fluxo': return 'Visão Estratégica & Forecast';
      case 'pagar': return 'Gestão de Saídas e Fornecedores';
      case 'receber': return 'Gestão de Entradas e Cobranças';
      case 'conciliacao': return 'Gestão de Conciliação e Extratos';
      case 'relatorios': return 'Análise de Dados & BI';
      case 'ponto': return 'Registro de Jornada de Trabalho';
      case 'gestao-rh': return 'Administração de Colaboradores';
      case 'frota-overview': return 'Status e KPIs Operacionais';
      case 'frota-veiculos': return 'Inventário e Disponibilidade';
      case 'frota-abastecimento': return 'Custos e Consumo de Combustível';
      case 'frota-manutencao': return 'Preventivas e Corretivas';
      case 'frota-pneus': return 'Ciclo de Vida e Trocas';
      case 'frota-multas': return 'Infrações e Condutores';
      case 'admin-clientes': return 'Base de Dados de Clientes';
      default: return 'Sistema Integrado';
    }
  };

  const renderView = () => {
    switch (currentView) {
      // Financeiro
      case 'dashboard': return <DashboardView />;
      case 'fluxo': return <FluxoCaixaView />;
      case 'pagar': return <ContasPagarView />;
      case 'receber': return <ContasReceberView />;
      case 'conciliacao': return <ConciliacaoView />;
      case 'relatorios': return <RelatoriosView />;
      
      // Recursos Humanos
      case 'ponto': return <PlaceholderView title="Bater Ponto" />;
      case 'gestao-rh': return <HRDashboard />;

      // Gestão de Frota
      case 'frota-overview': return <FleetDashboardView />;
      case 'frota-veiculos': return <FleetManagementView />;
      case 'frota-abastecimento': return <FuelingView />;
      case 'frota-manutencao': return <MaintenanceView />;
      case 'frota-pneus': return <PlaceholderView title="Gestão de Pneus" />;
      case 'frota-multas': return <PlaceholderView title="Gestão de Multas" />;

      // Administrativo
      case 'admin-clientes': return <PlaceholderView title="Gestão de Clientes" />;

      default: return <DashboardView />;
    }
  };

  if (!user) return null;

  return (
    <div className="theme-financeiro">
      <AppLayout 
        brandIcon={Building}
        brandName="Integra"
        brandColorClass="bg-emerald-500 shadow-emerald-500/20"
        title={getTitle()} 
        subtitle={getSubtitle()}
        onLogout={handleLogout}
        metadataType="finance"
        userName={user.name || 'Gestor Financeiro'}
        headerExtras={<HeaderExtras />}
        sidebar={<FinanceiroV2Sidebar currentView={currentView} onViewChange={setCurrentView} onLogout={handleLogout} />}
        headerClassName="bg-[#0b1120] border-slate-900 h-24"
        sidebarClassName="bg-[#0f172a] border-slate-900"
      >
        <div className="min-h-[calc(100vh-160px)] font-inter text-slate-700 transition-colors duration-500 relative bg-[#030712]">
           {/* Global Background Glow Financeiro */}
           <div className="absolute top-0 right-1/4 w-[800px] h-[800px] bg-emerald-500/[0.04] rounded-full blur-[140px] pointer-events-none" />
           
          <div className="animate-in fade-in zoom-in-95 duration-500 relative z-10 p-8">
            {renderView()}
          </div>
        </div>
      </AppLayout>
    </div>
  );
};

export default FinanceiroV2App;
