import React, { useState } from 'react';
import { IncomesView } from '../views/IncomesView';
import { ExpensesView } from '../views/ExpensesView';
import { ReconciliationView } from '../views/ReconciliationView';
import { LayoutDashboard, ArrowUpRight, ArrowDownRight, ArrowRightLeft, Settings, Menu, Bell, User } from 'lucide-react';
import { cn } from '@/lib/utils';

export const WorkspaceLayout = () => {
  const [activeScreen, setActiveScreen] = useState('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const menuItems = [
    { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard size={20} /> },
    { id: 'entradas', label: 'Entradas', icon: <ArrowUpRight size={20} /> },
    { id: 'saidas', label: 'Saídas', icon: <ArrowDownRight size={20} /> },
    { id: 'conciliacao', label: 'Conciliação', icon: <ArrowRightLeft size={20} /> },
    { id: 'config', label: 'Ajustes', icon: <Settings size={20} /> },
  ];

  const renderScreen = () => {
    switch (activeScreen) {
      case 'entradas': return <IncomesView />;
      case 'saidas': return <ExpensesView />;
      case 'conciliacao': return <ReconciliationView />;
      default: return (
        <div className="p-8 text-center text-slate-400 italic">
          <h2 className="text-xl font-bold not-italic text-slate-700 dark:text-stone-200 mb-2">Painel de Controle Financeiro</h2>
          O Dashboard consolidado será implementado nesta seção com o componente FineCard.
        </div>
      );
    }
  };

  return (
    <div className="workspace-theme min-h-screen bg-[#f8fafc] dark:bg-[#121212] flex overflow-hidden">
      {/* Sidebar Sidebar Component */}
      <aside className={cn(
        "bg-[var(--workspace-sec-5-light)] dark:bg-[#0d253a] text-white transition-all duration-300 flex flex-col z-50",
        sidebarOpen ? "w-64" : "w-20"
      )}>
        <div className="p-6 flex items-center justify-between border-b border-white/5">
          {sidebarOpen && <div className="text-xl font-black tracking-tighter italic">iTGUYS</div>}
          <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-1 hover:bg-white/10 rounded">
            <Menu size={20} />
          </button>
        </div>

        <nav className="flex-1 py-6 px-3 space-y-1">
          {menuItems.map((item) => (
            <button
              key={item.id}
              onClick={() => setActiveScreen(item.id)}
              className={cn(
                "w-full flex items-center gap-4 px-3 py-3 rounded-xl transition-all font-bold text-sm",
                activeScreen === item.id 
                  ? "bg-white/10 text-[var(--workspace-sec-2-light)] shadow-sm" 
                  : "text-white/60 hover:text-white hover:bg-white/5"
              )}
            >
              <span className={activeScreen === item.id ? "text-[var(--workspace-sec-2-light)]" : ""}>
                {item.icon}
              </span>
              {sidebarOpen && <span>{item.label}</span>}
              {activeScreen === item.id && sidebarOpen && (
                 <div className="ml-auto w-1.5 h-1.5 rounded-full bg-[var(--workspace-sec-2-light)] shadow-[0_0_8px_var(--workspace-sec-2-light)]" />
              )}
            </button>
          ))}
        </nav>

        <div className="p-4 border-t border-white/5">
           <div className={cn("flex items-center gap-3 p-2 rounded-xl bg-white/5", !sidebarOpen && "justify-center")}>
              <div className="w-8 h-8 rounded-full bg-[var(--workspace-sec-2-light)] flex items-center justify-center text-xs font-black">DA</div>
              {sidebarOpen && (
                <div className="flex-1 min-w-0">
                  <p className="text-xs font-bold truncate">Daivid Alves</p>
                  <p className="text-[10px] text-white/40 truncate">Workspace Admin</p>
                </div>
              )}
           </div>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 flex flex-col overflow-hidden">
        <header className="h-16 bg-white dark:bg-[#1b1b1b] border-b border-slate-200 dark:border-[#2a2a2a] flex items-center justify-between px-8 z-40">
           <div className="text-[10px] font-black uppercase text-slate-400 tracking-[0.2em]">Workspace / Financeiro</div>
           
           <div className="flex items-center gap-4">
              <button className="p-2 text-slate-400 hover:text-slate-600 rounded-full hover:bg-slate-50 relative">
                <Bell size={18} />
                <div className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white" />
              </button>
              <div className="w-[1px] h-6 bg-slate-200 dark:bg-[#333]" />
              <button className="flex items-center gap-2 text-slate-600 dark:text-stone-300 font-bold text-xs p-1 hover:bg-slate-50 rounded-lg pr-3">
                 <User size={18} />
                 PLATAFORMA SISTEMAS
              </button>
           </div>
        </header>

        <div className="flex-1 overflow-y-auto scroll-smooth custom-scrollbar">
           {renderScreen()}
        </div>
      </main>
    </div>
  );
};
