'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import StoreLayout from '@/components/layout/StoreLayout';
import { useAuth } from '@/context/AuthContext';
import { useLanguage } from '@/context/LanguageContext';
import styles from './account.module.css';

export default function AccountLayout({ children }: { children: React.ReactNode }) {
  const { user, logout } = useAuth();
  const { t, language } = useLanguage();
  const pathname = usePathname();
  const router = useRouter();

  if (!user) {
    if (typeof window !== 'undefined') {
      router.push('/auth/login');
    }
    return <StoreLayout><div style={{ minHeight: '60vh' }}></div></StoreLayout>;
  }

  const links = [
    { href: '/account', label: t.account.title, icon: '🏠' },
    { href: '/account/orders', label: t.account.orders, icon: '📦' },
    { href: '/account/wishlist', label: t.account.wishlist, icon: '❤️' },
    { href: '/account/addresses', label: t.account.addresses, icon: '📍' },
    { href: '/account/profile', label: t.account.profile, icon: '👤' },
  ];

  return (
    <StoreLayout>
      <div className="container">
        <div className={styles.layout}>
          <aside className={styles.sidebar}>
            <div className={styles.userInfo}>
              <div className={styles.avatar}>{user.name[0]}</div>
              <div>
                <div className={styles.userName}>{user.name}</div>
                <div className={styles.userEmail}>{user.email}</div>
              </div>
            </div>
            
            <nav style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
              {links.map(link => (
                <Link 
                  key={link.href} 
                  href={link.href} 
                  className={`${styles.navLink} ${pathname === link.href ? styles.activeLink : ''}`}
                >
                  <span style={{ fontSize: '1.2rem', width: '24px' }}>{link.icon}</span>
                  {link.label}
                </Link>
              ))}
              <button className={`${styles.navLink} ${styles.logoutBtn}`} onClick={() => { logout(); router.push('/'); }}>
                <span style={{ fontSize: '1.2rem', width: '24px' }}>🚪</span>
                {t.account.logout}
              </button>
            </nav>
          </aside>
          <main className={styles.content}>
            {children}
          </main>
        </div>
      </div>
    </StoreLayout>
  );
}
