import React, { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { 
  Sun, 
  Moon, 
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useDocumentMetadata } from '@/hooks/useDocumentMetadata';
import { CnabSidebar } from '../components/CnabSidebar';
import { useCnabStore } from '../hooks/useCnabStore';

export const CnabLayout = () => {
  useDocumentMetadata('CNAB 240 | Gestão de Remessas', 'cnab');
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(true);

  const { paymentMode, setPaymentMode } = useCnabStore();

  return (
    <div className={cn(
      "flex min-h-screen font-inter selection:bg-emerald-500/30 theme-cnab", 
      isDarkMode ? "dark bg-[#141414] text-slate-100" : "bg-slate-50 text-slate-900"
    )}>
      <CnabSidebar 
        isCollapsed={isSidebarCollapsed} 
        onToggle={() => setIsSidebarCollapsed(!isSidebarCollapsed)} 
      />

      <main 
        className={cn(
          "flex-1 transition-all duration-300 min-h-screen flex flex-col min-w-0",
          isSidebarCollapsed ? "ml-[100px]" : "ml-[280px]"
        )}
      >
        <header className={cn(
          "h-16 px-8 sticky top-0 z-40 backdrop-blur-md border-b flex items-center justify-between",
          isDarkMode ? "bg-[#141414]/80 border-[#2a2a2a]" : "bg-slate-50/80 border-slate-200"
        )}>
            <div className="flex items-center gap-6">
               <h1 className="text-[clamp(1rem,1.5vw,1.375rem)] font-bold tracking-tight text-slate-900 dark:text-white">
                 Financeiro <span className="text-emerald-500">| CNAB 240</span>
               </h1>

               {/* TED / PIX Selector */}
               <div className={cn(
                 "flex p-1 rounded-xl border transition-all",
                 isDarkMode ? "bg-zinc-900/50 border-zinc-800" : "bg-white border-slate-200 shadow-sm"
               )}>
                  <button
                    onClick={() => setPaymentMode('TED')}
                    className={cn(
                      "px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-widest transition-all",
                      paymentMode === 'TED' 
                        ? "bg-emerald-600 text-white shadow-lg shadow-emerald-900/20" 
                        : "text-zinc-500 hover:text-zinc-300"
                    )}
                  >
                    TED
                  </button>
                  <button
                    onClick={() => setPaymentMode('PIX')}
                    className={cn(
                      "px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-widest transition-all",
                      paymentMode === 'PIX' 
                        ? "bg-emerald-600 text-white shadow-lg shadow-emerald-900/20" 
                        : "text-zinc-500 hover:text-zinc-300"
                    )}
                  >
                    PIX
                  </button>
               </div>
            </div>

            <div className="flex items-center gap-4">
              <button 
                onClick={() => setIsDarkMode(!isDarkMode)}
                className={cn(
                  "p-2 rounded-full transition-colors",
                  isDarkMode ? "text-slate-400 hover:text-yellow-400" : "text-slate-500 hover:text-orange-500"
                )}
              >
                {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
              </button>
            </div>
        </header>

        <div className="flex-1 p-6 min-w-0 overflow-hidden">
           <div className={cn(
             "h-full w-full rounded-2xl border overflow-hidden flex flex-col shadow-sm",
             isDarkMode 
               ? "bg-[#1b1b1b] border-zinc-800 shadow-black/20" 
               : "bg-white border-slate-200 shadow-slate-200/50"
           )}>
              <div className="flex-1 overflow-y-auto custom-scrollbar p-6">
                <Outlet />
              </div>
           </div>
        </div>
      </main>
    </div>
  );
};
