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;
}

// Media query hook
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;
}

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' },
  statNum:      { fontSize: '28px', fontWeight: 800, color: '#f8f9fa' },
  statLbl:      { fontSize: '11px', color: '#b5b5c0', marginTop: '4px' },
  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 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]);

  useEffect(() => {
    const q = search.toLowerCase();
    setFiltered(employees.filter(e =>
      e.name.toLowerCase().includes(q) ||
      (e.department || '').toLowerCase().includes(q) ||
      (e.supervisor || '').toLowerCase().includes(q)
    ));
  }, [search, employees]);

  const atRiskCount = employees.filter(e => isAtRisk(e.active_points)).length;
  const activeCount = employees.filter(e => e.active_points > 0).length;
  const cleanCount  = employees.filter(e => e.active_points === 0).length;
  const maxPoints   = employees.reduce((m, e) => Math.max(m, e.active_points), 0);

  return (
    <>
      <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</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">
          <div style={s.statCard} className="dashboard-stat-card">
            <div style={s.statNum} className="stat-num">{employees.length}</div>
            <div style={s.statLbl} className="stat-lbl">Total Employees</div>
          </div>
          <div style={{ ...s.statCard, borderTop: '3px solid #28a745' }} className="dashboard-stat-card">
            <div style={{ ...s.statNum, color: '#6ee7b7' }} className="stat-num">{cleanCount}</div>
            <div style={s.statLbl} className="stat-lbl">Elite Standing (0 pts)</div>
          </div>
          <div style={{ ...s.statCard, borderTop: '3px solid #d4af37' }} className="dashboard-stat-card">
            <div style={{ ...s.statNum, color: '#ffd666' }} className="stat-num">{activeCount}</div>
            <div style={s.statLbl} className="stat-lbl">With Active Points</div>
          </div>
          <div style={{ ...s.statCard, borderTop: '3px solid #ffb020' }} className="dashboard-stat-card">
            <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>
          </div>
          <div style={{ ...s.statCard, borderTop: '3px solid #c0392b' }} 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)} />}
    </>
  );
}
