import React, { useState } from 'react';
import { 
  Bell,
  Search,
  Maximize2,
  HelpCircle,
  User
} 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';

/**
 * WorkspaceLayout - O container principal para o ambiente de teste/workspace.
 * Apresenta uma estrutura premium isolada do restante da plataforma.
 */
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-[400px] text-slate-400 italic">
            <h2 className="text-xl font-bold not-italic text-slate-700 dark:text-stone-200 mb-2 uppercase tracking-tighter">Dashboard Geral</h2>
            Em desenvolvimento...
          </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-[400px] text-slate-400 italic">
            <h2 className="text-xl font-bold not-italic text-slate-700 dark:text-stone-200 mb-2 uppercase tracking-tighter">Configurações</h2>
            Em desenvolvimento...
          </div>
        );
      default:
        return <IncomesView />;
    }
  };

  return (
    <div className="workspace-theme flex h-screen w-full bg-[#f8fafc] dark:bg-[#121212] overflow-hidden font-lato">
      {/* Sidebar Customizado (Reproduced Design) */}
      <WorkspaceSidebar activeScreen={activeScreen} onScreenChange={setActiveScreen} />

      {/* Main Content Area */}
      <main className="flex-1 flex flex-col relative overflow-hidden">
        {/* Header Header Premium */}
        <header className="h-20 bg-white/80 dark:bg-[#1b1b1b]/80 backdrop-blur-md border-b border-slate-200 dark:border-white/5 flex items-center justify-between px-8 z-30">
          <div className="flex items-center gap-4">
             <div className="flex items-center gap-2 text-slate-400 group cursor-pointer hover:text-[var(--workspace-sec-5-light)] transition-colors">
               <Maximize2 size={18} className="rotate-45" />
             </div>
             <div className="h-6 w-[1px] bg-slate-200 dark:bg-white/10" />
             <h2 className="text-sm font-black text-slate-600 dark:text-stone-300 uppercase tracking-[0.2em]">
               Workspace / <span className="text-[var(--workspace-sec-5-light)]">{activeScreen}</span>
             </h2>
          </div>

          <div className="flex items-center gap-6">
            <div className="hidden md:flex items-center bg-slate-100 dark:bg-white/5 px-4 py-2 rounded-xl border border-slate-200 dark:border-white/10 w-64 group focus-within:ring-2 focus-within:ring-[var(--workspace-sec-5-light)] transition-all">
               <Search size={16} className="text-slate-400" />
               <input 
                 type="text" 
                 placeholder="Busca global..." 
                 className="bg-transparent border-none text-xs focus:ring-0 w-full text-slate-600 dark:text-stone-300 placeholder:text-slate-400"
               />
            </div>

            <div className="flex items-center gap-3">
              <button className="relative p-2.5 bg-slate-100 dark:bg-white/5 rounded-xl hover:bg-slate-200 dark:hover:bg-white/10 transition-colors">
                 <Bell size={20} className="text-slate-500 dark:text-stone-400" />
                 <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white dark:border-[#1b1b1b]" />
              </button>
              <button className="p-2.5 bg-slate-100 dark:bg-white/5 rounded-xl hover:bg-slate-200 dark:hover:bg-white/10 transition-colors">
                 <User size={20} className="text-slate-500 dark:text-stone-400" />
              </button>
            </div>
          </div>
        </header>

        {/* View Content */}
        <div className="flex-1 overflow-y-auto custom-scrollbar bg-slate-50/50 dark:bg-[#121212]">
          <div className="max-w-[1600px] mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700">
            {renderScreen()}
          </div>
        </div>
      </main>
    </div>
  );
};
