// Simplified CalendarView Component - Optimized for Morning Meetings
const CalendarViewSimple = ({ calendarData, employees, activeOrders, onCreateAllocation, onUpdateAllocation, onDeleteAllocation }) => {
  // Generate employee colors for visual distinction
  const employeeColors = employees.reduce((colors, employee, index) => {
    const hue = (index * 137.5) % 360;
    colors[employee.id] = `hsl(${hue}, 70%, 55%)`;
    return colors;
  }, {});

  // Helper function to get employee name
  const getEmployeeName = (employeeId) => {
    const employee = employees.find(emp => emp.id === employeeId);
    return employee ? `${employee.first_name} ${employee.last_name}` : `Medarbejder ${employeeId}`;
  };

  return (
    <div className="morning-meeting-simple">
      {/* Clean Header */}
      <div className="simple-header">
        <h1 className="meeting-title">
          🌅 MORGENMØDE - {new Date().toLocaleDateString('da-DK', { 
            weekday: 'long', 
            day: 'numeric', 
            month: 'long' 
          })}
        </h1>
        <div className="quick-stats">
          <span className="stat-badge">👷 {employees.length} medarbejdere</span>
          <span className="stat-badge">📋 {calendarData.entries?.length || 0} opgaver</span>
        </div>
      </div>

      {/* HVEM ARBEJDER HVOR - Large Employee Cards */}
      <div className="employee-assignments">
        {employees.map((employee) => {
          const employeeTasks = calendarData.entries?.filter(entry => 
            entry.employee_id === employee.id
          ) || [];
          
          return (
            <div key={employee.id} className={`employee-card-large ${employeeTasks.length > 0 ? 'busy' : 'available'}`}>
              <div className="employee-header">
                <div 
                  className="employee-avatar-big"
                  style={{ backgroundColor: employeeColors[employee.id] || '#64748b' }}
                >
                  {employee.first_name?.charAt(0)}{employee.last_name?.charAt(0)}
                </div>
                <div className="employee-details">
                  <h2 className="employee-name-big">
                    {employee.first_name} {employee.last_name}
                  </h2>
                  <div className="employee-status-big">
                    {employeeTasks.length > 0 ? '🔥 TRAVL' : '✅ LEDIG'}
                  </div>
                </div>
              </div>
              
              {employeeTasks.length > 0 && (
                <div className="today-tasks">
                  <h3>I DAG:</h3>
                  {employeeTasks.slice(0, 3).map((task, index) => (
                    <div key={index} className="task-simple">
                      <span className="task-time-simple">
                        {new Date(task.start_time).toLocaleTimeString('da-DK', { 
                          hour: '2-digit', 
                          minute: '2-digit' 
                        })} - {new Date(task.end_time).toLocaleTimeString('da-DK', { 
                          hour: '2-digit', 
                          minute: '2-digit' 
                        })}
                      </span>
                      <span className="task-desc-simple">
                        {task.description || task.title || 'Arbejdsopgave'}
                      </span>
                    </div>
                  ))}
                  {employeeTasks.length > 3 && (
                    <div className="more-tasks">+ {employeeTasks.length - 3} flere opgaver</div>
                  )}
                </div>
              )}
              
              {employeeTasks.length === 0 && (
                <div className="no-tasks-today">
                  <p>Ingen planlagte opgaver i dag</p>
                  <p className="availability-note">Tilgængelig for nye opgaver</p>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Simple Footer with Key Info */}
      <div className="meeting-footer">
        <div className="footer-stat">
          📅 <strong>I dag:</strong> {calendarData.entries?.length || 0} opgaver planlagt
        </div>
        <div className="footer-stat">
          ⏱️ <strong>Total timer:</strong> {calendarData.entries?.reduce((sum, entry) => {
            const duration = (new Date(entry.end_time) - new Date(entry.start_time)) / (1000 * 60 * 60);
            return sum + duration;
          }, 0).toFixed(1) || 0}h
        </div>
        <div className="footer-stat">
          👷 <strong>Aktive:</strong> {employees.filter(emp => 
            calendarData.entries?.some(entry => entry.employee_id === emp.id)
          ).length} af {employees.length} medarbejdere
        </div>
      </div>
    </div>
  );
};