import React from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import { HiMoon, HiSun } from 'react-icons/hi';
import { useLocale } from '@/app/providers/LocaleProvider';
import { useTheme } from '@/app/providers/ThemeProvider';
import { useAuthStore } from '@/features/auth/store/authStore';
import { Button } from '@/shared/components/ui';
import { ROUTES } from '@/shared/constants/routes';
import { PortalIconButton } from '@/features/departmentPortal/components/departmentPortalStyles';
import { useBrandingLogos } from '@/shared/hooks/useBrandingLogos';

const Shell = styled.div`
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: ${({ theme }) => theme.colors.background};
`;

const Header = styled.header`
  height: 64px;
  background-color: ${({ theme }) => theme.colors.surface};
  border-bottom: 1px solid ${({ theme }) => theme.colors.borderSoft};
  box-shadow: ${({ theme }) => theme.shadows.xs};
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 ${({ theme }) => theme.layout.pagePadding};
  position: sticky;
  top: 0;
  z-index: ${({ theme }) => theme.zIndex.sticky};

  @media (max-width: 640px) {
    padding: 0 ${({ theme }) => theme.spacing[4]};
  }
`;

const LogoContainer = styled.button`
  display: flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[3]};
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
`;

const LogoImage = styled.img`
  height: 60px;
  width: auto;
  max-width: 100%;
`;

const HeaderActions = styled.div`
  display: flex;
  align-items: center;
  gap: ${({ theme }) => theme.spacing[2]};
`;

const Main = styled.main`
  flex: 1;
  padding: ${({ theme }) => theme.layout.pagePadding};
  max-width: 100%;

  @media (max-width: 768px) {
    padding: ${({ theme }) => theme.spacing[6]} ${({ theme }) => theme.spacing[4]};
  }

  @media (max-width: 480px) {
    padding: ${({ theme }) => theme.spacing[5]} ${({ theme }) => theme.spacing[3]};
  }
`;

interface DepartmentPortalLayoutProps {
  children: React.ReactNode;
  departmentSlug?: string;
}

export const DepartmentPortalLayout: React.FC<DepartmentPortalLayoutProps> = ({
  children,
  departmentSlug,
}) => {
  const navigate = useNavigate();
  const { locale, setLocale, t } = useLocale();
  const { mode, toggleTheme } = useTheme();
  const { landscape } = useBrandingLogos();
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);

  const portalHome = departmentSlug
    ? ROUTES.DEPARTMENT_PORTAL(departmentSlug)
    : ROUTES.DASHBOARD;

  const handleLogoClick = () => {
    if (isAuthenticated) {
      navigate(ROUTES.DASHBOARD);
      return;
    }
    navigate(portalHome);
  };

  const redirectTarget = encodeURIComponent(
    window.location.pathname + window.location.search,
  );
  const loginTo = {
    pathname: ROUTES.LOGIN,
    search: `?redirect=${redirectTarget}`,
  };

  return (
    <Shell>
      <Header>
        <LogoContainer type="button" onClick={handleLogoClick} aria-label={t('common:app.name')}>
          <LogoImage src={landscape} alt={t('common:app.logoAlt')} />
        </LogoContainer>
        <HeaderActions>
          {!isAuthenticated ? (
            <Button variant="outline" size="sm" onClick={() => navigate(loginTo)}>
              {t('auth:login.title')}
            </Button>
          ) : null}
          <PortalIconButton
            type="button"
            onClick={() => setLocale(locale === 'en' ? 'ar' : 'en')}
            aria-label={t('common:language.switch')}
          >
            {locale === 'en' ? 'ع' : 'EN'}
          </PortalIconButton>
          <PortalIconButton
            type="button"
            onClick={toggleTheme}
            aria-label={t('common:theme.toggle')}
          >
            {mode === 'light' ? <HiMoon /> : <HiSun />}
          </PortalIconButton>
        </HeaderActions>
      </Header>
      <Main>{children}</Main>
    </Shell>
  );
};