:root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow:
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow:
      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }

  #social .button-icon {
    filter: invert(1) brightness(2);
  }
}

#root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  border-inline: 1px solid var(--border);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

body {
  margin: 0;
}

h1,
h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
}

h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}

code,
.counter {
  font-family: var(--mono);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
}

code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
}
import { NavLink, useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { signOut, onAuthStateChanged } from 'firebase/auth';
import { auth } from '../firebase';
import { resolveUserRole } from '../lib/userRole';
import type { UserRole } from '../lib/userRole';

interface LinkDef {
  to: string;
  label: string;
}

const allLinks: LinkDef[] = [
  { to: '/dashboard', label: 'Dashboard' },
  { to: '/project-admin', label: 'Project & Admin' },
  { to: '/subcontractor-log', label: 'Subcontractor Log' },
  { to: '/idle-pool', label: 'Idle Pool' },
  { to: '/hr', label: 'HR' },
  { to: '/attendance-log', label: 'Daily Attendance Log' },
  { to: '/attendance-summary', label: 'Daily Attendance Summary' },
  {
    to: '/master-attendance-summary',
    label: 'Daily Attendance Summary (All Projects)',
  },
  { to: '/man-hours-summary', label: 'Man Hours Summary' },
  { to: '/master-salary-payslip', label: 'Salary & Pay Slip' },
  { to: '/payslip-summary', label: 'Payslip Summary' },
  { to: '/settings', label: 'Settings' },
];

// Which link paths each role is allowed to see. Master sees everything
// (handled separately below, skips this map entirely).
const roleLinkPaths: { [role: string]: string[] } = {
  pm: [
    '/dashboard',
    '/project-admin',
    '/subcontractor-log',
    '/idle-pool',
    '/attendance-log',
    '/attendance-summary',
    '/man-hours-summary',
  ],
  hr: ['/hr', '/idle-pool'],
  accountant: [
    '/master-salary-payslip',
    '/payslip-summary',
    '/master-attendance-summary',
  ],
};

const getVisibleLinks = (role: UserRole | null): LinkDef[] => {
  if (!role) return [];
  if (role.type === 'master') return allLinks;
  if (role.type === 'unknown') return [];
  const allowedPaths = roleLinkPaths[role.type] || [];
  return allLinks.filter((link) => allowedPaths.includes(link.to));
};

export default function Sidebar() {
  const navigate = useNavigate();
  const [role, setRole] = useState<UserRole | null>(null);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user?.email) {
        const resolved = await resolveUserRole(user.email);
        setRole(resolved);
      } else {
        setRole(null);
      }
    });
    return () => unsubscribe();
  }, []);

  const handleLogout = async () => {
    await signOut(auth);
    navigate('/');
  };

  const visibleLinks = getVisibleLinks(role);

  return (
    <div style={styles.sidebar}>
      <div style={styles.logo}>
        <div style={styles.companyName}>Airmech W.L.L</div>
        <div style={styles.appName}>Manpower Mgmt</div>
      </div>
      {visibleLinks.map((link) => (
        <NavLink
          key={link.to}
          to={link.to}
          style={({ isActive }) => ({
            ...styles.link,
            background: isActive ? '#2563eb' : 'transparent',
            color: isActive ? '#fff' : '#333',
          })}
        >
          {link.label}
        </NavLink>
      ))}
      <button onClick={handleLogout} style={styles.logoutButton}>
        Log Out
      </button>
    </div>
  );
}

const FONT_STACK = "'Poppins', 'Segoe UI', Arial, sans-serif";

const styles: { [key: string]: React.CSSProperties } = {
  sidebar: {
    width: '220px',
    height: '100vh',
    background: '#f4f6f8',
    borderRight: '1px solid #ddd',
    fontFamily: FONT_STACK,
    display: 'flex',
    flexDirection: 'column',
    paddingTop: '10px',
  },
  logo: {
    padding: '16px',
    borderBottom: '1px solid #ddd',
    marginBottom: '10px',
  },
  companyName: {
    fontWeight: 800,
    fontSize: '16px',
    color: '#0d9488',
  },
  appName: {
    fontWeight: 600,
    fontSize: '13px',
    color: '#64748b',
    marginTop: '2px',
  },
  link: {
    padding: '12px 16px',
    textDecoration: 'none',
    fontSize: '14px',
    borderRadius: '6px',
    margin: '2px 10px',
  },
  logoutButton: {
    marginTop: 'auto',
    marginBottom: '16px',
    marginLeft: '10px',
    marginRight: '10px',
    padding: '10px 16px',
    background: '#dc2626',
    color: '#fff',
    border: 'none',
    borderRadius: '6px',
    fontSize: '14px',
    cursor: 'pointer',
  },
};