cpas/client/src/components/Dashboard.jsx

import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import CpasBadge, { getTier } from './CpasBadge';
import EmployeeModal from './EmployeeModal';
import AuditLog from './AuditLog';
import DashboardMobile from './DashboardMobile';

const AT_RISK_THRESHOLD = 2;

const TIERS = [
  { min: 0,  max: 4   },
  { min: 5,  max: 9   },
  { min: 10, max: 14  },
  { min: 15, max: 19  },
  { min: 20, max: 24  },
  { min: 25, max: 29  },
  { min: 30, max: 999 },
];

function nextTierBoundary(points) {
  for (const t of TIERS) {
    if (points >= t.min && points <= t.max && t.max < 999) return t.max + 1;
  }
  return null;
}

function isAtRisk(points) {
  const boundary = nextTierBoundary(points);
  return boundary !== null && (boundary - points) <= AT_RISK_THRESHOLD;
}

// TODO [MAJOR #8]: Same hook is defined in App.jsx — extract to src/hooks/useMediaQuery.js
// Also: `matches` in the dep array can cause a loop on strict-mode initial mount.
function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);
  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) setMatches(media.matches);
    const listener = () => setMatches(media.matches);
    media.addEventListener('change', listener);
    return () => media.removeEventListener('change', listener);
  }, [matches, query]);
  return matches;
}

// Filter keys
const FILTER_NONE     = null;
const FILTER_TOTAL    = 'total';
const FILTER_ELITE    = 'elite';
const FILTER_ACTIVE   = 'active';
const FILTER_AT_RISK  = 'at_risk';

