family_budget/frontend/src/components/Layout.tsx

import { useState, useEffect, useRef, useCallback, type ReactNode } from 'react';
import { NavLink } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { useImport } from '../context/ImportContext';

function ImportProgressBar() {
  const { importState, clearImport } = useImport();
  const [visible, setVisible] = useState(false);
  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);

  const isActive = importState.active;
  const isDone = importState.stage === 'done';
  const isError = importState.stage === 'error';
  const showBar = isActive || isDone || isError;

  useEffect(() => {
    if (showBar) {
      setVisible(true);
      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
    }
    if (isDone || isError) {
      hideTimerRef.current = setTimeout(() => {
        setVisible(false);
        clearImport();
      }, 10_000);
    }
    return () => {
      if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
    };
  }, [showBar, isDone, isError, clearImport]);

  const handleClick = useCallback(() => {
    if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
    setVisible(false);
    clearImport();
  }, [clearImport]);

  if (!visible) return null;

  const barClass = isError
    ? 'import-progress-bar import-progress-bar--error'
    : isDone
      ? 'import-progress-bar import-progress-bar--done'
      : 'import-progress-bar';

  const labelText = isError
    ? `Ошибка импорта: ${importState.message}`
    : isDone && importState.result
      ? `Импорт завершён — ${importState.result.imported} операций`
      : `${importState.message} ${importState.progress}%`;

  return (
    <div className={barClass}>
      <div
        className="import-progress-bar__fill"
        style={{ width: `${isDone ? 100 : importState.progress}%` }}
      />
      <button
        type="button"
        className={`import-progress-label ${isDone || isError ? 'import-progress-label--clickable' : ''}`}
        onClick={isDone || isError ? handleClick : undefined}
      >
        {labelText}
      </button>
    </div>
  );
}

export function Layout({ children }: { children: ReactNode }) {
  const { user, logout } = useAuth();
  const [drawerOpen, setDrawerOpen] = useState(false);

  const closeDrawer = () => setDrawerOpen(false);

  return (
    <div className="layout">
      <ImportProgressBar />

      <button
        type="button"
        className="burger-btn"
        aria-label="Открыть меню"
        onClick={() => setDrawerOpen(true)}
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <line x1="3" y1="6" x2="21" y2="6" />
          <line x1="3" y1="12" x2="21" y2="12" />
          <line x1="3" y1="18" x2="21" y2="18" />
        </svg>
      </button>

      {drawerOpen && (
        <div
          className="sidebar-overlay"
          aria-hidden="true"
          onClick={closeDrawer}
        />
      )}

      <aside className={`sidebar ${drawerOpen ? 'sidebar-open' : ''}`}>
        <div className="sidebar-brand">
          <span className="sidebar-brand-icon">₽</span>
          <span className="sidebar-brand-text">Семейный бюджет</span>
        </div>

        <nav className="sidebar-nav">
          <NavLink
            to="/history"
            className={({ isActive }) =>
              `nav-link${isActive ? ' active' : ''}`
            }
            onClick={closeDrawer}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
              <polyline points="14,2 14,8 20,8" />
              <line x1="16" y1="13" x2="8" y2="13" />
              <line x1="16" y1="17" x2="8" y2="17" />
              <polyline points="10,9 9,9 8,9" />
            </svg>
            Операции
          </NavLink>

          <NavLink
            to="/analytics"
            className={({ isActive }) =>
              `nav-link${isActive ? ' active' : ''}`
            }
            onClick={closeDrawer}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="18" y1="20" x2="18" y2="10" />
              <line x1="12" y1="20" x2="12" y2="4" />
              <line x1="6" y1="20" x2="6" y2="14" />
            </svg>
            Аналитика
          </NavLink>

          <NavLink
            to="/settings"
            className={({ isActive }) =>
              `nav-link${isActive ? ' active' : ''}`
            }
            onClick={closeDrawer}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="3" />
              <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
            </svg>
            Настройки
          </NavLink>
        </nav>

        <div className="sidebar-footer">
          <span className="sidebar-user">{user?.login}</span>
          <button className="btn-logout" onClick={() => logout()}>
            Выход
          </button>
        </div>
      </aside>

      <main className="main-content">{children}</main>
    </div>
  );
}