'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { authApi, userApi } from '@/lib/api';
import { ThemeToggle } from '@/components/shared/ThemeToggle';


export default function MainLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const router = useRouter();
  const [userName, setUserName] = useState<string>('');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Check if user is authenticated
    const token = localStorage.getItem('token');
    if (!token) {
      router.push('/login');
      return;
    }

    // Fetch user profile
    userApi.getProfile()
      .then(data => {
        setUserName(data.user.Name);
        setIsLoading(false);
      })
      .catch(() => {
        // If error fetching profile, redirect to login
        router.push('/login');
      });
  }, [router]);

  const handleLogout = () => {
    authApi.logout();
  };

  if (isLoading) {
    return <div className="flex h-screen items-center justify-center">Loading...</div>;
  }

  return (
    <div className="min-h-screen bg-background">
      {/* Top Navigation */}
      <header className="border-b">
        <div className="w-full flex h-16 items-center px-4">
          <div className="flex items-center gap-4">
            <div className="font-semibold text-xl">Finance Management</div>
          </div>
          
          <div className="flex items-center ms-auto gap-4">
            <span className='text-sm font-medium'>Welcome!, {userName}</span>
            <ThemeToggle />
            <Button variant="ghost" size="sm" onClick={handleLogout}>
              Logout
            </Button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="container flex flex-row">
        {/* Sidebar */}
        <aside className="w-64 pt-8 pr-6">
          <nav className="space-y-2">
            <Link href="/dashboard" className="block p-2 rounded-md hover:bg-muted">
              Dashboard
            </Link>
            <Link href="/loans" className="block p-2 rounded-md hover:bg-muted">
              Loans
            </Link>
            <Link href="/goals" className="block p-2 rounded-md hover:bg-muted">
              Goals
            </Link>
            <Link href="/settings" className="block p-2 rounded-md hover:bg-muted">
              Settings
            </Link>
          </nav>
        </aside>

        {/* Page Content */}
        <main className="flex-1 p-8">
          {children}
        </main>
      </div>
    </div>
  );
}