project.linkedcorp.net/frontend/src/app/AppShell.jsx

import { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import { Menu, Sun, Moon, Bell, LogOut, User, Globe, KeyRound, Save } from 'lucide-react';
import { NavigationView } from '../components/NavigationView.jsx';
import { Flyout, FlyoutItem, FlyoutSeparator } from '../components/Flyout.jsx';
import { DetailPopup } from '../components/DetailPopup.jsx';
import { Field } from '../components/Field.jsx';
import { Button } from '../components/Button.jsx';
import { PasswordInput } from '../components/PasswordInput.jsx';
import { useAuth } from '../context/auth-context.jsx';
import { useUi } from '../context/ui-context.jsx';
import { useAsync } from '../hooks/useAsync.js';
import { listNotifications, markAllNotificationsRead, markNotificationRead } from '../services/notifications.js';
import { changePassword } from '../services/auth.js';

const EMPTY_PASSWORD_FORM = { currentPassword: '', newPassword: '', confirmPassword: '' };

export default function AppShell() {
  const [navMode, setNavMode] = useState('expanded');
  const { user, logout } = useAuth();
  const { t, theme, setTheme, lang, setLang, pushToast } = useUi();
  const navigate = useNavigate();

  const { data: notifData, reload: reloadNotifications } = useAsync(listNotifications, []);
  const unread = notifData?.unread || 0;

  const [changingPassword, setChangingPassword] = useState(false);
  const [passwordForm, setPasswordForm] = useState(EMPTY_PASSWORD_FORM);
  const [passwordError, setPasswordError] = useState('');

  function toggleNav() {
    setNavMode((m) => (m === 'expanded' ? 'compact' : 'expanded'));
  }

  async function handleNotificationClick(notification) {
    if (!notification.is_read) await markNotificationRead(notification.id);
    await reloadNotifications();
    if (notification.entity_type === 'project') navigate(`/proyectos/${notification.entity_id}`);
    else if (notification.entity_type === 'activity') navigate(`/proyectos`);
  }

  function openChangePassword() {
    setPasswordForm(EMPTY_PASSWORD_FORM);
    setPasswordError('');
    setChangingPassword(true);
  }

  async function submitChangePassword() {
    setPasswordError('');
    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      setPasswordError(t('register_password_mismatch'));
      return;
    }
    if (passwordForm.newPassword.length < 8) {
      setPasswordError(t('register_password_short'));
      return;
    }
    try {
      await changePassword(passwordForm.currentPassword, passwordForm.newPassword);
      setChangingPassword(false);
      pushToast({ tone: 'success', message: t('change_password_success') });
    } catch (err) {
      setPasswordError(err.message || t('common_error'));
    }
  }

  return (
    <div className="app-shell">
      <NavigationView mode={navMode} />
      <div className="content-column">
        <div className="topbar">
          <div className="topbar-left">
            <button className="icon-btn" onClick={toggleNav}><Menu /></button>
          </div>
          <div className="topbar-right">
            <Flyout trigger={({ onClick }) => (
              <button className="icon-btn" onClick={onClick} style={{ position: 'relative' }}>
                <Bell />
                {unread > 0 && (
                  <span className="badge badge-danger" style={{ position: 'absolute', top: -2, right: -2, padding: '1px 5px', fontSize: '.6rem' }}>{unread}</span>
                )}
              </button>
            )}>
              <div style={{ padding: '6px 10px', fontWeight: 700, fontSize: '.78rem' }}>{t('notifications_title')}</div>
              {(!notifData?.items || notifData.items.length === 0) && (
                <div style={{ padding: '10px', fontSize: '.78rem', color: 'rgb(var(--muted))' }}>{t('notifications_empty')}</div>
              )}
              {notifData?.items?.slice(0, 8).map((n) => (
                <FlyoutItem key={n.id} onClick={() => handleNotificationClick(n)}>
                  <span style={{ fontWeight: n.is_read ? 400 : 700 }}>{n.message}</span>
                </FlyoutItem>
              ))}
              {notifData?.items?.length > 0 && (
                <>
                  <FlyoutSeparator />
                  <FlyoutItem onClick={async () => { await markAllNotificationsRead(); reloadNotifications(); }}>
                    {t('notifications_mark_all_read')}
                  </FlyoutItem>
                </>
              )}
            </Flyout>

            <button className="icon-btn" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
              {theme === 'dark' ? <Sun /> : <Moon />}
            </button>
            <button className="icon-btn" onClick={() => setLang(lang === 'es-EC' ? 'en-US' : 'es-EC')} title={lang}>
              <Globe />
            </button>

            <Flyout trigger={({ onClick }) => (
              <button className="icon-btn" onClick={onClick}><User /></button>
            )}>
              <div style={{ padding: '8px 10px' }}>
                <div style={{ fontWeight: 700, fontSize: '.82rem' }}>{user?.name}</div>
                <div style={{ fontSize: '.7rem', color: 'rgb(var(--muted))' }}>{user?.roleName || user?.roleCode}</div>
              </div>
              <FlyoutSeparator />
              <FlyoutItem icon={KeyRound} onClick={openChangePassword}>
                {t('change_password_title')}
              </FlyoutItem>
              <FlyoutItem icon={LogOut} danger onClick={() => { logout(); navigate('/login'); }}>
                {t('logout')}
              </FlyoutItem>
            </Flyout>
          </div>
        </div>
        <div className="content-area">
          <Outlet />
        </div>
      </div>

      <DetailPopup open={changingPassword} title={t('change_password_title')} onClose={() => setChangingPassword(false)} width={420} height={380}>
        {passwordError && <div className="login-error">{passwordError}</div>}
        <Field label={t('change_password_current')}>
          <PasswordInput value={passwordForm.currentPassword} onChange={(e) => setPasswordForm((f) => ({ ...f, currentPassword: e.target.value }))} autoFocus />
        </Field>
        <Field label={t('reset_password_new')}>
          <PasswordInput value={passwordForm.newPassword} onChange={(e) => setPasswordForm((f) => ({ ...f, newPassword: e.target.value }))} />
        </Field>
        <Field label={t('register_password_confirm')}>
          <PasswordInput value={passwordForm.confirmPassword} onChange={(e) => setPasswordForm((f) => ({ ...f, confirmPassword: e.target.value }))} />
        </Field>
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="accent" icon={Save} onClick={submitChangePassword}>{t('common_save')}</Button>
          <Button variant="standard" onClick={() => setChangingPassword(false)}>{t('common_cancel')}</Button>
        </div>
      </DetailPopup>
    </div>
  );
}