const s = {
  wrap:         { padding: '32px 40px', color: '#f8f9fa' },
  header:       { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px', flexWrap: 'wrap', gap: '12px' },
  title:        { fontSize: '24px', fontWeight: 700, color: '#f8f9fa' },
  subtitle:     { fontSize: '13px', color: '#b5b5c0', marginTop: '3px' },
  statsRow:     { display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '28px' },
  statCard:     { flex: '1', minWidth: '140px', background: '#181924', border: '1px solid #303136', borderRadius: '8px', padding: '16px', textAlign: 'center', cursor: 'pointer', transition: 'border-color 0.15s, box-shadow 0.15s' },
  statCardActive: { boxShadow: '0 0 0 2px #d4af37', border: '1px solid #d4af37' },
  statNum:      { fontSize: '28px', fontWeight: 800, color: '#f8f9fa' },
  statLbl:      { fontSize: '11px', color: '#b5b5c0', marginTop: '4px' },
  filterBadge:  { fontSize: '10px', color: '#d4af37', marginTop: '4px', fontWeight: 600 },
  search:       { padding: '10px 14px', border: '1px solid #333544', borderRadius: '6px', fontSize: '14px', width: '260px', background: '#050608', color: '#f8f9fa' },
  table:        { width: '100%', borderCollapse: 'collapse', background: '#111217', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 1px 8px rgba(0,0,0,0.6)', border: '1px solid #222' },
  th:           { background: '#000000', color: '#f8f9fa', padding: '10px 14px', textAlign: 'left', fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' },
  td:           { padding: '11px 14px', borderBottom: '1px solid #1c1d29', fontSize: '13px', verticalAlign: 'middle', color: '#f8f9fa' },
  nameBtn:      { background: 'none', border: 'none', cursor: 'pointer', fontWeight: 600, color: '#d4af37', fontSize: '14px', padding: 0, textDecoration: 'underline dotted' },
  atRiskBadge:  { display: 'inline-block', marginLeft: '8px', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#3b2e00', color: '#ffd666', border: '1px solid #d4af37', verticalAlign: 'middle' },
  zeroRow:      { color: '#77798a', fontStyle: 'italic', fontSize: '12px' },
  toolbarRight: { display: 'flex', gap: '10px', alignItems: 'center' },
  refreshBtn:   { padding: '9px 18px', background: '#d4af37', color: '#000', border: 'none', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
  auditBtn:     { padding: '9px 18px', background: 'none', color: '#9ca0b8', border: '1px solid #2a2b3a', borderRadius: '6px', cursor: 'pointer', fontWeight: 600, fontSize: '13px' },
};

// Mobile styles
const mobileStyles = `
  @media (max-width: 768px) {
    .dashboard-wrap {
      padding: 16px !important;
    }
    .dashboard-header {
      flex-direction: column;
      align-items: flex-start !important;
    }
    .dashboard-title {
      font-size: 20px !important;
    }
    .dashboard-subtitle {
      font-size: 12px !important;
    }
    .dashboard-stats {
      gap: 10px !important;
    }
    .dashboard-stat-card {
      min-width: calc(50% - 5px) !important;
      padding: 12px !important;
    }
    .stat-num {
      font-size: 24px !important;
    }
    .stat-lbl {
      font-size: 10px !important;
    }
    .toolbar-right {
      width: 100%;
      flex-direction: column;
    }
    .search-input {
      width: 100% !important;
    }
    .toolbar-btn {
      width: 100%;
      justify-content: center;
    }
  }

  @media (max-width: 480px) {
    .dashboard-stat-card {
      min-width: 100% !important;
    }
  }
`;

export default function Dashboard() {
  const [employees,   setEmployees]   = useState([]);
  const [filtered,    setFiltered]    = useState([]);
  const [search,      setSearch]      = useState('');
  const [selectedId,  setSelectedId]  = useState(null);
  const [showAudit,   setShowAudit]   = useState(false);
  const [loading,     setLoading]     = useState(true);
  const [activeFilter, setActiveFilter] = useState(FILTER_NONE);
  const isMobile = useMediaQuery('(max-width: 768px)');

  const load = useCallback(() => {
    setLoading(true);
    axios.get('/api/dashboard')
      .then(r => { setEmployees(r.data); setFiltered(r.data); })
      .finally(() => setLoading(false));
  }, []);

  useEffect(() => { load(); }, [load]);

  // Apply search + badge filter together
  useEffect(() => {
    const q = search.toLowerCase();
    let base = employees;

    if (activeFilter === FILTER_ELITE) {
      base = base.filter(e => e.active_points >= 0 && e.active_points <= 4);
    } else if (activeFilter === FILTER_ACTIVE) {
      base = base.filter(e => e.active_points > 0);
    } else if (activeFilter === FILTER_AT_RISK) {
      base = base.filter(e => isAtRisk(e.active_points));
    }
    // FILTER_TOTAL and FILTER_NONE show all

    if (q) {
      base = base.filter(e =>
        e.name.toLowerCase().includes(q) ||
        (e.department || '').toLowerCase().includes(q) ||
        (e.supervisor || '').toLowerCase().includes(q)
      );
    }

    setFiltered(base);
  }, [search, employees, activeFilter]);

  const atRiskCount = employees.filter(e => isAtRisk(e.active_points)).length;
  const activeCount = employees.filter(e => e.active_points > 0).length;
  // Elite Standing: 0–4 pts (Tier 0-1)
  const eliteCount  = employees.filter(e => e.active_points >= 0 && e.active_points <= 4).length;
  const maxPoints   = employees.reduce((m, e) => Math.max(m, e.active_points), 0);

  function handleBadgeClick(filterKey) {
    setActiveFilter(prev => prev === filterKey ? FILTER_NONE : filterKey);
  }

  function cardStyle(filterKey, extra = {}) {
    const isActive = activeFilter === filterKey;
    return {
      ...s.statCard,
      ...(isActive ? s.statCardActive : {}),
      ...extra,
    };
  }

  return (
    <>
      {/* TODO [MAJOR #9]: Same mobileStyles block exists in App.jsx. Move to mobile.css */}
      <style>{mobileStyles}</style>
      <div style={s.wrap} className="dashboard-wrap">
        <div style={s.header} className="dashboard-header">
          <div>
            <div style={s.title} className="dashboard-title">Company Dashboard</div>
            <div style={s.subtitle} className="dashboard-subtitle">
              Click any employee name to view their full profile
              {activeFilter && activeFilter !== FILTER_NONE && (
                <span style={{ marginLeft: '10px', color: '#d4af37', fontWeight: 600 }}>
                  · Filtered: {activeFilter === FILTER_ELITE ? 'Elite Standing (0–4 pts)' : activeFilter === FILTER_ACTIVE ? 'With Active Points' : activeFilter === FILTER_AT_RISK ? 'At Risk' : 'All'}
                  <button
                    onClick={() => setActiveFilter(FILTER_NONE)}
                    style={{ marginLeft: '6px', background: 'none', border: 'none', color: '#9ca0b8', cursor: 'pointer', fontSize: '12px' }}
                    title="Clear filter"
                  >✕</button>
                </span>
              )}
            </div>
          </div>
          <div style={s.toolbarRight} className="toolbar-right">
            <input
              style={s.search}
              className="search-input"
              placeholder="Search name, dept, supervisor…"
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
            <button style={s.auditBtn} className="toolbar-btn" onClick={() => setShowAudit(true)}>📋 Audit Log</button>
            <button style={s.refreshBtn} className="toolbar-btn" onClick={load}>↻ Refresh</button>
          </div>
        </div>

        <div style={s.statsRow} className="dashboard-stats">
          {/* Total Employees — clicking shows all */}
          <div
            style={cardStyle(FILTER_TOTAL)}
            className="dashboard-stat-card"
            onClick={() => handleBadgeClick(FILTER_TOTAL)}
            title="Click to show all employees"
          >
            <div style={s.statNum} className="stat-num">{employees.length}</div>
            <div style={s.statLbl} className="stat-lbl">Total Employees</div>
            {activeFilter === FILTER_TOTAL && <div style={s.filterBadge}>▼ Showing All</div>}
          </div>

          {/* Elite Standing: 0–4 pts */}
          <div
            style={cardStyle(FILTER_ELITE, { borderTop: '3px solid #28a745' })}
            className="dashboard-stat-card"
            onClick={() => handleBadgeClick(FILTER_ELITE)}
            title="Click to filter: Elite Standing (0–4 pts)"
          >
            <div style={{ ...s.statNum, color: '#6ee7b7' }} className="stat-num">{eliteCount}</div>
            <div style={s.statLbl} className="stat-lbl">Elite Standing (0–4 pts)</div>
            {activeFilter === FILTER_ELITE && <div style={s.filterBadge}>▼ Filtered</div>}
          </div>

          {/* With Active Points */}
          <div
            style={cardStyle(FILTER_ACTIVE, { borderTop: '3px solid #d4af37' })}
            className="dashboard-stat-card"
            onClick={() => handleBadgeClick(FILTER_ACTIVE)}
            title="Click to filter: employees with active points"
          >
            <div style={{ ...s.statNum, color: '#ffd666' }} className="stat-num">{activeCount}</div>
            <div style={s.statLbl} className="stat-lbl">With Active Points</div>
            {activeFilter === FILTER_ACTIVE && <div style={s.filterBadge}>▼ Filtered</div>}
          </div>

          {/* At Risk */}
          <div
            style={cardStyle(FILTER_AT_RISK, { borderTop: '3px solid #ffb020' })}
            className="dashboard-stat-card"
            onClick={() => handleBadgeClick(FILTER_AT_RISK)}
            title={`Click to filter: at risk (≤${AT_RISK_THRESHOLD} pts to next tier)`}
          >
            <div style={{ ...s.statNum, color: '#ffdf8a' }} className="stat-num">{atRiskCount}</div>
            <div style={s.statLbl} className="stat-lbl">At Risk (≤{AT_RISK_THRESHOLD} pts to next tier)</div>
            {activeFilter === FILTER_AT_RISK && <div style={s.filterBadge}>▼ Filtered</div>}
          </div>

          {/* Highest Score — display only, no filter */}
          <div
            style={{ ...s.statCard, borderTop: '3px solid #c0392b', cursor: 'default' }}
            className="dashboard-stat-card"
          >
            <div style={{ ...s.statNum, color: '#ff8a80' }} className="stat-num">{maxPoints}</div>
            <div style={s.statLbl} className="stat-lbl">Highest Active Score</div>
          </div>
        </div>

        {loading ? (
          <p style={{ color: '#77798a', textAlign: 'center', padding: '40px' }}>Loading…</p>
        ) : isMobile ? (
          <DashboardMobile employees={filtered} onEmployeeClick={setSelectedId} />
        ) : (
          <table style={s.table}>
            <thead>
              <tr>
                <th style={s.th}>#</th>
                <th style={s.th}>Employee</th>
                <th style={s.th}>Department</th>
                <th style={s.th}>Supervisor</th>
                <th style={s.th}>Tier / Standing</th>
                <th style={s.th}>Active Points</th>
                <th style={s.th}>90-Day Violations</th>
              </tr>
            </thead>
            <tbody>
              {filtered.length === 0 && (
                <tr>
                  <td colSpan={7} style={{ ...s.td, textAlign: 'center', ...s.zeroRow }}>
                    No employees found.
                  </td>
                </tr>
              )}
              {filtered.map((emp, i) => {
                const risk     = isAtRisk(emp.active_points);
                const tier     = getTier(emp.active_points);
                const boundary = nextTierBoundary(emp.active_points);
                return (
                  <tr
                    key={emp.id}
                    style={{ background: risk ? '#181200' : i % 2 === 0 ? '#111217' : '#151622' }}
                  >
                    <td style={{ ...s.td, color: '#77798a', fontSize: '12px' }}>{i + 1}</td>
                    <td style={s.td}>
                      <button style={s.nameBtn} onClick={() => setSelectedId(emp.id)}>
                        {emp.name}
                      </button>
                      {risk && (
                        <span style={s.atRiskBadge}>
                          ⚠ {boundary - emp.active_points} pt{boundary - emp.active_points > 1 ? 's' : ''} to {getTier(boundary).label.split('—')[0].trim()}
                        </span>
                      )}
                    </td>
                    <td style={{ ...s.td, color: '#c0c2d6' }}>{emp.department || '—'}</td>
                    <td style={{ ...s.td, color: '#c0c2d6' }}>{emp.supervisor || '—'}</td>
                    <td style={s.td}><CpasBadge points={emp.active_points} /></td>
                    <td style={{ ...s.td, fontWeight: 700, color: tier.color, fontSize: '16px' }}>
                      {emp.active_points}
                    </td>
                    <td style={{ ...s.td, color: '#c0c2d6' }}>{emp.violation_count}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {selectedId && (
        <EmployeeModal
          employeeId={selectedId}
          onClose={() => { setSelectedId(null); load(); }}
        />
      )}
      {showAudit && <AuditLog onClose={() => setShowAudit(false)} />}
    </>
  );
}