"use client";
import { Divider, Stack, Text } from '@mantine/core';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import { useRouter } from "next/navigation";

export default function Layout({ children }: { children: React.ReactNode }) {
    const [authorized, SetAuthorized] = useState<boolean | null>(null);
    const router = useRouter();
    const pathname = usePathname();

    const links = [
        { label: "Account Summary", href: "/accounts" },
        { label: "Statement of Account", href: "/accounts/account_statement" },
        { label: "Account Details", href: "/accounts/account_details" },
    ];
    useEffect(() => {
        const token = localStorage.getItem("access_token");
        if (!token) {
            SetAuthorized(false);
            router.push("/login");
        }
        else {
            SetAuthorized(true);
        }
    }, []);

    if (authorized) {
        return (
            <div style={{ display: "flex", height: '100%' }}>
                <div
                    style={{
                        width: "16%",
                        backgroundColor: '#c5e4f9',
                        borderRight: "1px solid #ccc",
                    }}
                >
                    <Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}>
                        <Text fw={700} fs="italic" c='white' style={{ textAlign: 'center', marginTop: '10px' }}>
                            Accounts
                        </Text>
                    </Stack>

                    <Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
                        {links.map(link => {
                            const isActive = pathname === link.href;
                            return (
                                <Text
                                    key={link.href}
                                    component={Link}
                                    href={link.href}
                                    c={isActive ? 'darkblue' : 'blue'}
                                    style={{
                                        textDecoration: isActive ? 'underline' : 'none',
                                        fontWeight: isActive ? 600 : 400,
                                    }}
                                >
                                    {link.label}
                                </Text>
                            );
                        })}
                    </Stack>
                </div>

                <div style={{ flex: 1, padding: '1rem' }}>
                    {children}
                </div>
            </div>
        );
    }
}