'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Sidebar from '@/components/sidebar';
import { isAuthenticated } from '@/lib/auth';

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    if (!isAuthenticated()) router.replace('/login');
  }, [router]);

  return (
    <div className="flex min-h-screen bg-[#FAF7F2]">
      {/* Mobile overlay */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-20 md:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      <Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />

      <div className="flex-1 min-w-0 flex flex-col overflow-y-auto">
        {/* Mobile top bar */}
        <div className="sticky top-0 z-10 md:hidden flex items-center h-14 px-4 bg-[#0E0F12] border-b border-[#1F2024]">
          <button
            onClick={() => setSidebarOpen(true)}
            className="text-[#FAF7F2] p-1.5 rounded-lg hover:bg-[#1F2024] transition-colors"
            aria-label="Abrir menu"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M3 12h18M3 6h18M3 18h18" />
            </svg>
          </button>
          <span className="ml-3 text-[#FAF7F2] font-semibold text-sm tracking-tight">Klavo</span>
        </div>

        <main className="flex-1 p-4 md:p-8">
          {children}
        </main>
        <footer className="px-8 py-4 border-t border-gray-200 bg-white">
          <p className="text-xs text-gray-400">
            &copy; {new Date().getFullYear()} RAVAPI Soluções &mdash;{' '}
            <a href="https://ravapi.com" target="_blank" rel="noopener noreferrer" className="hover:text-gray-600 transition-colors">
              ravapi.com
            </a>
          </p>
        </footer>
      </div>
    </div>
  );
}