import { useState, useEffect } from 'react';
import './styles.css';

interface Staff {
  id: string;
  name: string;
  role: string;
  active: boolean;
  shift: 'morning' | 'evening' | 'off';
  sales: number;
  orders: number;
  avgCheck: number;
  hours: number;
}

export default function StaffDashboard() {
  const [staff, setStaff] = useState<Staff[]>([]);
  const [filter, setFilter] = useState<string>('all');

  useEffect(() => {
    // Mock data
    setStaff([
      { id: '1', name: 'Mike Chen', role: 'Server', active: true, shift: 'morning', sales: 2847.50, orders: 32, avgCheck: 89.00, hours: 38.5 },
      { id: '2', name: 'Lisa Park', role: 'Server', active: true, shift: 'evening', sales: 3125.75, orders: 45, avgCheck: 69.46, hours: 42.0 },
      { id: '3', name: 'Tom Wilson', role: 'Bartender', active: true, shift: 'evening', sales: 1834.25, orders: 28, avgCheck: 65.51, hours: 40.0 },
      { id: '4', name: 'Sarah Johnson', role: 'Server', active: false, shift: 'off', sales: 1245.00, orders: 18, avgCheck: 69.17, hours: 24.0 },
      { id: '5', name: 'David Kim', role: 'Host', active: true, shift: 'morning', sales: 0, orders: 0, avgCheck: 0, hours: 35.0 },
      { id: '6', name: 'Emma Davis', role: 'Chef', active: true, shift: 'morning', sales: 0, orders: 156, avgCheck: 0, hours: 44.0 },
      { id: '7', name: 'John Smith', role: 'Server', active: true, shift: 'evening', sales: 2567.80, orders: 38, avgCheck: 67.57, hours: 36.5 },
      { id: '8', name: 'Amy Chen', role: 'Busser', active: true, shift: 'evening', sales: 0, orders: 0, avgCheck: 0, hours: 32.0 },
    ]);
  }, []);

  const filteredStaff = filter === 'all' ? staff : staff.filter(s => s.shift === filter || (filter === 'off-duty' && !s.active));

  const totalSales = staff.reduce((sum, s) => sum + s.sales, 0);
  const activeStaff = staff.filter(s => s.active).length;
  const totalOrders = staff.reduce((sum, s) => sum + s.orders, 0);

  const getRoleBadgeColor = (role: string) => {
    const colors: Record<string, string> = {
      Server: '#3b82f6',
      Bartender: '#8b5cf6',
      Chef: '#ef4444',
      Host: '#10b981',
      Busser: '#fbbf24',
      Manager: '#ec4899',
    };
    return colors[role] || '#6b7280';
  };

  return (
    <div className="app">
      <header className="app-header">
        <h1>👥 Staff Dashboard</h1>
        <p>Team performance and shifts</p>
      </header>

      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-label">Active Staff</div>
          <div className="stat-value">{activeStaff}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Total Sales</div>
          <div className="stat-value sales">${totalSales.toFixed(2)}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Total Orders</div>
          <div className="stat-value">{totalOrders}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Avg Check</div>
          <div className="stat-value">${(totalSales / totalOrders).toFixed(2)}</div>
        </div>
      </div>

      <div className="filters">
        {['all', 'morning', 'evening', 'off-duty'].map((shift) => (
          <button
            key={shift}
            className={`filter-btn ${filter === shift ? 'active' : ''}`}
            onClick={() => setFilter(shift)}
          >
            {shift.charAt(0).toUpperCase() + shift.slice(1).replace('-', ' ')}
          </button>
        ))}
      </div>

      <div className="staff-grid">
        {filteredStaff.map((member) => (
          <div key={member.id} className={`staff-card ${!member.active ? 'inactive' : ''}`}>
            <div className="staff-header">
              <div>
                <h3>{member.name}</h3>
                <span
                  className="role-badge"
                  style={{ backgroundColor: getRoleBadgeColor(member.role) }}
                >
                  {member.role}
                </span>
              </div>
              <div className={`shift-indicator ${member.shift}`}>
                {member.active ? member.shift : 'Off Duty'}
              </div>
            </div>

            <div className="staff-stats">
              <div className="stat">
                <span className="stat-label">Sales</span>
                <span className="stat-value">${member.sales.toFixed(2)}</span>
              </div>
              <div className="stat">
                <span className="stat-label">Orders</span>
                <span className="stat-value">{member.orders}</span>
              </div>
              <div className="stat">
                <span className="stat-label">Avg Check</span>
                <span className="stat-value">
                  {member.avgCheck > 0 ? `$${member.avgCheck.toFixed(2)}` : 'N/A'}
                </span>
              </div>
              <div className="stat">
                <span className="stat-label">Hours</span>
                <span className="stat-value">{member.hours}h</span>
              </div>
            </div>

            <div className="staff-actions">
              <button className="action-btn">View Profile</button>
              <button className="action-btn">Schedule</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
