import React, { useState } from 'react';
import { 
  Bell,
  Search,
  Maximize2,
  User,
  Zap,
  LayoutDashboard
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { WorkspaceSidebar } from './WorkspaceSidebar';
import { IncomesView } from '../views/IncomesView';
import { ExpensesView } from '../views/ExpensesView';
import { ReconciliationView } from '../views/ReconciliationView';
import logo from '@/assets/Img/Util/iT_Guys/logo1.png';

/**
 * WorkspaceLayout - O container principal para o ambiente de teste/workspace.
 * Refinado com o design "Reproduced" e a identidade visual oficial da iTGUYS.
 */
export const WorkspaceLayout = () => {
  const [activeScreen, setActiveScreen] = useState('entradas');

  const renderScreen = () => {
    switch (activeScreen) {
      case 'dashboard':
        return (
          <div className="flex flex-col items-center justify-center min-h-[500px] text-slate-400">
             <div className="w-24 h-24 bg-zinc-900 rounded-3xl flex items-center justify-center mb-6 shadow-2xl border border-white/5 animate-pulse">
                <LayoutDashboard size={48} className="text-[#f1c232]" />
             </div>
             <h2 className="text-2xl font-black text-white uppercase tracking-tighter italic mb-2">Painel de Inteligência</h2>
             <p className="text-zinc-500 font-medium uppercase tracking-[0.3em] text-xs">Aguardando consolidação de dados financeiros</p>
          </div>
        );
      case 'entradas':
        return <IncomesView />;
      case 'saidas':
        return <ExpensesView />;
      case 'conciliacao':
        return <ReconciliationView />;
      case 'config':
        return (
          <div className="flex flex-col items-center justify-center min-h-[500px] text-slate-400">
             <h2 className="text-xl font-bold text-white uppercase tracking-tighter italic mb-2">Configurações Base</h2>
             <p className="text-zinc-500 font-medium">Módulo de permissões e chaves de API em desenvolvimento.</p>
          </div>
        );
      default:
        return <IncomesView />;
    }
  };

  return (
    <div className="workspace-theme flex h-screen w-full bg-white dark:bg-[var(--workspace-sec-5-dark)] overflow-hidden font-lato">
      
      {/* Sidebar REPRODUCED (Design Angular de Alta Fidelidade) */}
      <WorkspaceSidebar activeScreen={activeScreen} onScreenChange={setActiveScreen} />

      {/* Main Content Area */}
      <main className="flex-1 flex flex-col relative overflow-hidden bg-white dark:bg-[var(--workspace-sec-5-dark)]">
        
        {/* Dynamic Background Effect */}
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#22bb6c]/5 blur-[120px] rounded-full -mr-64 -mt-64 pointer-events-none z-0" />

        {/* Header Superior Premium */}
        <header className="h-20 bg-white/80 dark:bg-[var(--workspace-sec-5-dark)]/80 backdrop-blur-xl border-b border-slate-200 dark:border-white/5 flex items-center justify-between px-10 z-30">
          <div className="flex items-center gap-6">
             {/* breadcrumb conceitual */}
             <div className="flex items-center gap-3">
               <div className="w-8 h-8 rounded-lg bg-slate-100 dark:bg-zinc-900 flex items-center justify-center border border-slate-200 dark:border-white/5">
                  <Zap size={16} className="text-[#f1c232]" />
               </div>
               <div className="flex flex-col">
                  <span className="text-[10px] font-black text-slate-400 dark:text-zinc-600 uppercase tracking-widest leading-none mb-1">Sistema iTGUYS</span>
                  <h2 className="text-sm font-black text-slate-600 dark:text-white uppercase tracking-[0.1em] leading-none">
                    Workspace / <span className="text-[#f1c232]">{activeScreen}</span>
                  </h2>
               </div>
             </div>
          </div>

          <div className="flex items-center gap-8">
            {/* Search Global Minimalista */}
            <div className="hidden lg:flex items-center bg-slate-50 dark:bg-white/[0.03] px-4 py-2.5 rounded-xl border border-slate-200 dark:border-white/5 w-72 group focus-within:ring-2 focus-within:ring-[#f1c232]/30 focus-within:bg-white/[0.06] transition-all">
               <Search size={16} className="text-slate-400 dark:text-zinc-600 group-focus-within:text-[#f1c232] transition-colors" />
               <input 
                 type="text" 
                 placeholder="Comando rápido (ctrl + k)" 
                 className="bg-transparent border-none text-xs focus:ring-0 w-full text-slate-600 dark:text-zinc-300 placeholder:text-slate-400 dark:placeholder:text-zinc-600 ml-2"
               />
            </div>

            <div className="flex items-center gap-4">
              <button className="relative p-2.5 bg-slate-50 dark:bg-zinc-900/50 hover:bg-slate-100 dark:hover:bg-white/5 rounded-xl transition-colors text-slate-400 dark:text-zinc-500 hover:text-[#f1c232]">
                 <Bell size={20} />
                 <span className="absolute top-2.5 right-2.5 w-2 h-2 bg-[#f1c232] rounded-full border-2 border-white dark:border-zinc-950 shadow-[0_0_10px_#f1c232]" />
              </button>
              
              <div className="h-8 w-[1px] bg-slate-200 dark:bg-white/5" />

              <div className="flex items-center gap-3 pl-2">
                 <div className="flex flex-col items-end hidden md:flex">
                    <span className="text-xs font-black text-slate-700 dark:text-white tracking-tight">Daivid Alves</span>
                    <span className="text-[9px] font-bold text-[#22bb6c] uppercase tracking-widest">Master Admin</span>
                 </div>
                 <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-slate-200 to-slate-300 dark:from-zinc-800 dark:to-zinc-950 border border-slate-200 dark:border-white/10 flex items-center justify-center text-sm font-black text-slate-700 dark:text-white shadow-xl">
                    DA
                 </div>
              </div>
            </div>
          </div>
        </header>

        {/* View Content Area */}
        <div className="flex-1 overflow-y-auto custom-scrollbar relative z-10">
          <div className="max-w-[1600px] mx-auto p-8 animate-in fade-in slide-in-from-bottom-4 duration-1000">
             {/* Efeito de Vidro no Container de Conteúdo */}
             <div className="bg-white/50 dark:bg-zinc-900/40 rounded-[32px] border border-slate-200 dark:border-white/5 backdrop-blur-sm min-h-full">
                {renderScreen()}
             </div>
          </div>
        </div>

        {/* Footer Minimalista */}
        <footer className="h-10 border-t border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-zinc-950 px-10 flex items-center justify-between text-[10px] text-zinc-500 dark:text-zinc-700 font-bold uppercase tracking-[0.2em] relative z-20">
           <div className="flex items-center gap-4">
              <span>© 2026 iTGUYS Core Systems</span>
              <span className="text-[#22bb6c]/40">•</span>
              <span>Workspace Environment</span>
           </div>
           <div className="flex items-center gap-2">
              <div className="w-1.5 h-1.5 rounded-full bg-[#22bb6c] animate-pulse" />
              <span>Sistema Operacional</span>
           </div>
        </footer>
      </main>
    </div>
  );
};
