import { type ReactElement, type ReactNode } from 'react';
import { NavLink } from '@lilith/ui-router';
import styled from '@lilith/ui-styled-components';
import {
  BarChart3,
  Calendar,
  CheckSquare,
  FileText,
  Image,
  Mail,
  MessageSquare,
  Settings,
  Users,
} from 'lucide-react';
import { GlobalSearch } from '@/components/GlobalSearch';

const TOKENS = {
  bg: '#0a0a0f',
  border: '#2a2a38',
  elevated: '#1c1c26',
  card: '#13131a',
  text: '#f0e6d3',
  textMuted: '#8a8a9a',
  gold: '#c9a84c',
  goldMuted: 'rgba(201, 168, 76, 0.15)',
};

const NAV_ITEMS: { to: string; label: string; end: boolean; icon: ReactNode }[] = [
  { to: '/dashboard', label: 'Dashboard', end: true, icon: <BarChart3 size={16} /> },
  { to: '/messages', label: 'Messages', end: false, icon: <MessageSquare size={16} /> },
  { to: '/contacts', label: 'Contacts', end: false, icon: <Users size={16} /> },
  { to: '/photos', label: 'Photos', end: false, icon: <Image size={16} /> },
  { to: '/mail', label: 'Mail', end: false, icon: <Mail size={16} /> },
  { to: '/calendar', label: 'Calendar', end: false, icon: <Calendar size={16} /> },
  { to: '/reminders', label: 'Reminders', end: false, icon: <CheckSquare size={16} /> },
  { to: '/notes', label: 'Notes', end: false, icon: <FileText size={16} /> },
  { to: '/settings', label: 'Settings', end: false, icon: <Settings size={16} /> },
];

const Root = styled.div`
  display: flex;
  height: 100%;
  background-color: #0d0d14;
  color: #e0e0f0;
`;

const Sidebar = styled.nav`
  width: 200px;
  flex-shrink: 0;
  background: ${TOKENS.bg};
  border-right: 1px solid ${TOKENS.border};
  display: flex;
  flex-direction: column;

  @media (max-width: 640px) {
    width: 100%;
    height: 56px;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid ${TOKENS.border};
    overflow-x: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
  }
`;

const Brand = styled.div`
  padding: 20px 20px 16px;
  border-bottom: 1px solid ${TOKENS.border};

  @media (max-width: 640px) {
    display: none;
  }
`;

const BrandTitle = styled.span`
  font-size: 15px;
  font-weight: 700;
  color: ${TOKENS.gold};
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: 0.02em;
`;

const BrandSub = styled.span`
  display: block;
  font-size: 11px;
  color: ${TOKENS.textMuted};
  margin-top: 2px;
`;

const NavList = styled.ul`
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;

  @media (max-width: 640px) {
    display: flex;
    flex-direction: row;
    padding: 0;
    align-items: stretch;
  }
`;

const NavItem = styled.li`
  @media (max-width: 640px) {
    flex: 1;
  }
`;

const StyledNavLink = styled(NavLink)`
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: ${TOKENS.textMuted};
  transition: color 0.15s, background 0.15s;
  border-radius: 0;

  &:hover {
    color: ${TOKENS.text};
    background: ${TOKENS.card};
    text-decoration: none;
  }

  &.active {
    color: ${TOKENS.gold};
    background: ${TOKENS.goldMuted};
  }

  @media (max-width: 640px) {
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
    padding: 8px 4px;
    justify-content: center;
    height: 100%;
  }
`;

const Main = styled.main`
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;

  @media (max-width: 640px) {
    padding-bottom: 56px;
  }
`;

interface AppShellProps {
  children: ReactNode;
}

export function AppShell({ children }: AppShellProps): ReactElement {
  return (
    <Root>
      <Sidebar aria-label="Primary navigation">
        <Brand aria-hidden="true">
          <BrandTitle>Mac Sync</BrandTitle>
          <BrandSub>Unified dashboard</BrandSub>
        </Brand>
        <GlobalSearch />
        <NavList role="list">
          {NAV_ITEMS.map(({ to, label, end, icon }) => (
            <NavItem key={to}>
              <StyledNavLink to={to} end={end} aria-label={label}>
                {icon}
                <span>{label}</span>
              </StyledNavLink>
            </NavItem>
          ))}
        </NavList>
      </Sidebar>
      <Main>{children}</Main>
    </Root>
  );
}
